تصميم / الألوان

مولّد تدرّج ألوان Tailwind

حوّل لونًا واحدًا من ألوان علامتك التجارية إلى لوحة Tailwind CSS كاملة من 50 إلى 950، مبنية باستخدام OKLCH مثل ألوان Tailwind الأصلية، ثم انسخها بصيغة CSS لنسق Tailwind 4، أو إعداد Tailwind 3، أو متغيرات CSS.

مولّد تدرّج ألوان Tailwind: يأخذ كل تدرّج قيمة الإضاءة والتشبّع والانحراف الطفيف في درجة اللون التي تتميز بها لوحات Tailwind الأصلية في تلك الدرجة، وفقًا للقياس في مساحة ألوان OKLCH، ثم يزيحها بحيث يقع لونك تمامًا في تدرّجه المحدّد. تتبع درجات الرمادي عائلات الرمادي في Tailwind بدلًا من ذلك. تُعالَج الألوان التي لا يستطيع نطاق sRGB عرضها باستخدام طريقة CSS Color 4 لمطابقة نطاق الألوان، كما تفعل المتصفحات؛ ويحتفظ إخراج Tailwind 4 بقيم OKLCH، بينما تستخدم الصيغ الأخرى hex. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.

الفئة
أدوات يومية
مرات التشغيل
في المتصفح
التكلفة
مجاني · بلا تسجيل
التوفر
جاهز للاستخدام
مولّد مقياس ألوان Tailwindمعالجة محلية

تعمل بالكامل في المتصفح

50#f2f8ffoklch(97.6% 0.012 250.3)
100#dfecffoklch(93.9% 0.029 258.1)
200#bcd9ffoklch(87.6% 0.061 255.8)
300#8fbeffoklch(79.3% 0.106 256.6)
400#5e9cffoklch(69.6% 0.16 259.5)
500#3b82f6oklch(62.3% 0.188 259.8)
600#2668daoklch(54.2% 0.187 260.6)
700#1f57b6oklch(47.7% 0.163 260.6)
800#1f4997oklch(42.3% 0.137 261.4)
900#20417coklch(38.4% 0.109 261.4)
950#15274coklch(27.9% 0.073 263.2)

CSS (@theme)

@theme {
  --color-brand-50: oklch(97.6% 0.012 250.3);
  --color-brand-100: oklch(93.9% 0.029 258.1);
  --color-brand-200: oklch(87.6% 0.061 255.8);
  --color-brand-300: oklch(79.3% 0.106 256.6);
  --color-brand-400: oklch(69.6% 0.16 259.5);
  --color-brand-500: oklch(62.3% 0.188 259.8);
  --color-brand-600: oklch(54.2% 0.187 260.6);
  --color-brand-700: oklch(47.7% 0.163 260.6);
  --color-brand-800: oklch(42.3% 0.137 261.4);
  --color-brand-900: oklch(38.4% 0.109 261.4);
  --color-brand-950: oklch(27.9% 0.073 263.2);
}

تتبع الدرجات تغيّر الإضاءة والتشبّع اللوني والصبغة في لوحات Tailwind نفسها، وفق قياس OKLCH، لذلك يقترب المقياس المبني من blue-500 في Tailwind من أزرق Tailwind بفروق قليلة بالكاد يمكن ملاحظتها. تُضمَّن الألوان الخارجة عن نطاق sRGB باستخدام طريقة مطابقة النطاق اللوني في CSS Color 4.

استخدام المقياس

يُستخدم عادةً النطاق 50–100 لخلفيات الصفحات والبطاقات، و200–300 للحدود، و500–600 للأزرار والروابط، و700 لحالات التمرير، و800–950 للنص على الخلفيات الفاتحة. تحقق من أزواج النص والخلفية باستخدام مدقق تباين الألوان.

لتحويل لون واحد بين hex وRGB وHSL وOKLCH، استخدم محوّل الألوان؛ وللبدء من صورة، استخدم مستخرج لوحة الألوان.

Tailwind 4 وOKLCH

يعرّف Tailwind CSS 4 ألوانه باستخدام OKLCH، الذي يمكنه وصف ألوان تتجاوز sRGB على الشاشات ذات النطاق اللوني الواسع. يظل الناتج هنا من Tailwind 4 ضمن sRGB، لذلك تبدو الألوان متطابقة على كل شاشة.

طريقة الاستخدام

  1. اختر اللون، أو الصق رمز hex الخاص به.
  2. حدّد التدرّج الذي يمثّله، وغالبًا ما يكون 500، أو اترك للمولّد وضعه تلقائيًا.
  3. انسخ الرمز البرمجي لـ Tailwind 4، أو Tailwind 3، أو متغيرات CSS العادية.

الخصوصية والقيود

يُنشأ كل شيء في المتصفح.

أدوات ذات صلة

محوّل الألوانمدقّق التباينمستخرج اللوحة

الأسئلة الشائعة

لماذا OKLCH؟

تبدو الخطوات المتساوية في إضاءة OKLCH متساوية للعين، مهما اختلفت درجة اللون. لذلك يتطابق التباين بين تدرّج أصفر وتدرّج أزرق بُنيا بالطريقة نفسها، وهو ما لا يحققه HSL.

أي تدرّج ينبغي أن يمثّل لون علامتي التجارية؟

غالبًا 500 أو 600، حيث تحتفظ Tailwind بأقوى ألوانها. يناسب اللون الفاتح جدًا، مثل لون الباستيل، التدرّج 200 أو 300 بدرجة أفضل؛ اختر Automatic لوضعه وفقًا لإضاءته.

هل سيكون النص مقروءًا على هذه التدرّجات؟

عادةً يحتاج النص الأبيض إلى 600 أو أغمق، ويحتاج النص الداكن إلى 400 أو أفتح، لكن تحقّق من كل زوج باستخدام أداة فحص التباين.

أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا