جديد
لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم
OKLCH و ألوان CSS الحديثة — لماذا تبدو لوحة ألوانك خاطئة في بعض المتصفحات
تحديث في
تم تصميم RGB وHSL لشاشات CRT. إليك لماذا يُحلل OKLCH التوازن المحسوس، كيف تغيّر دالة color-mix() توازن التدرجات، وما الذي يُفتحه نظام الألوان النسبي دون الحاجة إلى مُعالج مسبق.
إعلان · حذف؟
اختر لونًا أزرقًا لزرك الأساسي. يبدو الأمر صحيحًا في متصفحك. تفتح محاكاة على جهاز مك بوك برو أحدث، ويبدو الأمر... جيدًا — لكنه قليلًا مُبهم. يرسل المصمّم صورة من هاتفه، ويبدو الزر نفسه أكثر وضوحًا. نفس الرمز الستاتي، شاشة مختلفة.
هذا الفجوة في P3. ولهذا هو الأقل تأثيرًا في سبب فشل نموذج ألوان CSS الذي كنت تستخدمه. المشكلة الأكبر تكمن في الحسابات المرتبطة بـ HSL.
الحد الأعلى لسالب ريبج
كل لون سداسي و rgb() القيمة التي كتبتها على أي وقت مضى توجد في مساحة ألوان سالب ريبج — معيار تم إنشاؤه في عام 1996 لشاشات CRT. تغطي سالب ريبج حوالي 35% من الألوان المرئية للإنسان. أما مساحة الألوان P3، التي تُستخدم في كل هواتف آيفون منذ 2017 وغالبية أجهزة مك بوك منذ 2016، فهي تغطي حوالي 45%.
عندما تكتب #3b82f6، فإن اللون يُحد إلى سالب ريبج. على شاشة P3، يمكن للمتصفح أن يُظهر لونًا أكثر تكثفًا من الأزرق — لكن CSS لا يطلب ذلك. تُترك قدرة الشاشة على التعبير عن الألوان دون استخدام.
لإدخال ألوان P3 مباشرة، ستستخدم color(display-p3 0.2 0.4 0.9). هذا يعمل. لكنه ليس السبب في أهمية OKLCH. المشكلة الأكبر تكمن في افتراضات HSL الأساسية.
مبدأ "الضوء" في HSL هو كذب
كانت HSL تحسّنًا حقيقيًا مقارنة بسادس. الألوان، التباين، الضوء — مفاهيم منطقية، قابلة للتعديل من قبل البشر. المشكلة: لا يعني "L" ما تعتقد.
ضع أصفر عند hsl(60, 100%, 50%) وأزرق عند hsl(240, 100%, 50%) بجانب بعضها. كلاهما عند 50% من درجة الضوء.
.yellow { background: hsl(60, 100%, 50%); }
.blue { background: hsl(240, 100%, 50%); }يبدو الأصفر كأنه أبيض. يبدو الأزرق متوسطًا في الظلام. لا يُشبهان في درجة الوضوح. هذه هي عدم التوازن الواقعي في HSL — المحور L لا يُمثل طريقة رؤية الإنسان للضوء.
يؤدي هذا إلى مشكلة صيانة حقيقية عند بناء مقياس الألوان. إذا أنشأت مقياسًا بـ 9 خطوات من خلال تغيير القيم L في HSL، فإن الألوان الذهبية والأزرق تبدو مُضوّرة، بينما الألوان الأزرق والأرجواني تبدو مُتقلبة. تنتهي بتعديل القيم يدويًا، مما يُبطل تمامًا الهدف من استخدام نهج منظم.
OKLCH: مصمم لتمثيل الوعي
تم تصميم OKLCH من قبل بيرن أوتوسون في عام 2020. يعتمد على CIELAB (مساحة ألوان واعية من السبعينات)، لكن يصحح التحولات المعروفة في الألوان — خصوصًا مشكلة الألوان الأرجواني والأزرق حيث تؤثر التغييرات في التباين على التغير المُحسوس في اللون.
القنوات الثلاثة:
- L (الضوء) — من 0 إلى 1، متماسك وفقًا للإدراك. درجة الضوء 0.5 في الأصفر تبدو بنفس درجة الوضوح كدرجة الضوء 0.5 في الأزرق. في الواقع.
- C (التباين) — تبدأ من 0 (أبيض)، تزداد إلى حوالي 0.3-0.4 للون مُكثف. لا يوجد حد أقصى — الحد الأعلى يختلف حسب اللون والمساحة المُراد تحقيقه.
- تدرج اللون (Hue) — من 0 إلى 360 درجة، مقارنة تقريبًا بـ HSL.
إليك لون تيلويند أزرق-500 في أنظمة كلا النظامين:
/* sRGB hex */
background: #3b82f6;
/* OKLCH equivalent — same color, different notation */
background: oklch(0.623 0.214 259.1);
/* Push chroma past sRGB — more vivid blue on P3 displays, clips gracefully on sRGB */
background: oklch(0.623 0.27 259.1);القيمة الأخيرة تقع خارج مساحة سالب ريبج. تُعرض الألوان الأكثر وضوحًا على شاشات P3، بينما تُقصى الألوان على المتصفحات القديمة إلى أقرب قيمة ممكنة في سالب ريبج. تحسين تدريجي بدون أي جهد.
مزيج الألوان وسبب تغيير مساحة الألوان في عملية التمثيل
color-mix() تم إضافتها في Chrome 111، Firefox 113، وSafari 16.2. تُدمج ألوان محددة بعلاقة محددة — بسيطة. لكن مساحة الألوان التي تُحدد تؤثر بشكل كبير على النتيجة.
/* Mixes through sRGB — midpoint is a washed-out brown-grey */
background: color-mix(in srgb, oklch(0.7 0.2 30), oklch(0.7 0.2 270));
/* Mixes through the OKLCH color wheel — midpoint is a vivid purple */
background: color-mix(in oklch, oklch(0.7 0.2 30), oklch(0.7 0.2 270));عند مزيج الأصفر والأزرق في سالب ريبج، فإن النتيجة تُحسب من خلال متوسط القيم المُدخلة. يمر النقطة المتوسطة عبر لون بني مُخفف. في OKLCH، يتم التمثيل على مسار لون الألوان — تصل إلى لون أرجواني مُشرق. ما هو الصحيح يعتمد على الهدف، لكن في التحولات، التدرجات، والحالات المُعلّقة، فإن التمثيل في OKLCH هو ما نريده تقريبًا دائمًا.
استخدام عملي: إنشاء حالة غير نشطة دون ترميز قيمة سداسية ثانية.
.button--disabled {
background: color-mix(in oklch, var(--color-primary) 40%, white);
cursor: not-allowed;
}نظام الألوان النسبي
نظام الألوان النسبي (Chrome 119+، Firefox 128+، Safari 16.4+) يسمح لك بإنشاء لون جديد من خلال تعديل قنوات لون موجود:
:root {
--brand: oklch(0.623 0.214 259.1);
}
.button:hover {
/* Lighten by 8% lightness units */
background: oklch(from var(--brand) calc(l + 0.08) c h);
}
.button:active {
/* Darken and reduce chroma slightly */
background: oklch(from var(--brand) calc(l - 0.08) calc(c - 0.02) h);
}
.button--muted {
/* Drop chroma to near-zero: perceptual grey at the same lightness */
background: oklch(from var(--brand) l 0.03 h);
}هذا يُستبدل بـ Sass's lighten(), darken()و، و desaturate() بـ CSS مدمج — بدون مُعالج مسبق، بدون خطوة بناء، بدون قيم سداسية متوازية يجب الحفاظ عليها. وبالنظر إلى أنك في نظام OKLCH، فإن "إضافة ضوء" تبدو أوضح في كل الألوان في مجموعتك، وليس فقط في بعضها.
محدودية واقعية: القيود المعقدة على القنوات (مثل تثبيت التباين لضمان البقاء داخل مساحة الألوان) تتطلب سلاسل calc() مُفصّلة تصبح معقدة بسرعة. بالنسبة للتعديلات البسيطة على درجة الوضوح والتباين، فإن النظام نظيف. أما بالنسبة لأي شيء أكثر تعقيدًا، فإن حساب القيم في وقت البناء وإنشاء خصائص CSS هو أكثر قابلية للصيانة.
دعم المتصفحات في عام 2026
| ميزة | الكروم | Firefox | رحلات السفاري |
|---|---|---|---|
oklch() | 111+ | 113+ | 15.4+ |
color-mix() | 111+ | 113+ | 16.2+ |
| نظام الألوان النسبي | 119+ | 128+ | 16.4+ |
color(display-p3) | 111+ | 113+ | 10+ |
الدعم العالمي لـ oklch() أعلى من 90% في منتصف عام 2026. المُقاومون هم المتصفحات القديمة المبنية على كروم وجميع المتصفحات التي تستخدم إصدارًا من Firefox أقل من 113. إذا كانت هذه المتصفحات جزءًا من قاعدة المستخدمين، فستحتاج فقط إلى تبديل بسيط:
.button {
background: #3b82f6; /* sRGB fallback */
}
@supports (background: oklch(0 0 0)) {
.button {
background: oklch(0.623 0.214 259.1);
}
}في الممارسة: إذا أكدت تحليلاتك على Chrome 111+، Firefox 113+، وSafari 15.4+، يمكنك تجاهل التبديل تمامًا. المُستند @supports مُستخدم لضمان سلامة الأدوات الداخلية حيث لا يمكنك التحكم في إصدارات المتصفح.
تحويل مجموعتك الحالية
النقطة المُحالة في تبني OKLCH هي الانتقال من القيم السداسية الحالية إلى الإحداثيات OKLCH وفهم ما تعنيه القنوات لكل لون. يُعالج مُحول مساحة اللون الموحّدة التحويل في الاتجاهين — ضع قيمة سداسية أو قيمة HSL، واحصل على قيمة OKLCH، ثم ابدأ في تعديل L و C من نقطة مرجعية حقيقية. يدعم HSL، RGB، Lab، LCH، HSV، وOKLCH في مكان واحد، وهو مفيد عندما تعمل من ملف Figma يُعطيك قيمة سداسية وتحتاج إلى الانتقال إلى قيم OKLCH يمكنك التفكير فيها.
كيفية الانتقال الفعلي
لا تحتاج إلى إعادة كتابة كل شيء مرة واحدة. تسلسل عملي:
- ابدأ بالألوان التفاعلية — الألوان الأساسية، الثانوية، والمحرمة. هذه هي الألوان التي تُولد من خلالها حالات التفاعل، التحفيز، والغائمة. يُستبدل هذا التفكير بالـ CSS المدمج فورًا باستخدام OKLCH.
- احتفظ بالألوان الثابتة في السداسي للآن — النصوص، الخلفيات، الحواف. لا يتم التعديل عليها بشكل برمجي، لذا لا توجد مكافأة لتحويلها بعد الآن.
- ابنِ نظامًا جديدًا من الصفر في OKLCH — حيث تصبح الفوائد في التوازن الواقعي هي هيكلية. ستحصل على خطوة 500 في مقياس القيم المتعادلة، وستكون الألوان المُكثفة متسقة في جميع الألوان دون الحاجة إلى تعديل يدوي.
الهدف ليس OKLCH من أجله نفسه. بل أن يكون لديك نظام ألوان يُطابق ما يراه عينك — بحيث تنتهي من التكيّف يدويًا كل مرة ترغب في لون أزرق أخف قليلاً.
هل تريد حذف الإعلانات؟
تخلص من الإعلانات اليوم
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
إعلان · حذف؟
أدوات يجب تجربتها
عرض الكلإعلان · حذف؟
شارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
إعلان · حذف؟