اختر أي لون واحصل على كوده فوراً
أكواد الألوان موجودة في كل مكان في تصميم الويب والتصميم الغرافيكي والبرمجة. حين ترى لوناً تريد استخدامه أو إعادة إنتاجه، تحتاج إلى كوده — سواء كانت قيمة HEX لـCSS، أو ثلاثية RGB لبرنامج فوتوشوب، أو مواصفة HSL للتعامل البرمجي مع الألوان. تمنحك هذه الأداة الصيغ الثلاث كلها دفعة واحدة لأي لون تختاره.
صيغ أكواد الألوان الثلاث
HEX (الست عشري): الصيغة الأكثر استخداماً في تطوير الويب. سلسلة من ستة رموز من الأرقام 0-9 والحروف A-F، تسبقها علامة #. يمثّل كل زوج من الرموز قناة لون واحدة: #RRGGBB. مثلاً، #FF5733 يحتوي أحمر بأقصى قيمة (FF = 255)، وأخضر متوسط (57 = 87)، وأزرق منخفض (33 = 51). يمكن أيضاً كتابة أكواد HEX بصيغة مختصرة حين يتطابق الرمزان في كل زوج: #FF5500 تصبح #F50.
RGB (الأحمر، الأخضر، الأزرق): تحدّد كل قناة لون كعدد صحيح من 0 (انعدام) إلى 255 (الحدّ الأقصى). هذه الصيغة الأصلية للشاشات الرقمية، التي تُصدر ضوءاً بالأحمر والأخضر والأزرق. rgb(255, 87, 51) هو اللون نفسه #FF5733. تُستخدَم قيم RGB في CSS، وجافاسكربت، وبايثون، ومعظم برمجيات تحرير الصور.
HSL (تدرّج اللون، التشبّع، الإضاءة): صيغة أكثر حدساً للبشر. تدرّج اللون هو اللون الصافي مُعبَّراً عنه كزاوية من 0° إلى 360° حول عجلة الألوان: 0° = أحمر، 120° = أخضر، 240° = أزرق. التشبّع هو مدى حيوية اللون أو رماديته (0% = رمادي، 100% = مشبَع تماماً). والإضاءة هي مدى فتوح اللون أو غموقه (0% = أسود، 100% = أبيض، 50% = اللون «الطبيعي» المشبَع تماماً). تتميّز HSL بأنها ممتازة لتعديل الألوان بشكل منهجي: زد الإضاءة لإنشاء درجات فاتحة، وأنقصها لإنشاء درجات غامقة.
كيفية استخدام أداة الاختيار
انقر أو اضغط على عيّنة اللون لفتح أداة اختيار الألوان الأصلية في متصفحك، اختر لوناً بصرياً أو اكتب قيمة معروفة، وتتحدّث أكواد HEX وRGB وHSL كلها معاً فوراً، جاهزة للنسخ إلى أي أداة أو كود تعمل عليه. ولأن الأداة تستخدم واجهة المتصفح المدمجة نفسها بدل واجهة مخصّصة، فهي تتصرّف بالضبط كما تتوقّع وتعمل بموثوقية عبر الأجهزة المختلفة.
أي صيغة تستخدم
CSS وتصميم الويب: كلٌّ من HEX وRGB مدعومان على نطاق واسع، لكن HSL أصبحت مفضَّلة أكثر فأكثر لأنها سهلة الضبط بشكل حدسي. جعل لون أفتح بنسبة 10% سهل في HSL؛ أما في RGB فيتطلّب حساب قيم قنوات جديدة.
التصميم للطباعة: تستخدم الطباعة عادة نظام CMYK (السماوي، الأرجواني، الأصفر، والأسود)، الذي لا تغطّيه هذه الأداة. للتحويل من الرقمي إلى الطباعة، استخدم برمجيات احترافية كأدوبي إليستريتور.
البرمجة: RGB هي الصيغة الأصلية لمعظم مكتبات الرسوميات. أما HSL فمفيدة حين تريد توليد لوحات ألوان برمجياً.
أساسيات نظرية الألوان
فهم الألوان يساعدك على استخدام هذه الأداة بفاعلية أكبر:
الألوان المتكاملة: الألوان المتقابلة على عجلة تدرّج اللون (بفارق 180°) تخلق أقصى تباين. الأحمر (0°) والسماوي (180°).
الألوان المتجاورة: الألوان المتلاصقة على عجلة تدرّج اللون (بفارق 30-60°) تخلق لوحات متناغمة قليلة التباين.
الألوان الثلاثية: ثلاثة ألوان متباعدة بالتساوي بفارق 120° تخلق تركيبات حيوية ومتوازنة.
الدرجات الفاتحة والغامقة: زد إضاءة HSL فوق 50% لإنشاء درجات فاتحة (نسخ أفتح). أنقصها دون 50% لإنشاء درجات غامقة (نسخ أغمق).
سهولة الوصول والتباين
تتطلّب معايير سهولة الوصول على الويب تبايناً كافياً بين ألوان النص والخلفية. تحدّد إرشادات WCAG 2.1 نسبة تباين دنيا قدرها 4.5:1 للنص العادي و3:1 للنص الكبير. استخدم أكواد الألوان من هذه الأداة في فاحص تباين مخصّص للتحقّق من سهولة الوصول.
توافقات الألوان في التصميم
إلى جانب الأزواج الأساسية المذكورة أعلاه، تظهر تركيبات أخرى غالباً في أعمال التصميم. يستخدم النظام أحادي اللون درجات وتظليلات ونغمات مختلفة للون واحد، يُنشَأ بتغيير إضاءة HSL مع إبقاء تدرّج اللون والتشبّع ثابتين — طريقة موثوقة لبناء لوحة متماسكة من دون أي خطر تنافر بين الألوان. أما النظام شبه المتكامل المنقسم فيأخذ لوناً أساسياً إضافة إلى اللونين المتجاورين لمتمّمه، ما يمنح كثيراً من التباين البصري لزوج متكامل مباشر مع إحساس أنعم وأكثر دقّة.
سهولة الوصول على الويب وتباين الألوان
تحدّد إرشادات محتوى الويب لسهولة الوصول متطلّبات نسبة التباين للنص المقروء: يتطلّب معيار AA نسبة 4.5:1 على الأقلّ للنص العادي و3:1 للنص الكبير (18 نقطة أو أكبر، أو 14 نقطة عريضة)، بينما يتطلّب معيار AAA الأكثر صرامة نسبتَي 7:1 و4.5:1 على التوالي. التباين العالي بين النص والخلفية يهمّ لأي شخص ذي رؤية ضعيفة، وخصوصاً لنحو 8% من الرجال و0.5% من النساء ممّن يعانون شكلاً من أشكال ضعف إدراك الألوان، الذين قد تبدو لهم أزواج ألوان معيّنة متمايزة لمعظم الناس متطابقة تقريباً.
ألوان CSS المسمّاة
يحدّد CSS 147 لوناً مسمّى يمكن استخدامها مباشرة بدل قيمة ست عشرية أو RGB، تتراوح من أسماء واضحة كالأحمر والأزرق والأسود إلى أسماء أكثر غرابة مثل cornflowerblue وpapayawhip وrebeccapurple — سُمّي الأخير عام 2014 تخليداً لذكرى ريبيكا ماير، ابنة مطوّر CSS إريك ماير. اختيار لون بهذه الأداة ومقارنته بأقرب لون CSS مسمّى طريقة سريعة لمعرفة هل يوجد اسم قياسي فعلاً للدرجة التي تفكّر فيها تقريباً.
اختيار الألوان في التصميم العربي
للألوان دلالات ثقافية تستحق الانتباه عند تصميم محتوى موجَّه لجمهور عربي. الأخضر مثلاً يحمل ارتباطات دينية وطبيعية قوية في كثير من الثقافات العربية والإسلامية، بينما يُستخدَم الذهبي كثيراً للدلالة على الفخامة والتراث. عند اختيار لوحة ألوان لموقع أو تصميم موجَّه لجمهور عربي، يفيد اختبار الألوان بهذه الأداة ثم التحقّق من دلالاتها الثقافية المحلّية إلى جانب مطابقتها الفنّية، فالكود الست عشري الدقيق لا يخبرك بكل ما يحتاج المصمّم معرفته عن انطباع اللون لدى جمهوره المستهدف.
خاص وفوري
تعمل أداة اختيار الألوان بالكامل داخل متصفحك باستخدام عنصر إدخال اللون الأصلي في المتصفح، فتظهر النتائج فوراً ولا يُرسَل أي لون تختاره إلى خادم أو يُسجَّل أو يُشارَك.
Color picker FAQ
- What are HEX, RGB, and HSL?
- HEX is a six-digit hexadecimal code like #ff5733. RGB specifies red, green, and blue channels from 0 to 255. HSL specifies hue (0-360°), saturation (%), and lightness (%). All three represent the same color differently.
- Which format should I use?
- HEX is most common in web design and CSS. RGB is used in programming and image editing. HSL is intuitive for humans because hue is easy to understand and adjust.
- Can I enter a specific color code?
- Use the color picker to select visually. For entering a specific HEX or RGB value precisely, use your browser's color input directly — click it and type the value.