👨🏻‍🏭 🐤 👩🏿‍🤝‍👨🏼 ألوان CSS LCH 🎋 ㊙️ 🐖

لقد كنت دائما مهتما بعلم الألوان. في عام 2014 ، تحدثت في مؤتمرات مختلفة ، وتحدثت عن مواصفات CSS Color 4. وقبل ذلك ، في عام 2009 ، كتبت برنامجًا لاختيار الألوان. استخدمت برنامج Java مخفي لدعم ملفات تعريف ألوان ICC والعمل بشكل صحيح مع CMYK. لقد كان ، حسب علمي ، أول برنامج من نوعه. لم أنشره قط ، لكنه أدى إلى نشر هذا المنشور. جلبني الاهتمام بالألوان إلى الرجل الذي أصبح زوجي. في عام 2019 ، أصبحت محررًا مشاركًا لمواصفات CSS Color 5 . هدفي هو تجسيد اقتراحي.

تعديل اللون ، والذي يهدف إلى السماح للمصممين بتخصيص قنوات الألوان بشكل تعسفي لإنشاء خيارات الألوان. أريد أيضًا دمج عرضي مع هذا العرض. ألوان CSS LCH هي شيء يثير إعجابي حقًا. أنا مقتنع تمامًا بأن المصممين ، عندما يتعلمون المزيد عن ألوان LCH ، سيكونون غاضبين من حقيقة أنهم لا يزالون لا يملكون الفرصة لاستخدام هذه الألوان.

ما هي LCH؟

تحتوي وحدة CSS Color 4 ، من بين أمور أخرى ، على تعريف لألوان LCH . اليوم ، بدأت جميع المتصفحات الرئيسية في تنفيذ دعمها ، أو تفكر جديا في هذا الاحتمال:

في دعم Safari يتم تنفيذ LCH بالفعل.
هذه الميزة متوقعة في Chrome .
تمت مناقشة إمكانية تنفيذ هذه الميزة في Firefox .

LCH هي مساحة ألوان لها بعض المزايا على فراغات الألوان RGB / HSL التي اعتاد عليها الجميع للعمل مع CSS. في الواقع ، سأذهب أبعد من ذلك وأطلق على LCH تقنية يمكنها تغيير طريقة عمل الألوان بشكل كبير على الويب. فيما يلي ثلاث حقائق تسمح لي بالإدلاء بهذه التصريحات.

▍1. يمنح LCH ، مقارنةً بـ sRGB ، إمكانية الوصول إلى ألوان أكثر بنسبة 50٪ تقريبًا

هذه خطوة كبيرة إلى الأمام. الآن، وأي لون CSS فإننا يمكن أن يحدد تعريف في إس آر جي بي لون الفضاء . قبل بضع سنوات ، كان هذا أكثر من كافٍ ، لأن جميع الشاشات ، باستثناء الشاشات الاحترافية ، لديها نطاق لوني أقل من sRGB. ومع ذلك ، الآن كل شيء لم يعد كذلك. اليوم ، أصبح النطاق اللوني (أي نطاق الألوان التي يمكن عرضها) لمعظم الشاشات قريبًا من P3 . وحجم مساحة اللون هذه أكبر بنسبة 50٪من مقدار مساحة sRGB. CSS لا تملك حاليًا أي وصول على الإطلاق إلى هذه الألوان. دعني أكرر هذا: ليس لدينا إمكانية الوصول إلى ثلث الألوان التي يمكن أن تعرضها الشاشات الحديثة. ولا يتعلق الأمر ببعض الألوان البسيطة. نحن نتحدث عن الألوان الأكثر حيوية التي يمكن للشاشات عرضها. تبدو مواقعنا باهتة بسبب حقيقة أن أجهزة المراقبة تتطور بشكل أسرع من مواصفات CSS وعمليات تنفيذ المتصفح.

مساحة الألوان sRGB و P3

▍2. LCH (والمختبر) هي فراغات لونية موحدة في الإدراك

عند العمل باستخدام LCH ، يعطي نفس التغيير العددي في فراغ اللون نفس الاختلاف الملحوظ بين الألوان. تسمى خاصية الفضاء اللوني "التوحيد الإدراكي". مسافات الألوان RGB أو HSL ليست موحدة في الإدراك. هنا مثال واضح للغاية لهذه الميزة ( هنا مصدر هذا المثال).

عدم التجانس في إدراك ألوان HSL

تختلف الألوان في الصفوف العلوية والسفلية في درجة اللون بمقدار 20 درجة. هل تعتقد أن الفرق الملحوظ بين هذه الألوان هو نفسه؟

▍3. السطوع في LCH هو مؤشر يعني شيئًا ما

في الفضاء اللوني HSL ، تعد الإضاءة مؤشرًا لا معنى له. قد يكون للألوان نفس الخفة ، ولكنها تختلف اختلافًا كبيرًا في سطوعها المدرك. المثال المفضل هو مقارنة بين الأصفر والأزرق. قد لا تصدقني ، ولكن الألوان الموضحة أدناه لها نفس إضاءة HSL.

ألوان HSL لها

نفس درجة السطوع كلا اللونين يمتلكان إضاءة بنسبة 50٪ ، لكنهما بالتأكيد ليس لديهما نفس السطوع المدرك على الإطلاق. ما معنى مفهوم "الخفة" في HSL؟

هنا يمكنك أن تجادل معي ، قائلة أن الخفة ، على الأقل ، لها بعض المعنى مع درجة اللون الثابتة (الصبغة) والتشبع اللوني. هذا هو - عند تغيير الخفة داخل نفس اللون. والحقيقة: زيادة خفة HSL نحصل على لون أفتح ، ويتناقص - لون أغمق. لكن ما يحدث لن يكون بالضرورة نفس اللون.

ضبط الإضاءة باستخدام درجة اللون الثابتة والتشبع اللوني.

كلا هذين اللونين لهما نفس التدرج ونفس التشبع ، لكن هل يبدوان كإصدار أغمق وأخف من نفس اللون؟

عند استخدام نموذج لون LCH ، يُنظر إلى الألوان التي لها نفس اللمعان على أنها ألوان لها نفس السطوع ، ويتم النظر إلى الألوان التي لها نفس اللون على أنها ألوان من نفس التشبع.

كيف يتم ترتيب ألوان LCH؟

LCH هي اختصار لـ Lightness و Chroma و Hue (الخفة واللون والنبرة). ترتبط مكونات اللون في نموذج الألوان هذا ببعض مكونات نموذج الألوان HSL. ولكن هناك اختلافات خطيرة بين مكونات نماذج الألوان هذه.

لا تتطابق زوايا الملعب في LCH تمامًا مع نغمات HSL. أي - 0 - هذه ليست حمراء بالكامل. هذا اللون أقرب إلى اللون الأرجواني. و 180 ليس لونًا فيروزيًا ، بل هو أزرق مخضر ، وهو مكمل تمامًا.

الألوان بنفس السطوع المدرك

لاحظ أن هذه الألوان ، على الرغم من اختلافها الشديد في النغمة ، تبدو مثل الألوان التي لها نفس السطوع المدرك.

في الفضاء اللوني HSL ، يتم تمثيل التشبع بمجموعة مرتبة من القيم من 0-100. والحقيقة هي أن هذه المساحة هي نتيجة تحول بسيط لـ RGB إلى إحداثيات قطبية. في LCH ، ومع ذلك ، فإن قيمة مكون chroma غير محدودة نظريًا. تم تصميم معيار LCH (مثل المعمل) ليكون قادرًا على تمثيل مجموعة كاملة من الألوان التي يراها البشر. لا يمكن عرض كل هذه الألوان على الشاشة ، حتى تلك التي تدعم مساحة اللون P3. علاوة على ذلك ، نحن لا نتحدث فقط عن الحد الأقصى لعدد الألوان المعروضة ، اعتمادًا على نطاق ألوان الشاشة ، ولكن أيضًا حول اختلاف الألوان.

ربما يكون من الأسهل فهم هذه الفكرة إذا أوضحتها بمثال. من أجل البساطة ، دعنا نتخيل أن لدينا شاشة تتطابق مجموعة ألوانها تمامًا مع مساحة ألوان sRGB. للمقارنة ، يمكن لشاشة MacBook Air لعام 2013 أن تنتج حوالي 60٪ sRGB ، ولكن معظم الشاشات الحديثة يمكنها ، كما سبق ذكره ، عرض 150٪ sRGB. بالنسبة لـ L = 50 و H = 180 (عينة السماوي في الشكل أعلاه) ، فإن الحد الأقصى لقيمة C هو 35 فقط! بالنسبة إلى L = 50 و H = 0 (باللون الوردي) ، يمكن أن تصل قيمة C إلى 77 دون تجاوز sRGB. بالنسبة إلى L = 50 و H = 320 (أرجواني) ، يمكن أن ترتفع قيمة C إلى 108!

على الرغم من أن عدم وجود حدود يمكن اعتباره شيئًا مخيفًا (سواء كان الأمر يتعلق بالأشخاص أو مساحات الألوان) ، فلا يوجد ما يدعو للقلق: إذا تم تعيين لون لا يمكن عرضه على شاشة معينة ، فسيتم تخفيضه إلى لون مماثل مدعوم من الشاشة. في النهاية ، لا يوجد شيء جديد: حتى اكتسبت أجهزة العرض مجموعة ألوان تتجاوز قدرات sRGB ، كان هذا بالضبط ما حدث مع ألوان CSS المعتادة المعروضة على الشاشات التي كانت سلسلة ألوانها أقل من sRGB.

منتقي الألوان LCH

آمل أن تكون الآن مهتمًا قليلاً أيضًا بفكرة استخدام ألوان LCH. هذا يثير السؤال حول كيفية تصور هذه الألوان.

في الواقع ، لقد أنشأت منذ وقت طويل الأداة المقابلة ، LCH Color Picker ، المصممة بشكل أساسي لمساعدتي وزملائي على فهم ميزات LCH بشكل صحيح عند تحرير CSS Color 5 . الأول هو معرفة النظرية ، والآخر هو أن تكون قادرًا على تجربة أشرطة التمرير ورؤية النتيجة بأم عينيك. حتى أنني اشتريت نطاقًا ، css.land ، لنشر الأمثلة ذات الصلة هناك. استخدمنا هذه الأداة قليلاً ، أضفت ميزات جديدة إليها ، لكنني لم أكتب عنها أبدًا. لذلك ، كانت هذه الأداة متاحة لنا فقط ، ولمن يهتمون بهاهذا مستودع جيثب.

وسائل اختيار ألوان LCH

إذا كنت مهتمًا بتجربة ألوان LCH ، فيمكنك استخدام هذه الأداة بشكل جيد للغاية. إليك بعض التفاصيل عنه:

تمت كتابة رمز تحويل اللون من قبل أحد أعضاء فريقنا. نحن واثقون من أن الحسابات ، على الأقل ، تم إجراؤها على أساس الفهم الصحيح لعملية التحويل (أي ، إذا حدث خطأ ما - فهذا خطأ في التعليمات البرمجية ، وليس نتيجة لسوء فهم لشيء ما).
يدعم مكون اللون Chroma تغييرًا في نطاق غير 0 - 100 ، والذي يميز أداتنا عن بعض المجالات الأخرى التي تمكنا من العثور عليها.
يمكن للمستخدمين تحميل ألوان CSS عشوائية فيه (باستخدام الزر استيراد).
تسمح لك أشرطة التمرير بإدخال قيم عدد صحيح فقط ، ولكن في الحقول السوداء التي تظهر أعلى أشرطة التمرير ، يمكنك إدخال أي أرقام.
في هذه العملية ، يمكنك حفظ الألوان ومعرفة كيفية استيفائها.
يتم دعم تحليل الألوان لتحديد ما إذا كان ينتمي إلى مساحة ألوان sRGB أو P3 (أو Rec.2020 ، حتى مساحة ألوان أكثر شمولاً).
إعداد الشفافية المدعوم.
وأخيرًا ، يعد استخدام هذه الأداة أمرًا مثيرًا للاهتمام! خاصة بالنظر إلى أنه يتم تنفيذه على أساس Mavo (على الرغم من استخدام القليل من JavaScript هنا ، أي أنه ليس مشروع Mavo تم إنشاؤه بتنسيق HTML خالص).

في الواقع ، يمكنك تجربة LCH Color Picker هنا .

أسئلة وأجوبة

بعد أن نشرت هذه المقالة ، بدأوا يطرحون عليّ أسئلة. أعتقد أنني يجب أن أوضح هنا بعض المفاهيم الخاطئة الشائعة.

say تقول أن دعم ألوان LCH في المتصفحات لم يتم تنفيذه بعد ، ولكن يمكنني رؤيته في المقالة. كيف يكون هذا ممكنا؟

تقع جميع الألوان المستخدمة في هذه المقالة ضمن نطاق ألوان sRGB. هذا لأنه لا يمكننا ببساطة إخراج الألوان خارج sRGB حتى الآن. sRGB هي مساحة ألوان ، وليست بنية وصف للألوان. على سبيل المثال ، rgb(255 0 0)قاموا lch(54.292% 106.839 40.853)بتعيين نفس اللون.

ow كيف تعرض LCH Color Picker ألوانًا خارج sRGB؟

لا يعرض برنامجي ، LCH Color Picker ، هذه الألوان. وعلى حد علمي ، لا يوجد أي مكان على الإنترنت لبرنامج يمكنه عرض هذه الألوان. يتم تنفيذ مشروع LCH Color Picker باستخدام تقنيات الويب ، مما يعني أن القيود القياسية تنطبق على أي صفحات ويب أخرى. أقوم بتحويل الألوان غير المخرجة إلى sRGB. في البداية ، قمت ببساطة بإحضار مكونات ألوان RGB إلى نطاق 0-100 ٪ ، ولكن بفضل هذا العلاقات العامة ، يستخدم البرنامج الآن خوارزمية أكثر نجاحًا. وبالتحديد ، نتحدث عن تقليل قيمة المكون LCH C حتى يقع اللون ضمن حدود sRGB. هذا هو السبب في أن الزيادة في قيمة المكون C فوق حد معين لا تؤدي إلى استنتاج لون أكثر إشراقًا. والحقيقة هي أنه لا يمكن حتى الآن استنباط مثل هذا اللون باستخدام CSS.

▍ لاحظت أن Firefox يعرض ألوانًا أكثر سطوعًا من Chrome و Safari. هل هناك أي اتصال مع دعم LCH؟

لم يطبق Firefox هذا الجزء من المواصفات الذي يقيد ألوان CSS على إطارات sRGB. بدلاً من ذلك ، يمرر المتصفح ببساطة قيم RGB الأولية إلى الشاشة. على سبيل المثال ، rgb(100% 0% 0%)هذا هو اللون الأحمر الأكثر سطوعًا الذي يمكن أن تعرضه الشاشة. على الرغم من أن هذا قد يبدو كحل ذكي ، إلا أننا هنا نواجه تناقضات. والحقيقة هي أنه باستخدام هذا النهج ، يمكنك تعيين الألوان ، في أفضل الأحوال ، تقريبًا فقط ، نظرًا لأن جميع الشاشات تعرض الألوان بشكل مختلف. من خلال قصر ألوان CSS على مساحة ألوان معروفة (sRGB) ، نحصل على استقلالية الجهاز. إن مساحات اللون LCH و Lab مستقلة أيضًا عن الجهاز ، لأنها تعتمد على اللون المقاس الفعلي.

▍ ما الذي يمكن أن تقوله عن تصميم اللون (display-p3 rgb)؟ يدعمها Safari منذ عام 2017!

تم إعلامي بذلك بعد أن نشرت هذا المقال. لقد عرفت منذ فترة طويلة أن Safari يعمل على هذه الميزة ، ولكن بطريقة ما فاتني اللحظة التي كانت فيها جاهزة. في الواقع ، تم نشر هذا المقال في الشهر الماضي يصف بناء الجملة هذا في WebKit. رائعة حقا

التصميم color(colorspaceid params)هو ميزة موصوفة في CSS Color 4. لها ، في مسألة إدارة الألوان في CSS ، يمكن مقارنتها بسكين سويسري. إن الشيء العظيم في هذا التصميم هو أنه يسمح لك بتحديد ملف تعريف ألوان ICC والألوان المأخوذة منه. على سبيل المثال ، يمكن أن يكون هذا مفيدًا إذا كنت تريد استخدام ألوان CMYK حقيقية أو ألوان Pantone على صفحة ويب. يدعم هذا التصميم أيضًا بعض مساحات الألوان المحددة مسبقًا ، إحداها شاشة العرض p3. على سبيل المثال ، color(display-p3 0 1 0)يمنحنا اللون الأخضر الأخف في مساحة اللون P3. لاختبار الدعم لهذا التصميم ، يمكنك استخدام هذا الاختبار. في حالة عدم وجود دعم color()، سيتم عرض لون أحمر ، وإذا كان متاحًا ، لون أخضر فاتح.

على الرغم من أن هذه ميزة مذهلة (وأحتاج إلى إعادة تشكيل منتقي الألوان LCH الخاص بي بحيث يستخدمه البرنامج color()إذا كان مدعومًا) ، انتبه إلى حقيقة أنه لا يحل سوى أول المشاكل التي ذكرتها. وبالتحديد ، نتحدث عن الوصول إلى جميع الألوان من التدرج اللوني. ولكن ، نظرًا لأن الأداة color()تعتمد على RGB ، فإنها تعاني من جميع العيوب المرتبطة بـ RGB. لا يتميز بإدراك موحد ، بمساعدته ، من خلال ضبط معلمات اللون ، من الصعب إنشاء خيارات الألوان (خيارات أفتح أو أغمق ، أكثر أو أقل سطوعًا ، وما إلى ذلك).

علاوة على ذلك ، ألاحظ أن هذا حل مؤقت. الآن يمكن تطبيقه نظرًا لحقيقة أن الشاشات التي يمكنها عرض الألوان التي لا تتناسب مع P3 نادرة. ولكن بعد تحسن آخر للشاشات ، اتضح أن التصميم color(display-p3 ...)سيواجه نفس المشاكل التي تواجهها ألوان RGB الآن.

إن مساحات الألوان LCH و Lab مستقلة عن الجهاز ، ويمكنهما تمثيل جميع الألوان المرئية للإنسان ، ونتيجة لذلك ستظلان ذات صلة بغض النظر عن تطور الأجهزة.

القراء الأعزاء! هل أنت مهتم باستخدام ألوان LCH في CSS؟

ألوان CSS LCH