HEX وRGB وHSL ثلاث طرق تتيح لك بها CSS تحديد اللون نفسه. صيغة HEX مختصرة وشائعة في أدوات التصميم؛ وRGB أقرب إلى طريقة خلط الشاشات للضوء الأحمر والأخضر والأزرق؛ أما HSL (الصبغة والتشبع والسطوع) فهي غالبًا أسهل في التعديل يدويًا، إذ تغيّر السطوع أو التشبع دون إعادة حساب ثلاثة أرقام منفصلة.
كيف تعمل
رمز HEX من 6 أرقام هو في الحقيقة ثلاثة أعداد ست عشرية من رقمين متتالية: واحد للأحمر وواحد للأخضر وواحد للأزرق، وكل منها بين 00 وFF (أي 0-255 بالعشري). أما الصيغة المختصرة من 3 أرقام مثل #2B6 فتُضاعف كل رقم، فتصبح #22BB66 قبل التحويل.
RGB هي القيم الثلاث نفسها مكتوبة بالعشري بدل الست عشري: rgb(43, 110, 74) هو اللون نفسه #2B6E4A.
تُشتق HSL من قيم RGB بالمعادلة القياسية لقياس الألوان: الصبغة هي الزاوية حول عجلة الألوان (0-360°)، والتشبع هو مدى حيوية اللون مقابل رماديّته، والسطوع هو مدى قربه من الأسود أو الأبيض.
مثال محلول
لون HEX #20524A (اللون المميز لهذا الموقع) يتحول إلى rgb(32, 82, 74) وhsl(170, 44%, 22%)، وهو أخضر مزرق داكن وهادئ.
أمثلة إضافية
اللون #3366CC هو rgb(51, 102, 204) وhsl(220, 60%, 50%). ولإنتاج لون أفتح عند التمرير، ارفع السطوع: hsl(220, 60%, 65%).
أخطاء شائعة
- اعتبار سطوع HSL هو السطوع المُدرَك بالعين؛ فالسطوع المتساوي قد يبدو مختلفًا جدًا بين الصبغات.
- نسيان التباين: يحتاج النص إلى نسبة 4.5:1 على الأقل مع خلفيته لتحقيق مستوى WCAG AA.
- إسقاط قناة ألفا عند تحويل ألوان فيها شفافية.
- توسيع الصيغة المختصرة خطأً: #36C هو #3366CC.
أسئلة يطرحها الناس
لماذا أرى أحيانًا قيمة رابعة مثل RGBA أو HSLA؟
الحرف «A» يرمز إلى ألفا، أي العتامة، من 0 (شفاف تمامًا) إلى 1 (معتم تمامًا). يتعامل هذا المحوّل مع قنوات اللون الثلاث؛ أضف قيمة ألفا منفصلة في CSS إذا احتجت إلى شفافية، مثل rgba(32, 82, 74, 0.5).
أي صيغة أستخدم في CSS؟
الصيغ الثلاث تُعرض بالنتيجة نفسها، والأمر مسألة راحة فقط. غالبًا ما تكون HSL أسهل في الضبط اليدوي (مثل تغميق لون بخفض نسبة السطوع) دون الحاجة إلى منتقي ألوان، ولهذا تعرّف كثير من أنظمة التصميم لوحاتها بصيغة HSL حتى لو صدّرت قيم HEX أيضًا.
لماذا تحوّل رمز HEX من 3 أرقام إلى 6 أرقام؟
صيغة HEX المختصرة (#2B6) اختصار يُضاعَف فيه كل رقم لتكوين القيمة الكاملة (#22BB66). وهي لا تمثل إلا 16 درجة لكل قناة بدلًا من 256، ولهذا تُستخدم أساسًا للألوان البسيطة المشبعة.
كيف أحوّل HEX إلى RGB يدويًا؟
قسّم الأرقام الستة إلى ثلاثة أزواج وحوّل كل زوج من الست عشري إلى العشري. يصبح #1E90FF كالتالي: 1E = 30 و90 = 144 وFF = 255، فيكون rgb(30, 144, 255).
هل أستطيع تحويل RGB إلى CMYK للطباعة؟
بشكل تقريبي فقط. فالشاشات تخلط الضوء (RGB) والطابعات تخلط الحبر (CMYK)، وكثير من ألوان الشاشة الساطعة لا يمكن طباعته بدقة. وللعمل المطبوع، حوّل باستخدام ملف الألوان الخاص بالطابعة في أداة تصميم.