مولّد درجات الألوان

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

الرمادي المتوسط في sRGB هو #808080، rgb(128 128 128). لذلك تصبح الألوان الفاتحة أغمق قليلًا والداكنة أفتح قليلًا عند اقترابها منه؛ ولمزج اللون مع درجة رمادي أخرى، استخدم أداة Color Mixer مع درجة الرمادي التي تختارها.

مع N خطوات، يمزج الصف k اللون بنسبة (k - 1) / N من الرمادي، لذا تعطي 10 خطوات نسبًا قدرها 0% و10% و20% وهكذا حتى 90%. يكون الصف الأول دائمًا هو لونك الأصلي، ولا يُدرج الرمادي الصافي في القائمة.

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

في المزج باستخدام sRGB، تُحسب متوسطات قيم القنوات المرمّزة غاما، وهي الطريقة التقليدية في مخططات درجات الألوان الشبيهة بالطلاء وSass mix(). أما المزج باستخدام OKLab فيجري ضمن فضاء إدراكي، فينخفض التشبع اللوني بوتيرة أكثر تساويًا من خطوة إلى أخرى.

رموز Hex مع # أو بدونه، وأسماء الألوان CSS، وrgb()، وhsl()، وhwb()، وlab()، وlch()، وoklab()، وoklch()، وcolor()، وcmyk(). أدخل لونًا واحدًا في كل تشغيل.

من 2 إلى 20 في كل تشغيل، و10 افتراضيًا. ويشمل العدد اللون الأصلي في الصف الأول.

لكل خطوة، تُعرض نسبة الرمادي، ورمز hex، وrgb() وhsl() وoklch() بصيغة CSS الحديثة. تكون قنوات RGB أعدادًا صحيحة، وتصل دقة النسب المئوية في HSL إلى منزلتين عشريتين، ودقة السطوع والتشبع في OKLCH إلى أربع منازل.

تُحفظ قيمة ألفا للون المُدخل في كل درجة لونية، لذا تكون رموز hex من 8 أرقام. وتُحوّل الدرجات الخارجة عن نطاق الألوان إلى sRGB باستخدام خوارزمية CSS Color 4 في أعمدة HEX وRGB وHSL، بينما يحتفظ عمود OKLCH بالقيمة غير المحوّلة.

انسخ قيمة hex أو oklch()، أو دع المتصفح يمزج اللون باستخدام color-mix(in oklab, var(--brand) 70%, #808080) لإنشاء الدرجة اللونية بنسبة 30% وفق إعداد OKLab. تعمل color-mix() في جميع المتصفحات الرئيسية الحالية.