بناء نظام ألوان

نظرة عامة أساسية حول كيفية إنشاء نظام ألوان ديناميكي وقابل للتهيئة

Adam Argyle

في هذه المشاركة، أود أن أشاركك أفكارًا حول طرق إدارة أنظمة الألوان المتعددة في CSS. جرِّب العرض التوضيحي

عرض توضيحي

إليك نسخة من هذه المشاركة على YouTube إذا كنت تفضّل ذلك:

نظرة عامة

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

يبدأ هذا الدليل بتحديد كل الألوان لكل نظام ألوان المقدمة. ولا يتم استخدامها حتى النهاية لتغيير الصفحة.

العلامة التجارية

غالبًا ما يكون قد تم إنشاء لون العلامة التجارية بالفعل ويتم تقديمه hex أو rgb تحدي واجهة المستخدم الرسومية هذا لون العلامة التجارية الأساسي هو #0af. أولاً، بالنسبة لنظام الألوان هذا، يتم تحديد القيمة السداسية العشرية يحتاج إلى تحويل إلى hsl.

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

ولتمكين مفهوم تعتيم لون العلامة التجارية أو تفتيحه، لنفترض 20%، يجب استخراج القنوات الثلاث لقيمة لون hsl إلى قسم مخصص المواقع، مثل ما يلي:

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

يمكن أن تطبّق خدمة CSS عمليات حسابية على خصائص الألوان هذه، على سبيل المثال calc(var(--brand-lightness) - 20%) لتقليل قيمة الإضاءة بنسبة 20%. هذا أساسي لبناء نظام الألوان كما يمكن لـ CSS أن تحتفظ بجميع الألوان في نفس عائلة تدرج اللون عن طريق ضبط ومقدار تشبع hsl والإضاءة.

مظهر فاتح

سيتم تمييز كل صيغة لون بمخطَّط المطابقة، وفي هذه الحالة، سيتم ملحقة بـ -light.

معاينة للنتائج النهائية الخاصة بالمظهر الفاتح

العلامة التجارية

بدءًا من لون العلامة التجارية، تمت إعادة إنشائها من خلال التفاف --brand-hue و--brand-saturation. و--brand-lightness الخصائص المخصصة داخل أقواس الدالة hsl ()، بدون أي حسابات:

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

ألوان النص

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

* {
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light، بما أنّ الوضع مظلم جدًا عند إضاءة 10%، سيحافظ على درجة السطوع بنسبة 100%. حتى لا يزال لون العلامة التجارية يتسلل إلى الأزرق الداكن.

--text2-light، إنه ليس داكنًا تمامًا مثل اللون الأول، وهو جيد بقدر ما ولون ثانوي، كما أنه أقل تشبعًا بكثير.

ألوان السطح

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

* {
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
}

تم إنشاء 4 ألوان للأسطح لأن الألوان الزخرفية تميل إلى حاجة إلى المزيد لخيارات المنتجات، للّحظات التفاعلية مثل :focus أو :hover أو لإنشاء مظهر الطبقات الورقية. في هذه السيناريوهات، من الجيد الانتقال --surface2-light عند التمرير للوصول إلى --surface3-light، وبالتالي يؤدي التمرير فوق نتيجة زيادة التباين (99٪ من الإضاءة إلى 92٪ إضاءة؛ مما يجعلها أغمق).

الظلال

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

* {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

لم يتم التفاف --surface-shadow-light في دالة hsl. هذا لأن سيتم دمج قيمة --shadow-strength لتوفير بعض التعتيم، ويتطلّب استخدام CSS القطع من أجل إجراء العمليات الحسابية. التخطي إلى ظل الظلام للاطّلاع على مزيد من المعلومات.

ألوان فاتحة معًا

ليست هناك حاجة للبحث في كل مكان لمعرفة كيفية صنع أي لون من الألوان الفاتحة، فهي كل ذلك في مكان واحد في CSS.

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
  --shadow-strength-light: .02;
}
لقطة شاشة لكل الألوان الفاتحة معًا
وضع الحماية على CodePen

مظهر داكن

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

  1. سيكون المستخدمون في الظلام بشكل عام أثناء استخدام هذا المظهر، لذا اختبر ظْلِم
  2. يجب إلغاء تشبُّع الألوان بحيث لا يتم اهتزازها على الشاشة بسبب أكثر من اللازم.

معاينة للنتيجة النهائية للمظهر الداكن

العلامة التجارية

استخدم المظهر الفاتح قيم قنوات اللون hsl الثلاث للعلامة التجارية بدون تغيير، بينما المظهر الداكن لا. يتم خفض التشبع إلى النصف وتنخفض الإضاءة بنسبة 50٪.

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

ألوان النص

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

* {
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
}

ألوان السطح

وفي المظهر الداكن، يجب أن تكون ألوان السطح داكنة. تمتاز الألوان التالية إضاءة منخفضة وتشبّع لوني، حيث يكون السطح الأول أخف درجة إضاءة بنسبة %10

* {
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
}

الظلال

قد يكون من الصعب جدًا رؤية الظلال في المظهر الداكن. منطقي لأنه من الصعب لتعتيم شيء مظلم بالفعل. هذا هو المكان --shadow-strength-dark مفيد للغاية لأنه يسمح لنا بتعتيم الظلال عن طريق تغيير متغير واحد.

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

انظر أيضًا إلى مقدار التشبع في هذا الظل. هل يمكنك ملاحظة اللون عند النظر إلى الواجهة؟ جرِّب إزالة تشبُّع اللون من أدوات مطوري البرامج، أيهما تفضل؟!

الألوان الداكنة كلها معًا

* {
  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}
لقطة شاشة للألوان الداكنة معًا
وضع الحماية على CodePen

تعتيم المظهر

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

معاينة النتائج النهائية من المظهر المعتم

العلامة التجارية

* {
  --brand-dim: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 1.25)
    calc(var(--brand-lightness) / 1.25)
  );
}

ألوان النص

* {
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
}

ألوان السطح

* {
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
}

الظلال

* {
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

تعتيم الألوان كلها معًا

* {
  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}
لقطة شاشة تعرض كل الألوان المعتمة معًا
وضع الحماية على CodePen

ألوان يمكن الوصول إليها

لاحظ كيف أن أدنى إضاءة في تعيين لون النص الداكن هي 65٪ أعلى درجة إضاءة في الأسطح المظلمة هي 25٪. وهذا يعني 40% من الإضاءة غرفة للتنفس بينهما. في المظهر الفاتح، هناك مجال للتنفس بنسبة 55% المظهر الفاتح. الحفاظ على اختلافات الإضاءة بين ألوان النص والسطح حوالي 40-50٪ يمكن أن يساعد في الحفاظ على نسب تباين الألوان عالية، في حين أنها طريقة دقيقة للتعديل في حالة ما إذا كانت الدرجات ضعيفة.

أسميه "bump bump إلى yapass"، وهو تفاعل قفز القيمة إلى أن تظهر الأداة أنني أمرر.

يتم الضغط على Shift + السهم المتجه للأسفل لخفض مستوى الإضاءة وزيادة التباين إلى أن يتم الضغط على الزر

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

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}
لقطة شاشة للسطح المعتم وعمليات إقران النص
لقطة شاشة للسطح المعتم وعمليات إقران النصوص مع VisBug

تظليل رادي

تستخدم المظاهر فئة من الخدمات تسمى .rad-shadow. تم إنشاء هذا الظل. أداة Smooth Shadow هذه والتي أقدّرها كثيرًا. لقد أخذت المقتطف الذي أنشأته وخصّصته بألواني الخاصة، لحسابات التعتيم. كان السبب في ذلك هو إيجاد ظل يمكنني تعديله داخل كل نظام ألوان.

كل ظل مجاور لبعضه البعض

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

:root {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

.rad-shadow {
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
}

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

استخدام أنظمة الألوان

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

لتحقيق ذلك، يجب أن يتم استخدام نظام الألوان حصريًا من خلال الخصائص المخصصة العامة، والتي سنحددها بعد قليل. بهذه الطريقة، لا يحتاج الأشخاص الذين يستخدمون متغيرات التصميم إلى القلق بشأن نظام الألوان المحددة حاليًا، يحتاجون فقط إلى استخدام ألوان السطح والنص. بدلاً من color: var(--text1-light) يستخدم color: var(--text1). تتضمن كل أعمال التكيف والمحور من الألوان يتم إنجازه على مستوى أعلى بكثير في CSS.

نظرة تفصيلية على الأنماط المتصلة بالمظهر الفاتح في كتلة الرموز التالية، ربط خاصية مخصصة عامة باللون الخاص بالمظهر الفاتح. الآن جميع لاستخدامات خاصية var(--brand) باللون الفاتح للعلامة التجارية.

المظهر الفاتح (تلقائي)

:root {
  color-scheme: light;
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

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

المظهر الداكن (تلقائي)

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

مظهر فاتح

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

مظهر داكن

[color-scheme="dark"] {
  color-scheme: dark;

  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

تعتيم المظهر

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

في هذه المرحلة، يُسمح للمؤلفين باستخدام الأنواع العامة للألوان المتوفرة عند الحاجة، ولا داعي للقلق بشأن النُسُق بعد الآن.

الخاتمة

والآن بعد أن عرفت كيف فعلت ذلك، كيف حالك؟! 🙂

يمكننا تنويع أساليبنا وتعلُّم جميع طرق إنشاء المحتوى على الويب. إنشاء أداة Codepen أو استضافة عرضك التوضيحي، والتغريدة بها، وسأضيفها إلى يمكنك الاطّلاع على القسم أدناه حول الريمكسات التي أنشأها المنتدى.

المصدر

ريمكسات من إنشاء المنتدى - أضاف @chris-kruining شريط تمرير تدرج اللون، ألوان الحالة وأوضاع التباين لـ no-preference وmore وless: عرض توضيحي.