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

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

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

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

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

يتيح Chrome استخدام تسلسلات الألوان 4 CSS ومساحات الألوان. بإمكان CSS الآن دعم الشاشات ذات الدقة العالية، وتحديد الألوان من سلاسل الألوان العالية الدقة مع تقديم مساحات ألوان ذات تخصصات أيضًا.

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

نظرة عامة

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

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

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

تعرض الصورة التالية بعض ترقيات الدمج.

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

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

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

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

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

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

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

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

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

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

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

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

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

تقدّم مواصفات المستوى 4 12 مساحة لون جديدة للبحث عن الألوان. هذه بالإضافة إلى مساحات الألوان الأربعة المتوفرة سابقًا:

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

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

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

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

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

مراجعة لمساحات الألوان الكلاسيكية {#classic-color-spaces}

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

منذ العقد الأول من القرن الحادي والعشرين، يمكنك استخدام ما يلي لأي من خصائص CSS التي تقبل لونًا كقيمة: النظام السداسي العشري (الأرقام السداسية) أو rgb() أو rgba() أو حسب الاسم مثل hotpink أو مع كلمات رئيسية مثل currentColor.

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

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

سداسي عشري

تحدد مسافة اللون السداسية العشرية 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;
}

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

تتميز مساحة اللون 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

واحدة من أوائل مساحات الألوان لتوجيه نفسها نحو اللغة البشرية والتواصل، فإن 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

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

المراجع

اقرأ المزيد من مقالات المستوى 5 للألوان.

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

كما يمكنك العثور على قراءات إضافية عبر الويب:

• المستوى 4 من وحدة ألوان CSS من W3C

• المستوى 5 من وحدة ألوان CSS من W3C

• ألوان LCH في CSS: ماذا ولماذا وكيف؟

• أفضل من الميزة الاختبارية؟ خفض السلسلة: معمل CIE وOKLab

• نحو ألوان أغنى على الويب

• Okhsv وOkhsl: مساحتا ألوان جديدتان لاختيار الألوان

• نحو ألوان أغنى في Chromium (PDF)

• إنّ LCH هي أفضل مساحة ألوان.

• تصميم أنظمة الألوان التي يسهل الوصول إليها

• "مساحات الألوان"، من تأليف "هانا ويلر"

• ألوان الشبكة الواسعة في CSS باستخدام Display-P3

• مساحة اللون CIE 1931

• تنسيقات الألوان في CSS

• مساحات الألوان من "بارتوس تشيشانوفسكي"

والأدوات:

• afc163.github.io/color3d/
• التمثيل المرئي المتسلسل
• أداة إنشاء تدرّجات زاهية