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

كيفية استخدام مولّد درجات الألوان

1. اختر اللون الأساسي من العيّنة، أو اكتب قيمة في رمز اللون: #1E90FF أو rgb(30 144 255) أو hsl(210 100% 56%) أو اسم لون في CSS مثل teal.
2. اختر الخطوة: 5 % أو 10 % أو 20 % أو 25 %. مع 10 % تحصل على درجات فاتحة عند 10 % و20 % … 100 %، وعلى العدد نفسه من الدرجات الداكنة.
3. اختر طريقة المزج في: OKLCH (إدراكي) أو sRGB (كلاسيكي). يتحدّث الصفّان فورًا: الدرجات الفاتحة (ممزوجة بالأبيض) والدرجات الداكنة (ممزوجة بالأسود)، ويبدأ كل منهما من اللون الأساسي.
4. اضغط نسخ أسفل أي عيّنة لنسخ رمز HEX الخاص بها.
5. في التصدير بصيغة، اختر متغيرات CSS أو إعدادات Tailwind (v3) أو Tailwind @theme (v4) أو متغيرات SCSS أو JSON، واضبط الاسم مثل primary أو brand، ثم انسخ الشيفرة أو نزّلها.

الدرجات الفاتحة والداكنة والرمادية

في نظرية الألوان، الدرجة الفاتحة (tint) هي لون ممزوج بالأبيض، والدرجة الداكنة (shade) هي لون ممزوج بالأسود، والدرجة الرمادية (tone) هي لون ممزوج بالرمادي. وتدل النسبة المئوية على مقدار الأبيض أو الأسود المضاف: فالدرجة الفاتحة 30 % تتكوّن من 70 % من اللون الأساسي و30 % من الأبيض. وعند 100 % تصل إلى الأبيض الصافي أو الأسود الصافي، ولهذا تكون آخر عيّنة في كل صف دائمًا #FFFFFF أو #000000، فهي تحدّد نهاية السلّم.

الدرجات الفاتحة والداكنة أسرع طريقة لبناء سلّم متّسق من لون واحد لعلامتك التجارية: الخلفيات الفاتحة وحالات مرور المؤشر من الدرجات الفاتحة، والحدود وحالات الضغط والنص الداكن من الدرجات الداكنة.

المزج في OKLCH أم في sRGB؟

يمزج sRGB (كلاسيكي) قيم الأحمر والأخضر والأزرق مباشرةً. وهذا ما تفعله معظم المولّدات القديمة، ويطابق color-mix(in srgb, …) في CSS. ومعادلة الدرجة الفاتحة هي ببساطة channel + (255 − channel) × p، ومعادلة الدرجة الداكنة channel × (1 − p). والنتيجة متوقعة، لكن الخطوات غير متساوية إدراكيًا: إذ يميل الأزرق إلى البنفسجي كلما فتح، وتبدو الدرجات الداكنة غالبًا عكرة.

أما OKLCH (إدراكي) فيمزج في فضاء الألوان OKLCH الذي صمّمه Björn Ottosson عام 2020، مثل color-mix(in oklch, …) في CSS. وتُستوفى الإضاءة والصفاء اللوني ودرجة اللون كلٌّ على حدة. وبما أن الأبيض والأسود بلا درجة لون، تبقى درجة اللون الأساسي ثابتة على امتداد السلّم، وتغيّر كل خطوة الإضاءة بمقدار متشابه بصريًا. والألوان التي قد تقع خارج نطاق sRGB تُعاد إليه بتقليل صفائها اللوني لا بقصّ القنوات، فتبقى درجة اللون مستقرة. وفي أنظمة التصميم، يعطي هذا عادةً سلالم أنظف وأكثر انتظامًا.

استخدام التصدير

• تُنتج متغيرات CSS كتلة :root تحتوي على متغيرات مثل --primary-tint-20 و--primary-shade-40، جاهزة للصق في ملف الأنماط.
• تعطي إعدادات Tailwind (v3) كائن colors لـ theme.extend.colors، فتكتب بعدها أصنافًا مثل bg-primary-tint-20 أو text-primary-shade-60. ويحمل المفتاح DEFAULT اللون الأساسي، فيعمل bg-primary أيضًا.
• تعطي Tailwind @theme (v4) متغيرات --color-… لإعدادات Tailwind 4 القائمة على CSS.
• تناسب متغيرات SCSS وJSON أدوات البناء الأخرى ورموز التصميم.

تُحوَّل الأسماء إلى أحرف صغيرة وتصبح المسافات شرطات، فيصبح «Brand Blue» هو brand-blue. واستخدم اسمًا بحروف لاتينية، لأن أسماء المتغيرات في CSS وTailwind تُكتب عادةً بالإنجليزية.