ثلاث طرق لكتابة لون
| HEX | #2563D9 |
| RGB | rgb(37, 99, 217) |
| HSL | hsl(219, 71%, 50%) |
الثلاثة هي الأزرق نفسه. تكوّن الشاشات كل لون بمزج ضوء أحمر وأخضر وأزرق، وكل صيغة طريقة مختلفة لكتابة هذه الكميات.
RGB وHEX
يعطي RGB الأحمر والأخضر والأزرق من 0 إلى 255. ويكتب HEX هذه الأرقام الثلاثة بالأساس 16، برقمين لكل منها: 25 تساوي 37، و63 تساوي 99، وD9 تساوي 217. الرمز القصير مثل #FFF يكرر كل رقم (#FFFFFF، الأبيض)، والزوج الرابع يضيف الشفافية (#2563D980 شفاف بنحو النصف).
HSL
يصف HSL اللون كما نفكر فيه: درجة اللون موقعه على عجلة الألوان بالدرجات (0 أحمر، 120 أخضر، 240 أزرق)، والتشبع شدته، والإضاءة من الأسود عند 0% إلى الأبيض عند 100%. هكذا يسهل استخراج درجة أفتح أو أغمق: أبقِ درجة اللون والتشبع وغيّر الإضاءة.
CMYK للطباعة
تمزج الطابعات حبرًا سماويًا وأرجوانيًا وأصفر وأسود بدلًا من الضوء. التحويلات بين RGB وCMYK تقريبية، لأن الشاشات والأحبار لا تستطيع عرض النطاق نفسه من الألوان تمامًا.
التباين للنص
تطلب إرشادات الوصول WCAG تباينًا لا يقل عن 4.5:1 للنص العادي و3:1 للنص الكبير في المستوى AA. ينتقل محوّل الألوان بين كل هذه الصيغ ويتحقق من التباين مع النص الأبيض والأسود. ولاستخراج رمز لون من صورة أو لقطة شاشة، استخدم منتقي ألوان الصورة.
إنشاء لوحة ألوان بـ HSL
ثبّت التدرج وغيّر الإضاءة، فتحصل على مجموعة درجات متناسقة. بدءًا من hsl(219, 71%, 50%)، أزرق متوسط:
| الاستخدام | HSL | HEX |
|---|---|---|
| الخلفية عند مرور المؤشر | hsl(219, 71%, 95%) | #E9F0FB |
| الحد | hsl(219, 71%, 80%) | #A8C1F0 |
| الزر | hsl(219, 71%, 50%) | #2564DA |
| الزر مضغوطًا | hsl(219, 71%, 40%) | #1E50AE |
| نص العنوان | hsl(219, 71%, 25%) | #12326D |
فعل الشيء نفسه بـ HEX يعني تخمين ثلاثة أرقام معًا، ولهذا تعمل أدوات التصميم بـ HSL.
التحقق من التباين
ذلك الأزرق على الأبيض يعطي نسبة تباين 5.37:1، تتجاوز الـ 4.5:1 المطلوبة للنص العادي. وعلى الأسود 3.91:1 فقط، فيحمل الزر نصًا أبيض لا أسود. ويعتمد التباين على الإضاءة أكثر بكثير من التدرج، فاللون متوسط الإضاءة يفشل غالبًا مع الاثنين.
أخطاء شائعة
- توقّع أن الإضاءة نفسها تبدو بالسطوع نفسه. hsl(60, 100%, 50%) أصفر زاهٍ وhsl(240, 100%, 50%) أزرق داكن. العين أكثر حساسية للأخضر من الأزرق بكثير. تحقق من التباين، ولا تثق برقم الإضاءة.
- الخلط بين HSL وHSB. HSB في Photoshop، ويُسمى أيضًا HSV، ليس HSL. مع سطوع وتشبع 100%، يعطي HSB التدرج الصافي، بينما HSL بإضاءة 100% أبيض دائمًا.
- استخدام رمز HEX بشفافية حيث لا يُدعم. يعمل HEX ذو الأرقام الثمانية في المتصفحات، لكن تطبيقات وأدوات قديمة كثيرة لا تقبل إلا ستة.
- الحكم على الألوان من لقطة شاشة. لقطة الشاشة المضغوطة بـ JPG تغيّر قيم البكسلات، فقد ينحرف اللون المختار قليلًا. التقط اللون من PNG.