مولّد ظلال الألوان

الظل اللوني هو لون ممزوج بالأسود. يحتفظ بتدرجه ويصبح أغمق، بخلاف الصبغة التي تُمزج بالأبيض، أو النغمة التي تُمزج بالرمادي.

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

يحسب المزج في 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 أرقام، وتنتهي دوال CSS بقيمة ألفا بعد شرطة مائلة.

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

انسخ قيم Hex أو oklch() إلى خصائص مخصصة مثل --brand-600 و--brand-700. ولإجراء المزج في المتصفح بدلًا من ذلك، يعطي color-mix(in oklab, var(--brand) 80%, black) ظلًا بنسبة 20%، مثل إعداد OKLab.

لا. افحص تباين النص مع كل ظل باستخدام أداة فحص التباين، لأن الظل الذي يبدو داكنًا قد يظل دون 4.5:1 عند مقارنته بلون داكن آخر أو نص ملوّن.