دليل ألوان CSS بدقة عالية

يوفر لون CSS 4 أدوات وإمكانات ألوان واسعة النطاق على الويب: المزيد من الألوان ووظائف المعالجة وتدرجات اللون الأفضل.

Adam Argyle

على مدار أكثر من 25 عامًا، كان sRGB (اللون الأزرق الأخضر العادي) هو مجموعة الألوان الوحيدة للتدرجات والألوان في CSS، ويحتوي على مساحات لونية مثل rgb() وhsl() والسداسي عشري. إنها ميزة التدرج اللوني الأكثر شيوعًا بين الشاشات؛ القاسم المشترك. لقد اعتدنا جدًا على تحديد الألوان داخل هذه السلسلة اللونية.

https://almanac.httparchive.org/ar/2022/css#colors

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

إذا لم يتم تحديث CSS مطلقًا، سيظل عالقًا في نطاقات ألوان التسعينيات إلى الأبد، ولن يضطر أبدًا إلى مطابقة عروض السلسلة العريضة في الصور والفيديو. مغطى، ولا يعرض سوى % 30 من الألوان التي يمكن للعين البشرية رؤيتها. شكرا لـ CSS المستوى 4 من الألوان على مساعدتنا في الهروب من هذا الفخ الذي كتبه بشكل أساسي Lea Verou وChris Liley.

وبداية من الإصدار 111 من Chrome، سندعم سلاسل CSS Color 4 ومساحات الألوان، لينضم Safari الذي حصل على دعم display-p3 منذ 2016. يمكن الآن لخدمة مقارنة الأسعار (CSS) إتاحة الشاشات ذات الدقة العالية (HD)، وتحديد الألوان من تسلسلات الألوان العالية الدقة، فضلاً عن توفير مساحات ألوان ذات تخصصات. سيشرح هذا الدليل كيف يمكنك البدء في الاستفادة من عالم الألوان الجديد هذا.

يتم عرض سلسلة من الصور وهي تنتقل بين سلسلات الألوان العريضة والضيقة، لتوضح حيّة الألوان وتأثيراتها.
تجربة الميزة بنفسك

في المتصفحات المتوافقة، هناك ألوان أكثر بنسبة 50% للاختيار من بينها! كنت تعتقد أن 16 مليون لون تبدو كثيرة، وانتظر حتى ترى عدد الألوان التي يمكن أن تظهرها بعض هذه المساحات الجديدة. فكّر أيضًا في كل تلك التدرجات المتباينة نظرًا لعدم وجود عمق بت كافٍ، فقد تم حل ذلك أيضًا.

بالإضافة إلى المزيد من الألوان، التي يمكن القول أنّها الألوان الأكثر وضوحًا التي تستطيع الشاشة استخدامها، توفّر مساحات الألوان الجديدة أدوات وطرق فريدة لإدارة أنظمة الألوان وإنشائها. على سبيل المثال، قبل الآن، أصبح لدينا قناة HSL وقناة "lightness" التابعة لها، والتي كانت من أفضل مطوري الويب. أما الآن في CSS، فلدينا "الإضاءة الحسية" في LCH.

معاينة بنفسك: https://codepen.io/web-dot-dev/pen/poZgXxy

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

أبرز مزيجَي ألوان من النوع sRGB مع ألوان sRGB. يظهر مزيجا الألوان السفليان في الشاشة رقم p3. تكون ألوان الشاشة p3 أكثر وضوحًا في حين تظهر التشكيلات باللونَين الأبيض والأسود في المنتصف، حيث تبدو sRGB غير مشبّعة بعض الشيء بينما لا تظهر التشكيلات في المنتصف نتائج بالأبيض والأسود.
https://codepen.io/web-dot-dev/pen/poZgXQb

سيتناول هذا الدليل أين كان اللون، وأين ينتقل، وكيف ستمكن CSS مطوري الويب وتدعمهم من أجل إدارة الألوان.

نظرة عامة

تكمن مشكلة اللون والويب في أن CSS ليست جاهزة ذات دقة عالية، بينما تكون شاشات العرض التي تكون في جيوبهم أو في لفائفهم أو مثبتة على الجدران ذات مجموعة واسعة من الألوان عالية الدقة وجاهزة. زادت إمكانات الألوان في الشاشات بشكل أسرع من CSS، والآن طوّرت CSS لمواكبة ذلك.

هناك أكثر من مجرد "ألوان أكثر" أيضًا. بنهاية هذه المقالة ستكون قادرًا على تحديد المزيد من الألوان وتحسين التدرجات واختيار أفضل مساحات الألوان ومجموعات الألوان لكل مهمة.

ما هي سلسلة الألوان؟

تمثل السلسلة اللونية حجم شيء ما. عبارة "ملايين الألوان" هي تعليق حول مجموعة ألوان شاشة، أو نطاق الألوان الذي ينبغي الاختيار منه. في الصورة التالية، تتم مقارنة ثلاث سلاسل سلاسل، وكلما زاد الحجم، زاد الألوان التي تقدمها.

يمكن أن يكون لسلسلة الألوان اسم أيضًا. مثل كرة السلة مقابل البيسبول أو فنجان قهوة Vente مقابل كبير؛ يمكن أن يساعد اسم الحجم الأشخاص في التواصل. يساعدك تعلم أسماء سلسلة الألوان هذه على التواصل وفهم مجموعة الألوان بسرعة.

ستقدّم لك هذه المقالة سبع سلاسل جديدة، وجميعها ذات نطاق أوسع من sRGB، كما ستصف ميزاتها المختلفة لمساعدتك في اختيار ما تريد استخدامه:

• sRGB
• نموذج أحمر أخضر أزرق 98
• الشاشة p3
• Rec2020
• ProPhoto
• CIE
• HVS (سلسلة بصرية بشرية)

ملاحظة: ربما تعرف أيًّا من بين هذه الخطوات الإضافية التي يقدّمها الكمبيوتر المحمول أو التلفزيون؟

سلسلة بصرية بشرية

غالبًا ما تتم مقارنة السلاسل اللونية بالسلسلة البصرية البشرية؛ جميع الألوان التي نعتقد أن العين البشرية يمكن أن تراها. غالبًا ما يتم تصوير HVS باستخدام مخطط اللونية، على النحو التالي:

المصدر: Wikipedia

الشكل الخارجي هو ما نراه كبشر، المثلث الداخلي هو نطاق دوال rgb()، المعروف أيضًا بمساحة اللون sRGB.

كما رأيت المثلثات أعلاه، تقارن أحجام السلسلة، إذًا، ستعثر على المثلثات أدناه. هذه هي طريقة الصناعة للتواصل حول سلاسل الألوان ومقارنتها.

ما مساحة اللون؟

مساحات الألوان هي ترتيبات من سلسلة، وتنشئ شكلاً وطريقة للوصول إلى الألوان. والعديد منها هو أشكال ثلاثية الأبعاد بسيطة مثل المكعبات أو الأسطوانات. يحدد ترتيب الألوان هذا الألوان المجاورة لبعضها البعض، وكيف ستعمل الألوان الوصول إليها وإشباعها.

نموذج أحمر أخضر أزرق يشبه مساحة اللون المستطيلة، حيث يتم الوصول إلى الألوان عن طريق تحديد الإحداثيات على 3 محاور. HSL هي مساحة لون أسطوانية، حيث يتم الوصول إلى الألوان وزاوية تدرج اللون والإحداثيات على محورين

https://en.wikipedia.org/wiki/HSL_and_HSV

تقدّم مواصفات المستوى 4 12 مساحة لون جديدة للبحث عن ألوان من 7 سلاسل ألوان جديدة تمت مشاركتها سابقًا:

• نموذج خطي sRGB
• LCH
• okLCH
• المعمل
• okLAB
• الشاشة p3
• Rec2020
• a98 بنموذج أحمر أخضر أزرق
• ProPhotos RGB
• XYZ
• XYZ d50
• XYZ d65

هذه بالإضافة إلى مساحات الألوان الأربعة المتوفرة سابقًا:

• سداسي عشري
• نموذج أحمر أخضر أزرق
• HSL
• HWB

ملخّص سلسلة الألوان ومساحة الألوان

مساحة اللون هي تعيين للألوان حيث تكون سلسلة الألوان عبارة عن مجموعة من الألوان. ضع في الاعتبار سلسلة الألوان كإجمالي من الجزيئات ومساحة اللون كزجاجة مصنوعة للاحتفاظ بهذه الجسيمات.

إليك تصميم مرئي تفاعلي من تصميم أليكسي أردوف يوضّح مساحات الألوان. يمكنك الإشارة إلى هذا العرض التوضيحي وسحبه وتكبيره أو تصغيره. غيِّر مساحة اللون لترى تصورًا للمساحات الأخرى

• استخدِم سلسلة الألوان للتحدث عن مجموعة من الألوان، مثل النطاق المنخفض أو التدرج الضيق مقابل النطاق العالي أو النطاق الواسع.
• استخدِم مساحات الألوان للتحدث عن ترتيبات اللون وبناء الجملة المستخدم لتحديد اللون ومعالجة اللون والدمج من خلال اللون.

تظهر أعلاه سلسلة sRGB من الجزيئات التي تتناسب مع مساحة لون مكعب RGB. مصدر الصورة

كيفية الوصول إلى المزيد من الألوان والمساحات الجديدة ونتائج تصحيح الأخطاء

يوضح CSS اللون 4 مجموعة من الميزات والأدوات الجديدة لـ CSS واللون. أولاً، ملخص لمكان وجود اللون قبل هذه الميزات الجديدة. ثم نظرة عامة على مساحات اللون وبناء الجملة والأدوات الجديدة.

يعرض برنامج Codepen التالي جميع بناءات جملة الألوان الجديدة والقديمة معًا:

مراجعة لمساحات الألوان الكلاسيكية

منذ العقد الأول من القرن الحادي والعشرين، يمكنك استخدام ما يلي لأي من خصائص CSS التي تقبل لونًا كقيمة: النظام السداسي العشري (الأرقام السداسية) أو rgb() أو rgba() أو حسب الاسم مثل hotpink أو مع كلمات رئيسية مثل currentColor. في عام 2010 تقريبًا، وبناءً على المتصفح، كان بإمكان CSS استخدام ألوان hsl(). ثم في عام 2017، ظهر سداسي عشري مع ألفا. أخيرًا، مؤخرًا، بدأ hwb() في الحصول على الدعم في المتصفحات.

تشير كل مساحات الألوان الكلاسيكية هذه إلى اللون ضمن السلسلة ذاتها sRGB.

سداسي عشري

التوافق مع المتصفح

• 1
• 12
• 1
• 1

المصدر

تحدد مسافة اللون السداسية العشرية R وG وB وA بأرقام سداسية عشرية. تُظهر أمثلة التعليمات البرمجية التالية جميع الطرق التي يمكن من خلالها أن تحدد بناء الجملة هذا لمعدل تعتيم زائد الأحمر والأخضر والأزرق.

.valid-css-hex-colors {
  /* classic */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* hex with opacity */
  --4-digits-opaque: #f9bf;
  --8-digits-opaque: #ff99bbff;
  --4-digits-with-opacity: #49b8;
  --8-digits-with-opacity: #4499bb88;
}

نموذج أحمر أخضر أزرق

التوافق مع المتصفح

• 1
• 12
• 1
• 1

المصدر

تتميز مساحة اللون RGB بإمكانية الوصول المباشر إلى القنوات الحمراء والخضراء والزرقاء. يسمح بتحديد مبلغ بين 0 و255 أو كنسبة مئوية من 0 إلى 100. كان بناء الجملة هذا تقريبًا قبل أن تكون بعض تسوية بناء الجملة في المواصفات، لذلك سترى بناء جملة فاصلة وبلا فاصلة في أي مكان. من الآن فصاعدًا، لم تعد الفواصل مطلوبة.

.valid-css-rgb-colors {
  --classic: rgb(64, 149, 191);
  --modern: rgb(64 149 191);
  --percents: rgb(25% 58% 75%);

  --classic-with-opacity-percent: rgba(64, 149, 191, 50%);
  --classic-with-opacity-decimal: rgba(64, 149, 191, .5);

  --modern-with-opacity-percent: rgb(64 149 191 / 50%);
  --modern-with-opacity-decimal: rgb(64 149 191 / .5);

  --percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
  --percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);

  --empty-channels: rgb(none none none);
}

HSL

التوافق مع المتصفح

• 1
• 12
• 1
• 3.1

المصدر

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

.valid-css-hsl-colors {
  --classic: hsl(200deg, 50%, 50%);
  --modern: hsl(200 50% 50%);

  --classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
  --classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);

  --modern-with-opacity-percent: hsl(200 50% 50% / 50%);
  --modern-with-opacity-decimal: hsl(200 50% 50% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hsl(none none 100%);
  --empty-channels-black: hsl(none none 0%);
}

النطاق HWB

التوافق مع المتصفح

• 101
• 101
• 96
• 15

المصدر

مساحة ألوان sRGB أخرى موجهة نحو كيفية وصف البشر للون هي HWB (تدرج اللون والأبيض والأسود). يمكن للمؤلفين اختيار تدرج اللون ومزجه باللون الأبيض أو الأسود للعثور على اللون المطلوب.

.valid-css-hwb-colors {
  --modern: hwb(200deg 25% 25%);
  --modern2: hwb(200 25% 25%);

  --modern-with-opacity-percent: hwb(200 25% 25% / 50%);
  --modern-with-opacity-decimal: hwb(200 25% 25% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hwb(none 100% none);
  --empty-channels-black: hwb(none none 100%);
}

تعرف على مساحات الألوان الجديدة على الويب

تتيح مساحات الألوان التالية الوصول إلى سلاسل أكبر من sRGB. توفّر مساحة ألوان Display-p3 ضعف عدد ألوان نموذج RGB تقريبًا، في حين أن Rec2020 يقدّم ضعف هذا العدد تقريبًا من Display-p3. هذه ألوان كثيرة جدًا.

الدالة color()

التوافق مع المتصفح

• 111
• 111
• 113
• 15

المصدر

يمكن استخدام دالة color() الجديدة لأي مساحة لون تحدد الألوان مع قنوات R وG وB. تأخذ color() معلَمة مساحة اللون أولاً، ثم سلسلة من قيم القنوات لنموذج أحمر أخضر أزرق (RGB) وبعض قيم ألفا اختياريًا.

ستجد أن العديد من مساحات الألوان الجديدة تستخدم هذه الدالة لأنّ استخدام دوالّ خاصة مثل rgb وsrgb وhsl وhwb وغيرها، أصبح في قائمة طويلة، وكان من الأسهل استخدام colorspace كمَعلمة.

الإيجابيات

• مساحة تمت تسويتها للوصول إلى مساحات الألوان التي تستخدم قنوات نموذج أحمر أخضر أزرق.
• يمكن توسيعه ليتناسب مع أي مساحة ألوان واسعة تستند إلى نموذج أحمر أخضر أزرق (RGB).

السلبيات

• لا يعمل هذا الخيار مع أجهزة HSL أو HWB أو LCH أو okLCH أو okLAB.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

ملاحظة: يمكن أن تكون الألوان ضمن sRGB Gamut أو Display P3 Gamut أو Rec2020 Gamut، بما يصل إلى 77.6% من الطيف المرئي.

sRGB عبر color()

تقدّم مساحة اللون هذه الميزات نفسها المتوفّرة في rgb(). كما أنه يقدم أيضًا أرقامًا عشرية بين 0 و1، وتستخدم تمامًا مثل 0٪ إلى 100٪.

الإيجابيات

• تدعم كل الشاشات تقريبًا نطاق مساحة اللون هذه.
• دعم أداة التصميم.

السلبيات

• غير خطي بشكل ملحوظ (مثل lch())
• لا توجد ألوان متسلسلة واسعة.
• تمر التدرجات في كثير من الأحيان بمنطقة مسدودة.

.valid-css-srgb-colors {
  --percents: color(srgb 34% 58% 73%);
  --decimals: color(srgb .34 .58 .73);

  --percents-with-opacity: color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb none none none);
  --empty-channels-black2: color(srgb);
}

sRGB خطي عبر color()

يتيح هذا البديل الخطي للنموذج أحمر أخضر أزرق كثافة قناة يمكن التنبؤ بها.

الإيجابيات

• يتيح لك هذا الخيار الوصول مباشرةً إلى القنوات ذات النموذج اللوني أحمر أخضر أزرق، مثل محركات الألعاب أو العروض الضوئية.

السلبيات

• ليس خطيًا بشكل ملموس.
• الأبيض والأسود معبّأ عند الحواف.

.valid-css-srgb-linear-colors {
  --percents: color(srgb-linear 34% 58% 73%);
  --decimals: color(srgb-linear .34 .58 .73);

  --percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb-linear none none none);
  --empty-channels-black2: color(srgb-linear);
}

تتم مناقشة التدرج بالتفصيل لاحقًا، ولكن سرعان ما يكون من المفيد رؤية تدرج srgb وlinear-srgb من الأسود إلى الأبيض لتوضيح الاختلافات:

مؤشر LCH

التوافق مع المتصفح

• 111
• 111
• 113
• 15

المصدر

المساحة الأولى من هذه المشاركة لتقديم بناء الجملة للوصول إلى الألوان خارج السلسلة RGB! كما أنها الطريقة الأولى التي تسهِّل إنشاء المحتوى من مجموعة ألوان للشاشة. وذلك لأنّ أي ألوان مساحات في CIE (مثل lch أو oklch أو Lab أو OKlab) تكون قادرة على تمثيل طيف الألوان المرئي الكامل للإنسان.

تم تصميم مساحة اللون هذه استنادًا إلى الرؤية البشرية وهي تقدّم بنية لتحديد أي من هذه الألوان والمزيد. قنوات LCH هي الإضاءة والكروما وتدرج اللون. تدرج اللون: زاوية، كما هو الحال في HSL وHWB. تتراوح قيمة الإضاءة بين 0 و100، ولكنها ليست مثل سطوع HSL، فهي عبارة عن إضاءة خاصة "خطية" تركّز على الإنسان. يشبه تشبع اللون تشبع اللون؛ يمكن أن يتراوح من 0 إلى 230 ولكنه غير محدود تقنيًا أيضًا.

الإيجابيات

• إمكانية معالجة الألوان بشكل يمكن توقّعه، وذلك بفضل كونها خطية بشكلٍ واضح، وذلك في الغالب (راجِع oklch)
• يستخدم قنوات مألوفة
• غالبًا ما يحتوي على تدرّجات نابضة بالحياة.

السلبيات

• الخروج عن المألوف بسهولة.
• في حالات نادرة، قد يحتاج التدرج إلى نقطة منتصف تسوية لمنع تغيُّر تدرُّج اللون.

.valid-css-lch-colors {
  --percent-and-degrees: lch(58% 32 241deg);
  --just-the-degrees: lch(58 32 241deg);
  --minimal: lch(58 32 241);

  --percent-opacity: lch(58% 32 241 / 50%);
  --decimal-opacity: lch(58% 32 241 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lch(100 none none);
  --empty-channels-black: lch(none none none);
}

تحذير: قد تشكّل أداة Chroma الحلّ مشكلة لدى المؤلفين، فهي تتيح للمؤلفين تجاوز نطاق الألوان في الشاشة بسهولة. يُرجى توخّي الحذر عند استخدام قيم C العالية الكروما.

مختبر

التوافق مع المتصفح

• 111
• 111
• 113
• 15

المصدر

مساحة لونية أخرى تم إنشاؤها للوصول إلى سلسلة CIE، مجددًا مع بُعد الإضاءة الخطي (L). يمثل الحرفان A وB في التمرين المعملي المحورين الفريدين لرؤية الألوان البشرية: الأحمر والأخضر والأزرق والأصفر. عندما يتم إعطاء A قيمة موجبة، فإنها تضيف اللون الأحمر، وتضيف اللون الأخضر عندما تكون أقل من 0. عندما يتم إعطاء B رقمًا موجبًا، تتم إضافة اللون الأصفر، حيث تكون القيم السالبة باتجاه الأزرق.

الإيجابيات

• هي تدرّجات متسقة بديهية.
• النطاق الديناميكي العالي

السلبيات

• احتمالية تغيير تدرُّج اللون
• يصعب الكتابة باليد أو تخمين اللون عند قراءة القيم.

.valid-css-lab-colors {
  --percent-and-degrees: lab(58% -16 -30);
  --minimal: lab(58 -16 -30);

  --percent-opacity: lab(58% -16 -30 / 50%);
  --decimal-opacity: lab(58% -16 -30 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lab(100 none none);
  --empty-channels-black: lab(none none none);
}

OKLCH

التوافق مع المتصفح

• 111
• 111
• 113
• 15.4

المصدر

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

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

الإيجابيات

• ليس هناك مفاجآت عند العمل بدرجات اللون الأزرق والأرجواني.
• توقعًا إضاءة خطية.
• يستخدم قنوات مألوفة
• النطاق الديناميكي العالي
• تتوفّر أداة اختيار ألوان حديثة - من تصميم Evil Martians.

السلبيات

• الخروج عن المألوف بسهولة.
• جديدة وغير مستكشَفة نسبيًا.
• عدد قليل من أدوات اختيار الألوان

.valid-css-oklch-colors {
  --percent-and-degrees: oklch(64% .1 233deg);
  --just-the-degrees: oklch(64 .1 233deg);
  --minimal: oklch(64 .1 233);

  --percent-opacity: oklch(64% .1 233 / 50%);
  --decimal-opacity: oklch(64% .1 233 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklch(100 none none);
  --empty-channels-black: oklch(none none none);
}

أوكلاب

التوافق مع المتصفح

• 111
• 111
• 113
• 15.4

المصدر

هذه المسافة تصحيحية بالنسبة إلى التمرين المعملي. ويزعم أنه مساحة محسّنة لجودة معالجة الصور أيضًا، وهو ما يعني بالنسبة إلينا في CSS ما يعني جودة معالجة التدرجات ووظائف الألوان.

الإيجابيات

• المساحة التلقائية للصور المتحركة وعمليات الاستيفاء.
• توقعًا إضاءة خطية.
• لا تتغير تدرّجات اللون مثل المعمل.
• هي تدرّجات متسقة بديهية.

السلبيات

• جديدة وغير مستكشَفة نسبيًا.
• عدد قليل من أدوات اختيار الألوان

.valid-css-oklab-colors {
  --percent-and-degrees: oklab(64% -.1 -.1);
  --minimal: oklab(64 -.1 -.1);

  --percent-opacity: oklab(64% -.1 -.1 / 50%);
  --decimal-opacity: oklab(64% -.1 -.1 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklab(100 none none);
  --empty-channels-black: oklab(none none none);
}

الشاشة P3

التوافق مع المتصفح

• 111
• 111
• 113
• 15

المصدر

ملاحظة: الألوان ضمن Display P3 Gamut، أي 45.5% من الطيف المرئي.

أصبحت سلسلة العرض P3 ومساحة اللون شائعة منذ دعمها من Apple منذ عام 2015 على iMac الخاص بها. علاوةً على ذلك، وفّرت Apple أيضًا تقنية العرض p3 في صفحات الويب عبر CSS منذ عام 2016، أي قبل خمسة أعوام من أي متصفح آخر. إذا كنت تأتي من sRGB، فهذه مساحة ألوان رائعة لبدء العمل داخلها أثناء نقل الأنماط إلى نطاق ديناميكي أعلى.

الإيجابيات

• توافق رائع، حيث يُعد المرجع الأساسي لشاشات النطاق عالي الديناميكية (HDR).
• ألوانًا أكثر بنسبة 50% من sRGB.
• تقدّم أدوات مطوّري البرامج أداة اختيار ألوان رائعة.

السلبيات

• سيتم تجاوزها في النهاية من خلال مساحات Rec2020 وCIE.

.valid-css-display-p3-colors {
  --percents: color(display-p3 34% 58% 73%);
  --decimals: color(display-p3 .34 .58 .73);

  --percent-opacity: color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity: color(display-p3 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(display-p3 none none none);
  --empty-channels-black2: color(display-p3);
}

Rec2020

التوافق مع المتصفح

• 111
• 111
• 113
• 15

المصدر

ملاحظة: الألوان ضمن Rec2020 Gamut، أي% 77.6 من الطيف المرئي.

يشكّل التسجيل Rec2020 جزءًا من عملية الانتقال إلى التلفزيون UHD TV (فائق الدقة)، وهو يوفّر مجموعة كبيرة من الألوان لاستخدامها في الوسائط بدقة 4K و8K. أمّا Rec2020 فهو سلسلة أخرى مستندة إلى نموذج أحمر أخضر أزرق (RGB)، وهي أكبر حجمًا من شاشات Display-p3، ولكنّها ليست شائعة بين المستهلكين مثل أجهزة Display P3.

الإيجابيات

• ألوان فائقة الدقة.

السلبيات

• ليس شائعًا بين المستهلكين (حتى الآن).
• لا توجد هذه الحالة بشكل شائع في الأجهزة المحمولة باليد أو الأجهزة اللوحية.

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

A98 نموذج أحمر أخضر أزرق

التوافق مع المتصفح

• 111
• 111
• 113
• 15

المصدر

ملاحظة: الألوان ضمن RGB 98 Gamut، أي 52.1% من الطيف المرئي.

وهو اختصار لـ Adobe 1998 RGB، وقد تم إنشاء A98 RGB بواسطة Adobe لعرض معظم الألوان القابلة للتحقيق من طابعات CMYK. وهو يوفر ألوانًا أكثر من sRGB، لا سيما في درجات اللون السماوي والأخضر.

الإيجابيات

• أكبر من مساحات الألوان sRGB وDisplay P3

السلبيات

• ليست مساحة مشتركة يعمل فيها المصممون الرقميون.
• ليس هناك الكثير من الأشخاص الذين يستخدمون لوحات الألوان من CMYK.

.valid-css-a98-rgb-colors {
  --percents: color(a98-rgb 34% 58% 73%);
  --decimals: color(a98-rgb .34 .58 .73);

  --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(a98-rgb none none none);
  --empty-channels-black2: color(a98-rgb);
}

Pro Photo بنموذج أحمر أخضر أزرق

التوافق مع المتصفح

• 111
• 111
• 113
• 15

المصدر

ملاحظة: الألوان ضمن ProPhoto Gamut، أي 90% من الطيف المرئي.

توفّر هذه المساحة الواسعة التي تم إنشاؤها بواسطة Kodak ألوانًا أساسية واسعة النطاق جدًا مع تغيرات درجات اللون بأقل قدر ممكن عند تغيير درجة الإضاءة. ويدّعي أيضًا أنّها تغطّي 100% من ألوان الأسطح في العالم، كما وثّقها "مايكل بوينتر" في عام 1980.

الإيجابيات

• الحد الأدنى من التغييرات في تدرُّج الألوان عند تغيير الإضاءة
• ألوان أساسية نابضة بالحياة.

السلبيات

• وحوالي% 13 من ألوانها خيالية، ما يعني أنّها ليست ضمن الطيف المرئي البشري.

.valid-css-prophoto-rgb-colors {
  --percents: color(prophoto-rgb 34% 58% 73%);
  --decimals: color(prophoto-rgb .34 .58 .73);

  --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(prophoto-rgb none none none);
  --empty-channels-black2: color(prophoto-rgb);
}

XYZ وXYZ-d50 وXYZ-d65

التوافق مع المتصفح

• 111
• 111
• 113
• 15

المصدر

ملاحظة: الألوان ضمن HVS Gamut، أي% 100 من الطيف المرئي للإنسان (HVS).

مساحة ألوان CIE XYZ تشمل جميع الألوان المرئية لشخص لديه متوسط بصر. هذا هو سبب استخدامه كمرجع قياسي لفراغات اللون الأخرى. يرمز الحرفان ص إلى الشعاع، بينما يمثل كل من X وZ صفين محتملتين ضمن قوة الضوء ص المحددة.

الفرق بين d50 وd65 هو النقطة البيضاء، حيث يستخدم d50 النقاط البيضاء d50 وd65 النقطة البيضاء d65.

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

الإيجابيات

• توفّر ميزة الوصول إلى الضوء الخطي حالات استخدام سهلة.
• رائعة لمزج الألوان المادية.

السلبيات

• ليس خطيًا بشكل نظري مثل lch وoklch وlab وoklab.

.valid-css-xyz-colors {
  --percents: color(xyz 22% 26% 53%);
  --decimals: color(xyz .22 .26 .53);

  --percent-opacity: color(xyz .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz none none none);
  --empty-channels-black2: color(xyz);
}

.valid-css-xyz-d50-colors {
  --percents: color(xyz-d50 22% 26% 53%);
  --decimals: color(xyz-d50 .22 .26 .53);

  --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d50 none none none);
  --empty-channels-black2: color(xyz-d50);
}

.valid-css-xyz-d65-colors {
  --percents: color(xyz-d65 22% 26% 53%);
  --decimals: color(xyz-d65 .22 .26 .53);

  --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d65 none none none);
  --empty-channels-black2: color(xyz-d65);
}

مساحات الألوان المخصّصة

تحتوي مواصفات CSS Color 5 أيضًا على مسار لضبط مساحة لون مخصصة للمتصفح. إنّه ملف ICC الشخصي الذي يحدّد للمتصفح كيفية تعديل الألوان.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

بعد التحميل، يمكنك الوصول إلى الألوان من هذا الملف الشخصي المخصّص باستخدام الدالة color() وتحديد قيم القناة لها.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

استيفاء الألوان

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

باستخدام التدرج، يكون الاستيفاء سلسلة من الألوان على طول الشكل. مع الرسوم المتحركة، تعد سلسلة من الألوان بمرور الوقت.

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

.

باستخدام التدرج، يتم عرض الألوان الوسيطة كلها مرة واحدة:

الميزات الجديدة في دمج الألوان

مع إضافة سلاسل ألوان جديدة ومساحات لونية، هناك خيارات إضافية جديدة للاستيفاء. يؤدي تحويل اللون in hsl من الأزرق إلى الأبيض إلى شيء مختلف تمامًا عن sRGB.

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

ألا يظهر لك العرض التوضيحي لتطبيق Codepen؟

بعد ذلك ماذا يحدث إذا انتقلت من لون في مساحة واحدة إلى لون في مساحة مختلفة تمامًا:

.gradient {
  /* oklab will be the common space */
  background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}

.lch {
  /* lch is specified */
  background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}

ألا يظهر لك العرض التوضيحي لتطبيق Codepen؟

لحسن حظك، تحتوي مواصفات اللون 4 على إرشادات للمتصفحات حول كيفية التعامل مع هذه استكمالات المسافات بين الألوان. في حالة .gradient أعلاه، ستلاحظ المتصفّحات مساحات الألوان المختلفة وستستخدم مساحة اللون التلقائية oklab. قد تعتقد أنّ المتصفح قد يستخدم lch كمساحة اللون، لأنّ هذا هو اللون الأول، لكنه لا يستخدم هذا اللون، ولذلك أعرض تدرجًا ثانيًا للمقارنة .lch. التدرج .lch هو تدرج من مساحة اللون lch.

تقليل التباين بفضل ألوان 16 بت

قبل أن يعمل هذا اللون، كان يتم حفظ جميع الألوان في عدد صحيح واحد 32 بت لتمثيل القنوات الأربع، وهي الأحمر والأخضر والأزرق وألفا. هذا هو 8 بت لكل قناة و2^ 24 لونًا محتملاً (مع تجاهل ألفا). 2 ^ 24 = 16,777,216، "ملايين الألوان".

بعد عمل اللون هذا، أي أربع قيم للنقاط العائمة 16 بت، يكون لكل قناة عدد عائم خاص بها بدلاً من تجميعها معًا. هذا هو إجمالي 64 بت من البيانات، مما يؤدي إلى أكثر من ملايين الألوان.

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

يحدث التباين المتدرج عندما لا يكون هناك ألوان كافية لإنشاء تدرج متجانس وتصبح "أشرطة" الألوان مرئية. تم التخفيف من التباين بشكل كبير مع الترقية إلى ألوان أعلى دقة.

مصدر الصورة

التحكم في الاستيفاء

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

linear-gradient(to right, #94e99c, #e06242)

(عرض وهمي)
عرض من الأعلى إلى الأسفل لأسطوانة HSL مع خط بين نقطتين

يسير خط التدرج أعلاه مباشرة بين اللون الأخضر إلى اللون الأحمر، ويمر عبر مركز مساحة اللون. في حين أن ما سبق رائع للمساعدة في الفهم الأولي، إلا أن الأمر ليس بالضبط ما يحدث. هذا هو التدرج في Codepen التالي، ومن الواضح أنه ليس أبيض في المنتصف كما أوضح العرض التوضيحي.

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

تحديد المزيد من نقاط تدرّج التدرج لتجنب المنطقة الثابتة

وهناك أسلوب لتجنب المنطقة الثابتة اليوم وهو إضافة نقاط توقف لونية إضافية في التدرج التي توجه الاستيفاء عمدًا للبقاء ضمن النطاقات النابضة بالحياة لمساحة اللون. إنه عمل حرفي، حيث تساعد المحطات الإضافية في العمل حول المنطقة الميتة.

ابتكر إريك كينيدي أداة تدرّج تحتسب لك نقاط توقّف إضافية للألوان، ما يساعدك في تجنّب المنطقة الثابتة حتى في مساحات الألوان التي تجذب اهتمامك بها. باستخدامه، وتمرير نفس الألوان من المثال الأول ولكن تغيير إقحام اللون إلى HSL، ينتج ما يلي:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

(عرض وهمي)
عرض من الأعلى للأسفل لأسطوانة HSL بخط منحنٍ 9 نقاط لونية

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

على الرغم من أنّ الأداة تؤدي أداءً رائعًا، ماذا لو كان لديك تحكّم مماثل أو أعلى مباشرةً من CSS؟

توجيه دمج الألوان

في اللون 4، تمت إضافة القدرة على التحكم في استراتيجية استيفاء درجة اللون وهي طريقة جديدة للتغلب على (:غمز:) في المنطقة الخالية. فكر في زاوية تدرج لوني وفكر في تدرج ذي نقطتين يغير فقط الزاوية، ويتحوّل تدرج اللون من 140deg إلى 240deg على سبيل المثال.

استقراء تدرج لوني أقصر مقابل أطول

وسيتخذ التدرج تلقائيًا المسار shorter الذي يمكن أن يسلكه إلا إذا حددت له أن يأخذ مسار longer. توجه خيارات الاستيفاء لتدرج اللون تدوير الزاوية، مثل توجيه شخص ما بالتوجه إلى اليسار بدلاً من اليمين (هه، Zoolander):

في المثال المرئي أعلاه لمسافات استكمال تدرج اللون، تتم محاكاة المسار القصير والمسار الطويل لتوضيح الفرق. تحتوي المسافة القصيرة على تدرجات لونية أقل بينها لأنها تنتقل عبر أقل قدر ممكن من المسافة، حيث تنتقل المسافة الطويلة عبر تدرجات لونية أكثر.

زيادة مقابل استقراء تدرج اللون مقابل تقليله

هناك استراتيجيتان إضافيتان لدمج تدرج اللون في اللون 4، لكنها حصرية لمساحات الألوان الأسطوانية. بالبقاء على اللونين من الأمثلة السابقة، يوضح الصورة المرئية الآن كيفية عمل الزيادة والانخفاض.

استخدم برنامج Codepen أعلاه ColorJS لتوضيح النتيجة المتوقعة. لغة CSS التي ستكتبها لتحقيق نفس التأثير بدون مكتبة JavaScript ستكون:

.longer-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

.decreasing-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

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

التدرجات في مساحات الألوان المختلفة

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

ألا يظهر لك العرض التوضيحي لتطبيق Codepen؟

الصورة المعروضة هي فقط مثال واحد من بين عدة أمثلة من خلال Codepen. الأمر يستحق تجربة Canary أو Safari Tech Preview لمشاهدته بنفسك.

ستكون بعض التدرجات في هذه المساحات أكثر حيوية من غيرها أو تنتقل إليها بمعدّل أقل عبر المناطق القاسية. تجمع المساحات مثل lab الألوان معًا بطريقة محسَّنة لزيادة تشبُّع اللون، على عكس المساحات المحسّنة للبشر لكتابة الألوان مثل hwb().

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

.

على الرغم من أن العرض التوضيحي أعلاه خفيف في النتائج، إلا أنه يُظهر توافقًا أكثر تناسقًا مع التمرين المعملي. على الرغم من ذلك، ليس من السهل قراءة بناء جملة التمرين المعملي، فهناك أرقام سلبية غير مألوفة على الإطلاق عندما تأتي من نموذج أحمر أخضر أزرق أو hsl. والخبر السار هو أنه يمكننا استخدام hwb لبناء جملة مألوف، ولكننا نطلب إضافة التدرج بالكامل في مساحة لون أخرى، مثل oklab.

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

ألا يظهر لك العرض التوضيحي لتطبيق Codepen؟

يستخدم هذا المثال نفس الألوان في hwb ولكنه يحدد مساحة اللون للاستيفاء إلى hwb أو oklab. تمثّل hwb مساحة لونية رائعة لتوفير نابضة بالحياة، ولكن قد تكون مناطق ميتة أو مناطق مشرقة (انظر النقطة الساخنة للأزرق السماوي في المثال أعلاه). ويُعدّ oklab مفيدًا للتدرجات الخطية التي تبدو مشبّعة. هذه الميزة ممتعة جدًا، حيث يمكنك تجربة عدة مساحات ألوان مختلفة لمعرفة التدرج الذي تفضله.

إليك في ما يلي برنامج Codepen يجرب التدرجات ومساحات الألوان، واستراتيجيات المزج والمطابقة لاستكشاف الاحتمالات. حتى الانتقال من الأسود إلى الأبيض يختلف في كل مساحة لون!

ألا يظهر لك العرض التوضيحي لتطبيق Codepen؟

تثبيت السلسلة

هناك سيناريوهات قد يطلب فيها اللون شيئًا خارج السلسلة. ضع في الاعتبار اللون التالي:

rgb(300 255 255)

الحد الأقصى لقناة الألوان في مساحة اللون rgb هو 255، ولكن تم تحديد 300 هنا باللون الأحمر. الإجراء تثبيت السلسلة.

التثبيت هو مجرد إزالة المعلومات الإضافية. سيصبح 300 255 داخليًا في محرك الألوان. تم الآن تثبيت اللون داخل مساحته.

اختيار مساحة اللون

يشعر الكثير من الأشخاص، بعد التعرف على مساحات الألوان هذه وتأثيراتها، بالإرباك ويريدون معرفة أي "واحد" يجب اختياره. من دراساتي وخبرتي، لا أرى مساحة لون واحدة كمساحة واحدة لجميع مهامي. ولكل منها لحظات تقدم فيها النتيجة المرجوة.

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

ويمكنني القول إنّ مساحات CIE، lab وoklab وlch وoklch، هي نقطة البداية. إذا لم تكن نتيجةها هي ما أبحث عنه، فسأختبر المساحات الأخرى. أوافق على خيار المواصفات التلقائي oklab لمزج الألوان وإنشاء التدرجات. بالنسبة إلى أنظمة الألوان وألوان واجهة المستخدم العامة، أفضل oklch.

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

1. OKLCH في CSS: سبب انتقالنا من RGB وHSL بواسطة أندري سيتنيك
2. Color Formats من تأليف Josh W. الكوميديا
3. OK, OKLCH من تأليف كريس كويير

نقل البيانات إلى لون CSS عالي الدقة

هناك استراتيجيتان رئيسيتان لتحديث لون مشروع الويب لدعم الشاشات الكبيرة النطاقة:

1. التقليص السلس
   استخدِم مساحات الألوان الجديدة واسمح للمتصفح ونظام التشغيل بتحديد اللون الذي سيتم عرضه استنادًا إلى إمكانيات العرض.

2. التحسين التدريجي
   استخدِم @supports و@media لتقييم إمكانات متصفّح المستخدم، وتوفير ألوان سلسلة واسعة في حال استيفاء الشروط.

إذا لم يفهم المتصفّح لون display-p3:

color: red;
color: color(display-p3 1 0 0);

في حال كان المتصفّح لا يتعرّف على اللون display-p3:

color: red;
color: color(display-p3 1 0 0);

وهناك مزايا وعيوب لكل طريقة. فيما يلي قائمة سريعة بالإيجابيات والسلبيات:

التقليص السلس

• الإيجابيات
  • أبسط الطرق.
  • سيعمل المتصفح على ربط المتصفّح بـ sRGB أو الربط به إذا لم يكن شاشة عريضة، وبالتالي تقع المسؤولية على المتصفح.
• السلبيات
  • قد يدمج المتصفح أو خريطة التدرج اللوني مع لون لا تحبه.
  • قد لا يفهم المتصفّح طلب اللون وقد يفشل تمامًا. ومع ذلك، يمكن التخفيف من ذلك من خلال تحديد اللون مرتين، مما يسمح للشلال بالرجوع إلى اللون السابق الذي يفهمه.

التحسين التدريجي

• الإيجابيات
  • المزيد من التحكّم من خلال دقة الألوان المُدارة
  • استراتيجية مضافة لا تؤثر على الألوان الحالية.
• السلبيات
  • تحتاج إلى إدارة بناءتي جملة لونية منفصلتين.
  • تحتاج إلى إدارة سلسلتَي ألوان منفصلتين.

جارٍ التحقّق من توفير السلسلة اللونية ومساحة الألوان

يتيح المتصفح التحقق من التوافق مع إمكانات السلسلة الواسعة النطاق واعتماد بنية الألوان من CSS وJavaScript. لا يتوفر سلسلة الألوان الدقيقة التي لدى المستخدم، ويتم توفير إجابة معممة حتى يتم الحفاظ على خصوصية المستخدم. مع ذلك، يتوفر دعم مساحة اللون الدقيق، لأنّه لا يعتمد على إمكانات أجهزة المستخدم مثل gamut.

طلبات البحث عن دعم سلسلة الألوان

تتحقق أمثلة التعليمات البرمجية التالية من نطاق ألوان المستخدم الزائر في العرض.

جارٍ التحقّق من خدمة مقارنة الأسعار (CSS)

إنّ الاستفسار الأقل تحديدًا عن فريق الدعم هو الاستعلام عن الوسائط dynamic-range:

التوافق مع المتصفح

• 98
• 98
• 100
• 13.1

المصدر

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

يمكن الاستعلام عن الدعم التقريبي أو أكثر باستخدام طلب الوسائط color-gamut:

التوافق مع المتصفح

• 58
• 79
• 110
• 10

المصدر

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

هناك طلبان إضافيان عن الوسائط للتحقّق من الدعم:

1. @media (color)
2. @media (color-index)

التحقّق من JavaScript

بالنسبة إلى JavaScript، يمكن استدعاء دالة window.matchMedia() وتمرير استعلام عن الوسائط للتقييم.

التوافق مع المتصفح

• 9
• 12
• 6
• 5.1

المصدر

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

يمكن نسخ النمط أعلاه لبقية الاستعلامات عن الوسائط.

طلبات البحث عن دعم مساحة الألوان

تتحقق أمثلة التعليمات البرمجية التالية من متصفح المستخدم الزائر ومن اختياره لمساحات الألوان للعمل معها.

جارٍ التحقّق من خدمة مقارنة الأسعار (CSS)

يمكن طلب دعم مساحة اللون الفردية باستخدام طلب بحث @supports:

التوافق مع المتصفح

• 28
• 12
• 22
• 9

المصدر

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

التحقّق من JavaScript

بالنسبة إلى JavaScript، يمكن استدعاء دالة CSS.supports() وتمرير زوج خاص منها وقيمة لمعرفة ما إذا كان المتصفّح يفهمها.

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

وضع الأجهزة وتحليل عمليات التحقق معًا

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

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

تصحيح أخطاء الألوان باستخدام "أدوات مطوري البرامج في Chrome"

تم تحديث "أدوات مطوري البرامج في Chrome" وتزويدنا بأدوات جديدة لمساعدة المطوّرين على إنشاء لون عالي الدقة وتحويله وتصحيح الأخطاء فيه.

تم تعديل علبة الألوان.

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

حدود السلسلة

وتمت أيضًا إضافة خط حدود السلسلة، لرسم خط بين سلسلتَي srgb وdisplay-p3. من خلال توضيح السلسلة اللونية المحددة داخله.

يساعد هذا المؤلفين على التفريق بصريًا بين الألوان عالية الدقة والألوان غير العالية الدقة. وهذه الميزة مفيدة بشكل خاص عند العمل مع دالة color() ومساحات الألوان الجديدة لأنّها قادرة على إنتاج ألوان غير عالية الدقة وألوان عالية الدقة. إذا كنت تريد التحقق من السلسلة اللونية التي توجد فيها، فافتح منتقي الألوان وانظر!

تحويل الألوان

استطاعت "أدوات مطوري البرامج" لسنوات عديدة تحويل الألوان بين التنسيقات المتوافقة مثل hsl وhwb وRGB والسداسي عشري. shift + click على عينة ألوان مربعة في جزء "الأنماط" لإجراء هذه الإحالة الناجحة. لا يقتصر دور أدوات الألوان الجديدة على التنقّل بين الإحالات الناجحة، بل تؤدي إلى عرض نافذة منبثقة تتيح للمؤلفين الاطّلاع على الإحالة الناجحة التي يريدونها واختيارها.

عند إتمام الإحالة الناجحة، من المهم معرفة ما إذا تم اقتصاصها بما يتناسب مع المساحة. تحتوي "أدوات مطوري البرامج" الآن على رمز تحذيري للون المحوّل الذي ينبهك إلى هذا الاقتصاص.

يمكنك استكشاف المزيد من ميزة تصحيح أخطاء CSS في "أدوات مطوري البرامج" في الإعلان الأخير.

الخلاصة

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

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

موادّ إضافية للقراءة

• https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
• https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
• https://darker.ink/writings/Towards-richer-colors-on-the-Web
• https://bottosson.github.io/posts/colorpicker/
• https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
• https://atmos.style/blog/lch-color-space
• https://stripe.com/blog/accessible-color-systems
• https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
• https://afc163.github.io/color3d/
• https://github.com/nschloe/colorio#gamut-visualization
• https://www.learnui.design/tools/gradient-generator.html
• https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
• https://www.w3.org/TR/css-color-4/
• https://www.w3.org/TR/css-color-5/
• https://en.wikipedia.org/wiki/CIE_1931_color_space
• https://www.joshwcomeau.com/css/color-formats/
• https://ciechanow.ski/color-spaces/

مقالات إضافية من المستوى 5 للألوان

• بنية اللون النسبية في CSS
• مزيج الألوان في CSS