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

هذا المستند هو جزء من دليل ألوان CSS عالي الدقة.

يوضح CSS اللون 4 مجموعة من الميزات والأدوات الجديدة لـ CSS واللون. يُظهر برنامج Codepen التالي جميع بناءات الألوان الجديدة والقديمة معًا:

اطّلِع على ملخّص مساحات الألوان الكلاسيكية.

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

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

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

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

الدالة color()

يمكن استخدام دالة 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 عبر 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() {#writing-srgb}

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

الإيجابيات

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

السلبيات

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

.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

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

تم تصميم مساحة اللون هذه استنادًا إلى الرؤية البشرية وهي تقدّم بنية لتحديد أي من هذه الألوان والمزيد. قنوات LCH هي الإضاءة والكروما وتدرج اللون. تدرج اللون: زاوية، كما هو الحال في HSL وHWB. تكون قيمة الضوء بين 0 و100. إنه أمر خاص "خطي بشكل نظري" يتمحور حول الإنسان. يشبه تشبع اللون التشبع، ويمكن أن يتراوح من 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);
}

مختبر

مساحة لونية أخرى تم إنشاؤها للوصول إلى سلسلة 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

تعد مساحة اللون هذه تصحيحية ل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);
}

أوكلاب

هذه المسافة تصحيحية بالنسبة إلى التمرين المعملي. ويزعم أنه مساحة محسّنة لجودة معالجة الصور أيضًا، وهو ما يعني بالنسبة إلينا في 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

أصبحت سلسلة العرض 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

يشكّل التسجيل 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 RGB {#a98-rgb}

وهو اختصار لـ 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 بنموذج أحمر أخضر أزرق

توفّر هذه المساحة الواسعة التي تم إنشاؤها بواسطة 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

مساحة ألوان 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);
}

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

.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%));
}

لحسن حظك، تحتوي مواصفات اللون 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)

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

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

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

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

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

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

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

تؤدي الأداة عملاً رائعًا، فماذا لو كان من الممكن أن يكون لديك تحكم مماثل أو أعلى من 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%)
  );
}

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

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

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

تكون بعض التدرجات في هذه المساحات أكثر حيوية من غيرها أو تتنقل بشكل أقل عبر المناطق القاسية. تجمع المساحات مثل 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%));
}

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

إليك في ما يلي برنامج 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 من تأليف كريس كويير

الخطوات التالية

والآن بعد أن أصبحت على دراية بمساحات الألوان والأدوات الجديدة، يمكنك الانتقال إلى الألوان العالية الدقة.

إنّها تأثيرات أكثر حيوية، وأساليب لمعالجة واستكمال نتائج بشكل متسق، وتقديم تجربة أكثر نبضًا بالحياة للمستخدمين بشكل عام.

اقرأ المزيد من موارد الألوان من الدليل.