تنسيقات الألوان وفضاءاتها
تُمثَّل الألوان على الشاشة بعدة تنسيقات حسب السياق. يُستخدم تنسيق HEX (#RRGGBB أو الاختصار #RGB) في كل مكان في CSS وHTML. تستخدم RGB وRGBA (أحمر وأخضر وأزرق وألفا) قيماً صحيحة من 0 إلى 255 لكل قناة، أو قيماً كسرية من 0.0 إلى 1.0 في بعض واجهات برمجة التطبيقات. تصف HSL (الصبغة والإشباع والإضاءة) وHSV/HSB (الصبغة والإشباع والقيمة/السطوع) الألوان بمصطلحات أقرب إلى الإدراك البشري — تدور الصبغة على عجلة بزاوية 360 درجة، بينما يستخدم الإشباع والإضاءة نسباً مئوية.
CMYK (سيان وماجنتا وأصفر وأسود) هو نموذج الألوان الطرحي المستخدم في الطباعة. على عكس RGB الذي يضيف الضوء، يطرح CMYK الضوء من الورق الأبيض. يعطي تحويل لون RGB إلى CMYK تقريباً مناسباً للنماذج التصميمية؛ يتطلب تحقيق دقة طباعية ملفَّ لوني وبرامج متوافقة مع ICC. يتعامل هذا المحوّل مع جميع ترجمات التنسيق هذه في الوقت الفعلي.
تتحكم قناة الألفا (A في RGBA وHSLA) في التعتيم من 0 (شفاف تماماً) إلى 1 (معتم تماماً). تدعم CSS أيضاً الدالة الحديثة `color()` وبناء جملة CSS Color Level 4 مع قيم مفصولة بمسافات وألفا اختياري، لكن تبقى تنسيقات HEX وRGB وHSL الأكثر استخداماً في تطوير الويب وتصميم واجهة المستخدم.
الاستخدامات العملية في تصميم الويب وواجهة المستخدم
تعتمد أنظمة التصميم والخصائص المخصصة في CSS على قيم ألوان متسقة عبر جميع التنسيقات. عندما يقدم مصمم لوناً للعلامة التجارية بتنسيق HEX، قد يحتاج المطور إلى قيمة HSL المعادلة لتوليد ظلال أفتح وأغمق برمجياً باستخدام `calc()` في CSS. يجعل هذا المحوّل تلك الترجمة فورية.
تتطلب معايير إمكانية الوصول (WCAG 2.1) نسبة تباين دنيا تبلغ 4.5:1 للنص العادي و3:1 للنص الكبير. تُحسب نسبة التباين من الإضاءة النسبية لونَين، التي تعتمد على قيم RGB. لذا يُعدّ فهم تمثيل RGB للون ضرورياً للتحقق من الامتثال لإمكانية الوصول. يستخدم كثير من المطورين HSL لتغيير الإضاءة بشكل منهجي مع إبقاء الصبغة والإشباع ثابتَين، مما يضمن سلوك تباين قابل للتنبؤ عبر مقياس اللون.
تكشف معالجات CSS المسبقة (Sass وLess) عن دوال معالجة الألوان مثل `lighten()` و`darken()` و`saturate()` و`mix()`، وكلها تعمل داخلياً على HSL أو RGB. يعرّف Tailwind CSS وغيره من الأطر الإطارية المساعدة لوحات الألوان كظلال مرقّمة (50–950) تُولَّد بضبط إضاءة HSL. معرفة قيم HSL الأولية تتيح لك وضع الألوان بدقة ضمن هذه المقاييس.
أساسيات نظرية الألوان
تقسّم عجلة الصبغة الطيف المرئي إلى دائرة بزاوية 360 درجة: 0° و360° هما الأحمر، و120° هو الأخضر، و240° هو الأزرق. تقع الألوان التكاملية على بُعد 180° من بعضها (أحمر/سيان، أزرق/برتقالي، أصفر/بنفسجي). تستخدم مخططات الألوان الثلاثية ثلاث صبغات متباعدة بمقدار 120°. تجمع المخططات المتشابهة الصبغات ضمن قوس من 30 إلى 60°. يساعدك فهم علاقات الصبغة على بناء لوحات ألوان متناغمة.
يقيس الإشباع نقاء اللون. يعطي الإشباع 100% أكثر ظلال الصبغة حيوية؛ يُنتج 0% رمادياً بغض النظر عن الصبغة. تتراوح الإضاءة في HSL بين 0% (أسود) و100% (أبيض)، مع 50% الذي يعطي الصبغة النقية. القيمة في HSV هي أقصى سطوع: 0% هو الأسود، و100% هو أكثر إصدار مضيء ممكن للصبغة عند إشباع كامل.
تُعيَّن الألوان المسماة في CSS (مثل `tomato` و`steelblue` و`rebeccapurple`) جميعها إلى قيم HEX/RGB محددة. يقبل هذا المحوّل الألوان المسماة وأي تعبير لوني CSS صالح، ويحلّها إلى جميع التنسيقات الرقمية. استخدم أزرار النسخ بجانب كل تنسيق للصق القيم مباشرة في محرر الكود أو أداة التصميم أو ملف CSS.