استيفاء الألوان في CSS: لماذا يفوز OKLCH

في كل مرة تمزج فيها CSS لونين — في تدرج، أو في color-mix()، أو في انتقال — تُجري استيفاء لوني: حساب القيم الوسيطة بين لون بداية ولون نهاية. مع CSS الحديث، يمكنك الآن اختيار فضاء الألوان للاستيفاء. والاختيار مهم جداً، وينتج OKLCH باستمرار أفضل النتائج.

مشكلة استيفاء RGB: نقاط وسط باهتة

عندما تكتب تدرجاً في CSS دون تحديد فضاء لوني، يستوفي المتصفح في sRGB.

/* الافتراضي: يستوفي في sRGB */
background: linear-gradient(to right, #FF0000, #00FF00);

نقطة منتصف هذا التدرج في sRGB هي #808000 — زيتوني باهت. المشكلة الجوهرية هي أن sRGB ليس متسقاً إدراكياً.

مشكلة جاما

background: linear-gradient(in srgb-linear, red, blue);

sRGB الخطي أفضل من sRGB المشفر بجاما، لكنه لا يحل مشاكل إزاحة الصبغة وانخفاض التشبع.

إزاحات صبغة HSL

تمتلك HSL وضع فشل مميزاً: إزاحات الصبغة. المشكلة الأعمق هي أن Lightness في HSL ليست متسقة إدراكياً.

/* تدرج HSL — سطوع إدراكي غير متساو عبر الصبغات */
background: linear-gradient(in hsl, hsl(60 100% 50%), hsl(240 100% 50%));

OKLCH: الاتساق والتسوية الإدراكية

صمّم Björn Ottosson نظام OKLCH عام 2020 تحديداً لمعالجة أوجه القصور في التسوية الإدراكية للفضاءات اللونية السابقة. قنواته الثلاثة — L (الإضاءة)، C (الكثافة)، وH (زاوية الصبغة) — مُعايَرة بحيث تُنتج الخطوات العددية المتساوية في L تغييرات متساوية في السطوع المُدرَك.

/* تدرج OKLCH — حيوي، متسق إدراكياً */
background: linear-gradient(in oklch, red, blue);

مقارنة جنباً إلى جنب

دالة color-mix()

color: color-mix(in oklch, #FF5733 50%, #3498DB);

الاستخدامات العملية لـ color-mix()

إنشاء متغيرات شفافة:

:root {
  --brand: #2563EB;
  --brand-10: color-mix(in oklch, var(--brand) 10%, transparent);
  --brand-50: color-mix(in oklch, var(--brand) 50%, transparent);
}

التظليل نحو الأبيض أو الأسود:

:root {
  --brand: #2563EB;
  --brand-light: color-mix(in oklch, var(--brand) 70%, white);
  --brand-dark:  color-mix(in oklch, var(--brand) 70%, black);
}

اشتقاق حالة التمرير:

.button:hover {
  background: color-mix(in oklch, var(--brand) 80%, black);
}

فضاء الألوان للاستيفاء في التدرجات

/* sRGB (الافتراضي، غالباً باهت) */
background: linear-gradient(to right, red, blue);

/* OKLCH (موصى به: حيوي، متسق إدراكياً) */
background: linear-gradient(in oklch to right, red, blue);

اتجاه استيفاء الصبغة في OKLCH

/* القوس الأقصر (الافتراضي) */
background: linear-gradient(in oklch, hsl(30 100% 50%), hsl(270 100% 50%));

/* القوس الأطول — يمر عبر الأصفر والأخضر والسماوي */
background: linear-gradient(in oklch longer hue, hsl(30 100% 50%), hsl(270 100% 50%));

دعم المتصفحات

• Chrome/Edge: دعم كامل منذ الإصدار 111 (مارس 2023)
• Firefox: دعم كامل منذ الإصدار 113 (مايو 2023)
• Safari: دعم كامل منذ الإصدار 16.2 (ديسمبر 2022)

للمتصفحات الأقدم:

background: linear-gradient(to right, #FF5733, #3498DB);

@supports (background: linear-gradient(in oklch, red, blue)) {
  background: linear-gradient(in oklch to right, #FF5733, #3498DB);
}

النقاط الرئيسية

• استيفاء sRGB (الافتراضي في CSS) يُنتج نقاط وسط باهتة وغير مشبعة.
• استيفاء HSL يُدخل سطوعاً إدراكياً غير متسق.
• استيفاء OKLCH يُنتج نقاط وسط حيوية ومتسقة إدراكياً.
• استخدم in oklch في أي تدرج. استخدم color-mix(in oklch, ...) للمزج البرمجي.
• يتيح لك Color Converter تحويل قيم HEX أو RGB إلى OKLCH.
• يتيح لك Gradient Generator معاينة كيفية تأثير فضاءات الألوان المختلفة على مخرجات التدرج.