طريقة إنشاء أداة اختيار الالوان Hex-Color
إن أداة اختيار لون Hex هي وسيلة ممتازة لمساعدة المصممين والمطورين في تحديد الألوان المناسبة لمشاريعهم بكل سهولة. في هذا المقال، سنتعرف على كيفية إنشاء الأداة، كيفية استخدامها، وفوائدها في تصميم مواقع الويب أو التطبيقات.
1. طريقة إنشاء الأداة
لإنشاء هذه الأداة، نحتاج إلى استخدام HTML، CSS، وJavaScript. هذه الأداة ستتيح للمستخدمين اختيار لون باستخدام أداة
<input type="color"> المدمجة في HTML5، وستقوم بعرض كود اللون بصيغة Hex مع معاينة اللون المختار.
يمكنك إنشاء هذه الأداة باستخدام الكود التالي:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>أداة اختيار لون Hex</title>
<style>
/* إضافة تنسيقات CSS هنا */
</style>
</head>
<body>
<div class="color-picker-container">
<h2>أداة اختيار لون Hex</h2>
<input type="color" id="colorPicker" value="#ff0000">
<input type="text" id="hexCode" readonly>
<div class="color-preview" id="colorPreview"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const colorPicker = document.getElementById("colorPicker");
const hexCode = document.getElementById("hexCode");
const colorPreview = document.getElementById("colorPreview");
hexCode.value = colorPicker.value;
colorPreview.style.backgroundColor = colorPicker.value;
colorPicker.addEventListener("input", function () {
const color = colorPicker.value;
hexCode.value = color;
colorPreview.style.backgroundColor = color;
});
});
</script>
</body>
</html>
2. طريقة الاستخدام
استخدام الأداة بسيط للغاية:
- يمكنك اختيار اللون الذي ترغب فيه من خلال النقر على مربع اختيار الألوان.
- بمجرد اختيار اللون، سيظهر كود اللون بصيغة Hex في المربع النصي، ويمكنك نسخه لاستخدامه في مشروعك.
- يمكنك أيضًا رؤية اللون المختار في مربع المعاينة بجانب كود Hex.
3. فوائد استخدام هذه الأداة
هذه الأداة توفر عدة فوائد للمصممين والمطورين:
- سهولة اختيار الألوان: لا حاجة لتذكر أو البحث عن أكواد الألوان، حيث يمكنك اختيار اللون بسهولة ومشاهدة الكود الخاص به فوراً.
- التفاعلية: تستطيع معاينة اللون المختار بشكل مباشر مما يساعد في اتخاذ قرارات التصميم بشكل أسرع.
- المرونة: كود Hex يمكن استخدامه في تصميم مواقع الويب أو تطبيقات الموبايل أو أي بيئة تتطلب تحديد ألوان دقيقة.
Color Picker: Hex Code:
