مولّد لوحة ألوان

من لون واحد إلى لوحة كاملة، جاهزة كمتغيرات CSS وTailwind.

اللون الأساسي

اضغط أي لون لنسخه. الألوان محسوبة في فضاء OKLCH، فتبدو خطوات السطوع متساوية للعين.

اسم اللون في الكود

الكود

:root {
  --brand-50: #f3f7ff;
  --brand-100: #dfeaff;
  --brand-200: #bed5ff;
  --brand-300: #91b7ff;
  --brand-400: #5f94ff;
  --brand-500: #3170f9;
  --brand-600: #1754db;
  --brand-700: #003bbf;
  --brand-800: #002e9c;
  --brand-900: #002480;
  --brand-950: #001455;
}

عن الأداة

التدرّج من 50 إلى 950 هو ما تحتاجه واجهة كاملة من لون هوية واحد: الدرجات الفاتحة للخلفيات والحدود، والوسطى للأزرار والروابط، والغامقة للنصوص والحالة المضغوطة. تُحسب الدرجات بتثبيت درجة اللون وتشبعه في فضاء OKLCH وتغيير الإضاءة على منحنى قريب من منحنى ألوان Tailwind، فتبدو الخطوات متساوية للعين.

اللوحات الأخرى مبنية على دائرة الألوان: المتكاملة لونان متقابلان يبرز أحدهما الآخر، والمتجاورة ألوان متقاربة هادئة، والثلاثية ثلاثة ألوان متباعدة بالتساوي. التدوير يجري في OKLCH مع تثبيت الإضاءة، فتبقى الألوان متوازنة السطوع.

بعض الألوان الزاهية جدًا لا تتسع لها شاشات sRGB عند كل درجات الإضاءة، فتُخفَّض حيويتها تلقائيًا حتى تُعرض كما هي على كل الشاشات.

أسئلة شائعة

أي درجة أستخدم للأزرار؟

غالبًا 600 للزر العادي و700 عند المرور عليه، مع نص أبيض. تأكد من التباين في صفحة فحص تباين الألوان، فبعض الألوان مثل الأصفر والأخضر الفاتح تحتاج درجة أغمق.

كيف أستخدم الناتج في Tailwind 4؟

الصق كتلة ⁦@theme⁩ في ملف CSS الرئيسي، فتصير الأصناف مثل ⁦bg-brand-600⁩ و⁦text-brand-900⁩ متاحة مباشرة.