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

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

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

اقرأ ملخص مساحات الألوان الكلاسيكية.

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

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

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

تتيح مساحات الألوان التالية الوصول إلى مجموعات أكبر من sRGB. تشير رسالة الأشكال البيانية تعرض مساحة اللون في display-p3 ضعف عدد الألوان التي يوفّرها النموذج اللوني أحمر أخضر أزرق، في حين يوفّر Rec2020 وهو ما يقرب من ضعف عدد مواد العرض 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() {#line-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);
}

LAB

هناك مساحة لونية أخرى تم إنشاؤها للوصول إلى سلسلة 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، ولكن بعد ذلك تكون لدينا صفة اللون بدلاً من التشبع. إنهما متطابقان إلى حد ما باستثناء أن التعديلات على الإضاءة والكروما تميل إلى زوجًا من الألوان، وإلا قد يكون من السهل طلب الحصول على ألوان كروما عالية خارج السلسلة المستهدفة.

الإيجابيات

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

السلبيات

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

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

OKLAB

هذه المساحة تصحيحية للتدريب المعملي. ويُفترَض أنّها مساحة محسَّنة لجودة معالجة الصور أيضًا، وبالتالي لنا في 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 تدعم على iMac منذ عام 2015. كما دعمت 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 جزءًا من حركة الفيديوهات الفائقة الدقة (UHDTV). توفر مجموعة كبيرة من الألوان للاستخدام في وسائط 4k و8k Rec2020 هي حل النطاق المستند إلى نموذج أحمر أخضر أزرق (RGB)، وهو أكبر من display-p3، ولكنّه ليس منتشرًا بشكل كبير المستهلكون على شكل شبكة إعلانية 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 و"الشبكة الإعلانية" 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);
}

نموذج ProPhoto RGB

هذه المجموعة الواسعة النطاق التي صممتها 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 جميع الألوان المرئية لشخص لديه متوسط الرؤية. ولهذا السبب يتم استخدامه كمرجع قياسي للألوان الأخرى. مسافات. يشير الرمز Y إلى الإضاءة، بينما تشير X وZ إلى كروم مكتسبَين في العنصر Y المحدد. السطوع.

الفرق بين 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 للألوان 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، القدرة على التحكم في استراتيجية استكمال تدرُّج اللون عن طريق الخطأ وهي طريقة جديدة للتغلب على (:wink:) المنطقة الميتة. التفكير في تدرج لون زاوية وفكر في تدرج درجتي توقف يغير الزاوية، وينتقل تدرج اللون الانتقال من 140deg إلى 240deg مثلاً.

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

الإعداد الافتراضي للتدرج هو shorter يمكن أن تسلكه إلا إذا التي تحددها أن تتخذ المسار longer. تدرّج اللون تعمل خيارات الاستكمال على توجيه تدوير الزاوية، مثل مطالبة شخص ما بالدوران لليسار بدلاً من اليمين (heh, Zoolander):

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

زيادة مقابل انخفاض تدرج اللون

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

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

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

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

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

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

تكون بعض التدرجات في هذه المساحات أكثر حيوية من غيرها أو تنتقل بدرجة أقل عبر المناطق الميتة تجمِّع المساحات مثل 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 رائعة للتدرجات الخطية بشكل إدراكي التي تظل مُشبعًا. تمنحك هذه الميزة متعة كبيرة، إذ يمكنك تجربتها بألوان مختلفة المسافات لمعرفة التدرج الذي تفضله أكثر.

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

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

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

rgb(300 255 255)

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

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

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

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

إذا كانت هناك مساحة واحدة أفضل، فلن يكون هناك الكثير من المساحات الجديدة التي

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

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

1. OKLCH في CSS: سبب انتقالنا من النموذجين RGB وHSL من خلال أندريه ستنيك
2. تنسيقات الألوان بواسطة Josh W. Comeau
3. OK، OKLCH من خلال كريس كويير

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

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

مزيد من الحيوية وعمليات التلاعب واستكمال البيانات المتسقة لتقديم أكثر حيوية للمستخدمين.

الاطّلاع على المزيد من موارد الألوان من الدليل.