مولّد تدرجات الألوان الفاتحة

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

مع 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-100 و--brand-200. ولإجراء المزج في المتصفح، تعطي color-mix(in oklab, var(--brand) 80%, white) الدرجة الفاتحة نفسها بنسبة 20% كما في إعداد OKLab.

غالبًا لا، لأن التباين بين الدرجات الفاتحة والأبيض ضعيف. استخدم نصًا داكنًا على الدرجات الفاتحة، وتحقق من كل زوج باستخدام أداة فحص التباين؛ إذ يحتاج النص العادي إلى نسبة لا تقل عن 4.5:1 لاجتياز WCAG AA.