يمكنك إنشاء ألوان جديدة استنادًا إلى قنوات وقيم بلون آخر.
يعد Chrome 119 ميزة ألوان قوية جدًا من مستوى ألوان CSS 5. بنية الألوان النسبية تنشئ مسارًا سلسًا لمعالجة الألوان داخل CSS، مما يوفر طرقًا والمؤلفين والمصممين من أجل:
- Lighten
- تعتيم
- التشبع
- إلغاء التشبع
- تعزيز الكثافة اللونية
- ضبط التعتيم
- قلب الألوان
- التكامل
- تحويل
- التباين
- لوحات الألوان
قبل بنية اللون النسبي، لتعديل تعتيم اللون، يجب عليك إنشاء خصائص مخصصة للقنوات ذات اللون، عادة HSL، وتجميع إلى اللون النهائي واللون النهائي للمتغير. هذا يعني إدارة الكثير من قطع ملونة، والتي يمكن أن تصبح مرهقة بسرعة.
:root {
--brand-hue: 300deg;
--brand-saturation: 75%;
--brand-lightness: 50%;
--brand-hsl:
var(--brand-hue)
var(--brand-saturation)
var(--brand-lightness);
--brand-color: hsl(var(--brand-hsl));
/* all this work just so I can set the opacity to 50% in a variant */
--brand-color-variant: hsl(var(--brand-hsl) / 50%);
}
بعد بنية الألوان النسبية، يمكنك إنشاء لون علامة تجارية باستخدام أي مساحة لون. التي تحتاج إليها، وإنشاء متغير نصف تعتيم مع رمز أقل بكثير. من المهم أيضًا قراءة الغرض من الأنماط والنظام.
:root {
--brand-color: hsl(300deg 75% 50%);
--brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}
ستساعدك هذه المشاركة في التعرف على البنية وإظهار عمليات معالجة الألوان الشائعة.
إذا كنت تفضل مشاهدة الفيديو، فسيتناول تحدي واجهة المستخدم الرسومية هذا جميع المقالات التالية تقريبًا.
نظرة عامة على البنية
الهدف من بناء جملة الألوان النسبي هو السماح باشتقاق لون من
اللون. يسمى اللون الأساسي اللون المصدر، وهو اللون الذي
بعد الكلمة الرئيسية الجديدة from. سيقوم المتصفح
تحويل هذا اللون الأصلي وفصله عن العرض
الأجزاء كمتغيرات لاستخدامها في تعريف اللون الجديد.
يوضّح الرسم البياني السابق اللون الأصلي green الذي يتم تحويله إلى
مساحة اللون للون الجديد،
تم تحويلها إلى أرقام فردية ممثلة بالأرقام r وg وb وalpha
التي تُستخدم مباشرةً كقيم لون rgb() جديدة.
في حين أن هذه الصورة تعرض الانهيار والعملية والمتغيرات، إلا أنها لا تغيير اللون. تتم إعادة المتغيرات إلى اللون بدون تغيير، وبالتالي مما يؤدي إلى ثبات اللون الأخضر.
الكلمة الرئيسية from
إن الجزء الأول من التركيبة الذي يجب تعلُّمه هو الجزء from <color> بالإضافة إلى
لتحديد اللون. يسير مباشرة قبل تحديد القيم. إليك الرمز
مثال حيث كل ما تمت إضافته هو from green، قبل القيم مباشرة
لـ rgb() محددة.
.syntax-introduction_same-colors {
color: green;
color: rgb(0 128 0);
color: rgb(from green r g b); /* result = rgb(0 128 0) */
}
تلك الكلمة الرئيسية التي تبلغ قيمتها from، عندما يتم اعتبارها المعلمة الأولى في الترميز الوظيفي،
يحول تعريف اللون إلى لون نسبي! بعد الكلمة الرئيسية from، CSS
تتوقع لونًا، لونًا يلهمك باللون التالي.
تحويل الألوان
بعبارات أبسط، وهي تحوّل القنوات الخضراء إلى قنوات r g وb لاستخدامها في نافذة جديدة اللون.
rgb(from green r g b) /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b); /* r=0 g=128 b=0 */
ألوان من خصائص مخصّصة
قراءة "rgb from green" واضحة وسهلة الفهم هذا هو السبب في
الخصائص المخصصة وبناء جملة الألوان النسبي يجعلان تطابقًا رائعًا، لأنك
إزالة اللغز من اللون from. أنت أيضًا لا تحتاج بشكل عام إلى
معرفة تنسيق الألوان للون خاصية مخصصة، حيث إنك تنشئ لونًا
اللون بالتنسيق الذي تختاره.
rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b) /* clear */
استخدام مساحة الألوان المفضّلة لديك
يمكنك اختيار مساحة اللون من خلال اختيارك للترميز اللوني الوظيفي.
rgb(from hsl(120 100% 25%) r g b) /* r=0 g=128 b=0 */
hsl(from hsl(120 100% 25%) h s l) /* h=120 s=100% l=25% */
hwb(from hsl(120 100% 25%) h w b) /* h=120 w=0% b=50% */
lch(from hsl(120 100% 25%) l c h) /* l=46 c=68 h=134 */
تحتوي بنية الألوان النسبية على خطوة التحويل هذه؛ واللون بعد from هو
يتم تحويلها إلى مساحة اللون كما هو محدد في بداية النموذج النسبي
اللون. لا حاجة إلى التطابق بين المدخلات والمخرجات، فهي سهلة للغاية.
تعد القدرة على اختيار مساحة اللون تمكينًا أيضًا، حيث إن اختيار اللون تميل المساحة إلى أن تكون أكثر تركيزًا على نوع تبديل اللون أكثر من تفضيلك. يكون التفضيل في النتائج، وليس في تنسيق الألوان أو القناة الأنواع. سيصبح هذا أكثر وضوحًا في الأقسام التي توضح حالات الاستخدام، حيث تتفوق مساحات الألوان المختلفة في مهام مختلفة.
مزج المتغيّرات ومطابقتها واحذفها وكرِّرها
هناك شيء غريب ولكنه مثير حول بناء الجملة هذا، لا يجب أن تكون المتغيرات مرة أخرى بالترتيب ويمكن تكرارها.
rgb(from green g g g) /* rgb(128 128 128) */
rgb(from green b r g) /* rgb(0 0 128) */
rgb(from green 0 0 g) /* rgb(0 0 128) */
التعتيم كمتغير
توفّر البنية أيضًا التعتيم كمتغيّر باسم alpha. إنها اختيارية،
ويتبع / في تدوين اللون الوظيفي.
rgb(from #00800080 r g b / alpha) /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha) /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha) /* alpha=50% */
استخدام calc() أو دوال CSS الأخرى على المتغيرات
حتى الآن نقوم بإنشاء اللون الأخضر مرارًا وتكرارًا. سيساعدك التعرف على وبناء الجملة، والتعرف على خطوات التحويل والتدمير. الآن هو لتعديل المتغيرات، وتغيير المخرجات بحيث لا يكون إدخال.
green /* h=120 s=100% l=25% */
hsl(from green calc(h * 2) s l) /* h=240 s=100% l=25% */
إنّه أزرق داكن الآن! تمت مضاعفة تدرُّج اللون، مع أخذ تدرُّج اللون 120 وتحويله إلى
240، جارٍ تغيير اللون تمامًا. أدى هذا إلى تدوير تدرج اللون على طول اللون
عجلة، وهي خدعة أنيقة وبسيطة جدًا باستخدام مساحات ألوان أسطوانية
مثل HSL
HWB،
LCH
OKLCH
لرؤية قيم القنوات بصريًا، من أجل تطبيق العمليات الحسابية مباشرةً بدون تخمين المواصفات أو حفظها، جرّب أداة قيم قنوات تركيب الألوان النسبية هذه. وهو يكشف عن قيمة كل قناة بناءً على الصيغة التي تحددها، مما يسمح لك بمعرفة القيم المتاحة لك بالضبط.
التحقّق من توافق المتصفّح
@supports (color: rgb(from white r g b)) {
/* safe to use relative color syntax */
}
حالات الاستخدام والعروض التوضيحية
تحتوي الأمثلة وحالات الاستخدام التالية على العديد من بناء الجملة البديل الذي يجب تحقيقه متشابهة أو نفس النتائج. تأتي الاختلافات من مساحات الألوان القنوات التي تقدّمها
كما ستعرض العديد من الأمثلة تعديلات الألوان مع اللفظ by
to اللون الذي تم تغييره by هو تغيير لوني نسبي؛ التغيير الذي يستخدم
قيمة المتغير ويُجري تعديلاً استنادًا إلى قيمته الحالية. حاسمة
اللون الذي تم تغييره to هو تغيير لون مطلق؛ التغيير الذي لا يستخدم
قيمة المتغير وتحدد بدلاً من ذلك قيمة جديدة تمامًا.
يمكن العثور على جميع العروض التوضيحية في مجموعة Codep هذه.
تفتيح لون
The OKLCH وOKLAB XYZ أو توفر مساحات اللون في sRGB أكبر قدر نتائج يمكن التنبؤ بها عند تفتيح الألوان.
تخفيف الضوء كثيرًا
في المثال التالي، يستخدم .lighten-by-25 اللون blue ويحوّله إلى.
OKLCH، ثم تتم إضاءة اللون الأزرق عن طريق زيادة قناة l (الإضاءة) بضرب
القيمة الحالية على 1.25. يؤدي هذا إلى دفع الضوء الأزرق نحو اللون الأبيض بنسبة 25٪.
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
التخفيف إلى قيمة معيّنة
لا يستخدم المثال التالي .lighten-to-75 قناة l لتنفيذ ما يلي:
خفيف blue، فسيتم بدلاً من ذلك استبدال القيمة تمامًا بـ 75%.
.lighten-to-75 {
background: oklch(from blue 75% c h);
}
تعتيم اللون
تعد مساحات اللون ذاتها الفعالة في تفتيح اللون رائعة أيضًا اللون الغامق.
تعتيم بمقدار
في المثال التالي، يستخدم .darken-by-25 اللون الأزرق ويحوله إلى
OKLCH، ثم يتم تعتيم اللون الأزرق عن طريق خفض قناة l (الإضاءة) بنسبة 25% بنسبة
ضرب القيمة في .75. يؤدي هذا إلى دفع اللون الأزرق نحو الأسود بنسبة 25٪.
.darken-by-25 {
background: oklch(from blue calc(l * .75) c h);
}
تعتيم إلى قيمة محدّدة
لا يستخدم المثال التالي .darken-to-25 قناة l لتعتيم الشاشة.
blue، بدلاً من ذلك تستبدل القيمة بالكامل بـ 25%.
.darken-to-25 {
background: oklch(from blue 25% c h);
}
تشبّع لون
التشبع بمبلغ
يستخدم المثال التالي .saturate-by-50 السمة s من hsl() لزيادة
حيوية "orchid" من قِبل "50%" قريب
.saturate-by-50 {
background: hsl(from orchid h calc(s * 1.5) l);
}
التشبع إلى مبلغ محدد
لا يستخدم المثال التالي .saturate-to-100 قناة s من
hsl()، فإنها تحدد بدلاً من ذلك قيمة تشبع اللون المطلوبة. في هذا المثال،
يتم رفع تشبُّع اللون إلى 100%.
.saturate-to-100 {
background: hsl(from orchid h 100% l);
}
إلغاء تشبُّع لون
إلغاء التشبع بمبلغ
يستخدم المثال التالي .desaturate-by-half السمة s من hsl() لتقليل
تشبع indigo بمقدار النصف.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
إلغاء التشبع بقيمة معيّنة
وبدلاً من إلغاء التشبُّع بمقدار مبلغ، يمكنك إلغاء التشبُّع إلى مستوى مُرغوب فيه.
ينشئ المثال التالي .desaturate-to-25 لونًا جديدًا استنادًا إلى
indigo ولكن يضبط تشبُّع اللون على 25%.
.desaturate-to-25 {
background: hsl(from indigo h 25% l);
}
تعزيز اللون
يشبه هذا التأثير تشبع اللون ولكنه يختلف في تأثيرين
وطرق. أولاً، ينطبق التغيير على chroma وليس في saturation.
لأن المسافات اللونية التي يمكن تعزيزها إلى نطاق عالي الديناميكية لا تستخدم
تشبع اللون. مساحات الألوان التي تحتوي على chroma هي نطاق عالي الديناميكية
أكثر قدرة، مما يسمح للمؤلفين بتعزيز حيوية اللون بشكل أكبر من التشبع
قادرًا على القيام به.
.increase-chroma {
background: oklch(from orange l calc(c + .1) h);
}
ضبط مستوى تعتيم اللون
إن عمل متغير شبه شفاف للون هو أحد الألوان الأكثر شيوعًا التعديلات التي تم إجراؤها في أنظمة التصميم. اطّلِع على المثال الوارد في مقدمة هذا إذا فاتتك هذه المقالة، فإنها تحدد مساحة المشكلة بشكل جيد.
ضبط التعتيم بمقدار مبلغ
.decrease-opacity-by-25 {
background: rgb(from lime r g b / calc(alpha / 2));
}
ضبط التعتيم على قيمة معيّنة
.decrease-opacity-to-25 {
background: rgb(from lime r g b / 25%);
}
قلب اللون
عكس الألوان هو وظيفة شائعة لضبط الألوان توجد في مكتبات الألوان. ويمكن تحقيق ذلك من خلال تحويل اللون إلى نموذج أحمر أخضر أزرق ثم طرح كل قيمة القناة من 1.
.invert-each-rgb-channel {
background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}
تكملة اللون
إذا لم يكن هدفك هو عكس اللون بل استكماله، فحينئذٍ
عرض الإعلانات بالتناوب هو ما تبحث عنه على الأرجح. اختر مساحة لون توفر
تدرّج اللون كزاوية، ثم استخدِم calc() لتدوير تدرُّج اللون بالقدر الذي تريده.
يتم العثور على تكملة لون عن طريق التدوير بنصف دورة، في هذه الحالة
يمكنك إضافة أو طرح قناة h من خلال 180 للحصول على النتيجة.
.complementary-color {
background: hsl(from blue calc(h + 180) s l);
}
تباين لون
كطريقة لتحقيق نسب تباين الألوان التي يمكن الوصول إليها، ضع في الاعتبار L&midast؛ (Lstar).
ويستخدم هذا قناة الإضاءة الموحدة (تقريبًا) (تقريبًا) من
LCH وOKLCH، في calc(). حسب استهدافك للإعلانات المنخفضة والمتوسطة والمرتفعة
والتباين، دلتا حوالي 40 أو 50 تقريبًا أو 60 تقريبًا.
وتعمل هذه التقنية بشكل جيد عبر أي تدرج لوني في LCH أو OKLCH.
تباين لون أغمق
وتوضح الفئة .well-contrasting-darker-color L* مع دلتا 60.
نظرًا لأن اللون المصدر هو لون داكن (إضاءة منخفضة القيمة)، تتم إضافة 60٪ (.6)
إلى قناة الضوء. وتستخدم هذه التقنية لإيجاد طريقة تباين جيدة،
نفس اللون، لون نص داكن على خلفية فاتحة.
.well-contrasting-darker-color {
background: darkred;
color: oklch(from darkred calc(l + .60) c h);
}
تباين لون أفتح
توضح الفئة .well-contrasting-lighter-color L* بدلتا 60%.
أيضًا. نظرًا لأن اللون المصدر هو لون فاتح (إضاءة عالية القيمة)، فإن .60 هو
يتم طرحها من قناة الإضاءة.
.well-contrasting-lighter-color {
background: lightpink;
color: oklch(from lightpink calc(l - .60) c h);
}
ألواح الألوان
بناء جملة الألوان النسبي جيد جدًا في إنشاء لوحات الألوان. من المهم مفيدة وفعالة نظرًا لعدد مساحات الألوان المتاحة. ما يلي: الأمثلة تستخدم OKLCH لأن قناة الإضاءة موثوقة يمكن تدوير القناة بدون آثار جانبية. يوضح المثال الأخير يجمع بين تعديلات الإضاءة وتدرج اللون للحصول على تجربة أكثر تشويقًا النتيجة.
افتح مثال رمز المصدر لهذه العناصر وحاول تغيير --base-color، إلى
نرى مدى ديناميكية هذه اللوحات. هذا ممتع!
إذا أعجبك الفيديو، نقدّم لك معلومات مفصّلة حول إنشاء لوحات الألوان في CSS باستخدام OKLCH على YouTube.
لوحات ألوان أحادية اللون
لإنشاء لوحة ألوان أحادية اللون هو عمل لوحة ألوان من نفس تدرج اللون ولكن مع اختلافات في الإضاءة والظلام. اللون الأوسط هو لون المصدر لللوحة، حيث يتم وضع خيارين أفتحين وغامقين على إما الجانبي.
:root {
--base-color: deeppink;
--color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
--color-1: oklch(from var(--base-color) calc(l + .10) c h);
--color-2: var(--base-color);
--color-3: oklch(from var(--base-color) calc(l - .10) c h);
--color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}
جرب مجموعة من اللوحات التي تم إنشاؤها باستخدام بنية ألوان نسبية وOKLCH
Open Props، وهي عبارة عن مكتبة من متغيّرات CSS المجانية وعروض لوحات الألوان تم إنشاؤها باستخدام هذه الإستراتيجية وتسهل استخدامها من خلال استيراد البيانات. إنها أيضًا مبنية جميعها من لون يمكنك تخصيصه، ما عليك سوى توفير لونه يُبرز لوحة!
لوحات ألوان تناظرية
نظرًا لأن تدوير تدرُّج التدرج سهل للغاية باستخدام OKLCH وHSL، فإنه من السهل إنشاء لوحة الألوان التناظرية: عليك تدوير تدرج اللون بالمقدار الذي تريده إلى نتائجه وتغيير اللون الأساسي، ومشاهدة لوحات ألوان جديدة يتم إنشاؤها بواسطة المتصفح.
:root {
--base-color: blue;
--primary: var(--base-color);
--secondary: oklch(from var(--base-color) l c calc(h - 45));
--tertiary: oklch(from var(--base-color) l c calc(h + 45));
}
لوحات ثلاثية
على غرار الألوان التكميلية، يمكنك استخدام لوحات ألوان ثلاثية
إلا أن تدويرات تدرُّج اللون متعارضة متناغمة تُعطى لونًا أساسيًا. حيث
يوجد اللون المتمّم على الجانب الآخر من اللون، مثل خط مستقيم
مرسومة من خلال منتصف عجلة الألوان، فإن اللوحات الثلاثية مثل
مثلث الخطوط، الذي يشير إلى لونين مستديرين بشكل متساوٍ من لون أساسي.
لتنفيذ ذلك، عليك تدوير تدرج اللون 120deg.
هذا تبسيط طفيف لنظرية الألوان، لكنه يكفي للانطلاق لتبدأ بلوحات ثلاثية الأبعاد الأكثر تعقيدًا إذا كنت مهتمًا.
:root {
--base-color: yellow;
--triad-1: oklch(from var(--base-color) l c calc(h - 120));
--triad-2: oklch(from var(--base-color) l c calc(h + 120));
}
لوحات ألوان رُباعية
لوحات رباعية الألوان هي أربعة ألوان مقسمة بالتساوي حول عجلة الألوان، مما يجعل لوحة ليس لها قيمة سائدة واضحة. يمكنك التفكير في الأمر أيضًا، مثل اثنين أزواج من الألوان التكميلية. عند استخدامها بحكمة، قد تكون ذات مغزى كبير.
هذا تبسيط طفيف لنظرية الألوان، لكنه يكفي للانطلاق بالبدء بلوحات رباعية أكثر تعقيدًا إذا كنت مهتمًا.
:root {
--base-color: lime;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) l c calc(h + 90));
--color-3: oklch(from var(--base-color) l c calc(h + 180));
--color-4: oklch(from var(--base-color) l c calc(h + 270));
}
أحادي اللون مع دوران تدرُّج بسيط
يحافظ العديد من خبراء الألوان على هذه الحيلة. المشكلة هي أن فقد يكون مقياس اللون أحادي اللون مملاً للغاية. الحل هو إضافة إما تدوير تدرج لوني طفيف أو كبير إلى كل لون جديد عند تغيير الإضاءة.
يؤدي المثال التالي إلى تقليل الإضاءة بنسبة 10% في كل عينة وكذلك تدويرها تدرج اللون بمقدار 10 درجات. وكانت النتيجة أن لونًا ورديًا من اللون الوردي إلى نيليًا يبدو تندمج بسلاسة مثل التدرج.
:root {
--base-color: deeppink;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
--color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
--color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
--color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}
جرِّب لوحة الصدارة هذه التي تم إنشاؤها باستخدام OKLCH وتدوير تدرُّج الألوان
تستخدم واجهة لوحة الصدارة التالية استراتيجية تدوير تدرُّج الألوان هذه. كل قائمة
يتتبع العنصر الفهرس الخاص به في المستند كمتغير يسمى --i. هذا الفهرس هو
ثم استخدامه لضبط الكروما والإضاءة وتدرج اللون. وتكون التسوية بنسبة 5٪ فقط أو
5 درجات، وهي أكثر دقة بكثير من المثال أعلاه الذي يظهر فيه الوردي العميق، ولذا يتطلب الأمر
لملاحظة سبب ظهور لوحة الصدارة هذه بأي لون
والأناقة.
تأكد من تغيير تدرُّج اللون في شريط التمرير أسفل لوحة الصدارة لبناء جملة لون نسبية إنشاء لحظات ألوان جميلة.
li {
--_bg: oklch(
/* decrease lightness as list grows */
calc(75% - (var(--i) * 5%))
/* decrease chroma as list grows */
calc(.2 - (var(--i) * .01))
/* lightly rotate the hue as the list grows */
calc(var(--hue) - (var(--i) + 5))
);
}