مولّد درجات اللون (Color Shades)
حوّل لوناً واحداً إلى سلم 50–950 بنمط Tailwind مع tints وshades وtones. يُحسب في OKLCH وsRGB ويُصدَّر كمتغيرات CSS أو Tailwind أو JSON.
إعدادات الدرجات
تصدير
يحافظ سلّم 50–950 على لونك عند 500 ويعدّل إضاءة OKLCH وتشبّعه في بقية الخطوات مع إبقاء درجة اللون.
سلّم 50–950
التفتيح والتغميق والدرجات الرمادية
المزج في sRGB مثل color-mix(in srgb, …) بخطوات متساوية؛ انقر على لون لنسخه.
:root {
--brand-50: #eef5ff;
--brand-100: #e1edff;
--brand-200: #c9deff;
--brand-300: #a3c6ff;
--brand-400: #73a8ff;
--brand-500: #3b82f6;
--brand-600: #266ad8;
--brand-700: #1554b8;
--brand-800: #074095;
--brand-900: #002d72;
--brand-950: #012156;
}أدوات ذات صلة
عرض الكلما هو مولّد درجات اللون؟
يوسّع لوناً واحداً إلى سلم من 11 خطوة 50–950 كلوحات Tailwind، وإلى صفوف من tints (ممزوجة بالأبيض) وshades (ممزوجة بالأسود) وtones (ممزوجة بالرمادي). يمكن نسخ كل القيم منفردة أو تصديرها كمتغيرات CSS أو SCSS أو Tailwind v3/v4 أو JSON.
كيفية استخدام مولّد درجات اللون
- أدخل اللون الأساسي.
- اقرأ سلم 50–950؛ ولونك هو الخطوة 500.
- اضبط عدد خطوات tint / shade / tone لصفوف المزج.
- انقر أي عينة لنسخها.
- اختر صيغة التصدير واسم الرمز وانسخ السلم.
مثال
#3b82f6, CSS variables, token name brand
:root {
--brand-50: #eef5ff;
--brand-100: #e1edff;
--brand-200: #c9deff;
--brand-300: #a3c6ff;
--brand-400: #73a8ff;
--brand-500: #3b82f6;
--brand-600: #266ad8;
--brand-700: #1554b8;
--brand-800: #074095;
--brand-900: #002d72;
--brand-950: #012156;
} متى تستخدم مولّد درجات اللون
استخدمه لبناء تدرج ألوان كامل لنظام تصميم أو سمة Tailwind من لون علامة واحد، أو للحصول على صيغ التمرير/الضغط. السلم نقطة بداية خوارزمية معقولة؛ وفي أنظمة التصميم للإنتاج قد تحتاج إلى ضبط خطواتها وفحص التباين للنصوص.
كيف يعمل مولّد درجات اللون
للسلم يُحوَّل اللون الأساسي إلى OKLCH ويبقى دون تغيير عند 500. تحرّك الخطوات الأفتح الإضاءة نسبة ثابتة من الطريق نحو 0.985 (95% و88% و75% و55% و30% للخطوات 50–400) وتخفض الكروما؛ وتتجه الأغمق نحو 0.2 (18%–85% للخطوات 600–950) بكروما مخفضة قليلاً. تبقى الصبغة وتُلاءَم كل خطوة مع نطاق sRGB. أما tints وshades وtones فهي مزائج في sRGB المرمّز بغاما، مثل color-mix(in srgb, …)، بخطوات متساوية قدرها 1/(n+1).
حالات الاستخدام الشائعة
- تدرجات ألوان مخصصة لـ Tailwind
- رموز نظام تصميم من لون علامة
- صيغ حالتي التمرير والضغط
- خلفيات وحدود في السمات الفاتحة والداكنة
- ألوان خافتة للرسوم التوضيحية
الأسئلة الشائعة
ما الفرق بين tint وshade وtone؟
الـ tint هو اللون ممزوجاً بالأبيض، والـ shade ممزوجاً بالأسود، والـ tone ممزوجاً بالرمادي.
لماذا يقع لوني عند 500؟
كما في لوحات Tailwind الخطوة 500 هي المرجعية؛ وتُستخدم الخطوات الأفتح (50–400) للخلفيات والأغمق (600–950) للنصوص والحدود.
هل ستطابق ألوان Tailwind المدمجة تماماً؟
لا. لوحات Tailwind ضُبطت يدوياً؛ وتولّد هذه الأداة خوارزمياً تدرجاً شبيهاً لأي لون.