مولّد تدرجات الألوان — بأسلوب Tailwind CSS
اختر أي لون أساسي للحصول فوراً على لوحة ألوان كاملة من 11 درجة (50، 100، 200، 300، 400، 500، 600، 700، 800، 900، 950) مطابقة لمقياس Tailwind CSS وMaterial Design. تُعرض لكل درجة تقييم تباين WCAG مقابل النص الأبيض أو الأسود. انقر على أي عينة لنسخ كود hex، أو انقر «نسخ CSS» لتصدير جميع الدرجات كخصائص مخصصة CSS.
كيف تعمل
كيف تعمل مقاييس تدرجات الألوان
مقياس تدرجات الألوان هو سلسلة منتظمة من الاختلافات الأفتح والأغمق للون الأساسي، تُستخدم لإنشاء التسلسل الهرمي البصري والتباين القابل للوصول في تصميم الواجهات. يعتمد Tailwind CSS على 11 درجة مرقمة هي: 50، 100، 200، 300، 400، 500، 600، 700، 800، 900، و950. الأرقام الصغيرة تعني ألواناً أفتح (إضاءة أعلى في HSL)، والأرقام الكبيرة تعني ألواناً أغمق. الدرجة 500 تكون عادةً أقرب إلى اللون الأساسي الذي أدخلته.
تولّد الأداة التدرجات بتحويل كود hex المُدخل إلى HSL (التدرج، التشبع، الإضاءة)، مع الحفاظ على التدرج والتشبع وتعيين كل درجة لقيمة إضاءة محددة مسبقاً. الدرجة 50 تقابل حوالي 97% إضاءة (شبه أبيض)، و500 تقابل حوالي 52% (متوسط)، و950 تقابل حوالي 12% (شبه أسود). يُنتج هذا النهج لوحات متناسقة بصرياً تحافظ على طابع اللون عبر جميع مستويات السطوع.
تقييمات تباين WCAG في اللوحة
تعرض كل درجة في اللوحة تقييم تباين WCAG (إرشادات إمكانية الوصول لمحتوى الويب) مقابل النص الأسود أو الأبيض — أيهما أكثر قابلية للقراءة. التقييمات هي: AAA (نسبة تباين ≥ 7:1، أفضل إمكانية وصول)، AA (≥ 4.5:1، مطلوب للنص العادي)، AA Large (≥ 3:1، مقبول فقط للنص الكبير ومكونات واجهة المستخدم)، وFail (< 3:1، غير كافٍ للنص). يُعدّ الامتثال لـ WCAG 2.1 AA الحد الأدنى القانوني لإمكانية الوصول في كثير من الدول.
عند بناء واجهة مستخدم بلوحة ألوان، استخدم الدرجات ذات تقييم AA أو AAA للنص على تلك الخلفيات. في الغالب، تتمتع الدرجات 50–300 بتباين قوي مع النص الداكن، بينما تتمتع الدرجات 700–950 بتباين قوي مع النص الأبيض. الدرجات الوسطى (400–600) غالباً ما تقع في فئة AA Large أو Fail للنص الصغير، مما يجعلها مناسبة للعناصر الزخرفية والحدود أو الخلفيات خلف النص الأبيض الكبير، لكن لا ينبغي استخدامها للنص العادي الصغير.
استخدام اللوحة في CSS وأنظمة التصميم
يُصدّر زر «نسخ CSS» لوحتك كخصائص مخصصة CSS (متغيرات CSS) في كتلة :root جاهزة للصق في ورقة الأنماط. على سبيل المثال، تصبح متغير blue-500 بالشكل --color-500: #3b82f6 (أو اللون الذي اخترته). يمكنك إعادة تسمية البادئة لتناسب مشروعك: --brand-500، --primary-500، --blue-500 وغيرها. تتتالى الخصائص المخصصة CSS ويمكن تجاوزها لكل مكون أو سمة.
أنظمة التصميم كـ Tailwind CSS وMaterial Design وAnt Design وChakra UI تعتمد جميعها مقاييس درجات مرقمة لأنظمة ألوانها. امتلاك مقياس متسق يتيح اتخاذ خيارات واثقة: استخدم 50 لخلفيات التمرير، و100 للحالات النشطة في السمة الفاتحة، و500 للأزرار الرئيسية، و700 لحالات التمرير على الأزرار، و900 للخلفيات الداكنة. إبقاء جميع ألوان العلامة التجارية على نفس المقياس المرقم يخلق قابلية تنبؤ ويقلل من قرارات التصميم على مستوى المكونات.
أسئلة شائعة
›ماذا تعني أرقام الدرجات (50–950)؟
تتبع الأرقام اصطلاح مقياس ألوان Tailwind CSS. الأرقام الأصغر أفتح: 50 شبه أبيض، 100 فاتح جداً، 200 و300 تدرجات فاتحة. الوسط (500) قيمة متوسطة قريبة من اللون الأصلي. الأرقام الأكبر أغمق: 700 غامق، 900 غامق جداً، 950 شبه أسود. المقياس غير خطي — إنه مضبوط بحيث تبدو خطوات الأحجام متساوية إدراكياً عبر النطاق بأكمله.
›ما الفرق بين الدرجة الفاتحة (tint) والداكنة (shade)؟
الدرجة الفاتحة هي لون ممزوج بالأبيض ليصبح أفتح، والداكنة هي لون ممزوج بالأسود ليصبح أغمق. بمصطلحات HSL، تمتلك الدرجات الفاتحة قيم إضاءة أعلى بينما الداكنة قيم أقل مع الحفاظ على نفس التدرج. الأرقام 50–400 في هذا المقياس هي درجات فاتحة (أفتح من الأساسي)، بينما 600–950 هي درجات داكنة (أغمق من الأساسي). الدرجة 500 هي تقريباً اللون الأساسي نفسه.
›كيف تولّد هذه الأداة الدرجات؟
تحوّل الأداة لون hex إلى HSL (التدرج، التشبع، الإضاءة). تبقي التدرج والتشبع ثابتَين بينما تعيّن كل رقم درجة لقيمة إضاءة مستهدفة: الدرجة 50 ← 97% إضاءة، الدرجة 500 ← 52%، الدرجة 950 ← 12%. يُحوَّل الناتج بعد ذلك إلى hex. تحافظ هذه الطريقة على طابع اللون (الدفء، البرودة، الحيوية) عبر جميع الدرجات.
›ما هو WCAG ولماذا تعرض الدرجات تقييمات؟
يُعرّف WCAG (إرشادات إمكانية الوصول لمحتوى الويب) الحد الأدنى من نسب التباين للنص المقروء. AA يتطلب 4.5:1 للنص العادي؛ AAA يتطلب 7:1. يُشير تقييم التباين لكل درجة إلى ما إذا كان النص الأسود أو الأبيض على تلك الخلفية يستوفي معيار AA أو AAA. يساعدك هذا في اختيار الدرجات الآمنة للنص وتلك التي ينبغي استخدامها للعناصر الزخرفية فحسب.
›كيف أستخدم هذه اللوحة في Tailwind CSS؟
يتيح Tailwind تعريف ألوان مخصصة في tailwind.config.js. أضف الدرجات تحت theme.extend.colors: colors: { brand: { 50: '#your-50-hex', 100: '#your-100-hex', ... } }. يمكنك حينئذٍ استخدام فئات مثل bg-brand-100، وtext-brand-700، وborder-brand-300. في Tailwind v4 مع إعداد CSS-first، الصق مخرجات متغيرات CSS في تعريف السمة.
›لماذا لا تبدو الدرجة 500 لون اختياري مطابقة تماماً لمدخلي؟
تستهدف الأداة قيم إضاءة محددة لكل درجة — الدرجة 500 تستهدف حوالي 52% إضاءة HSL. إن كان لونك المُدخل بإضاءة مختلفة (مثلاً 70% لو كان فاتحاً)، ستُعدَّل الدرجة 500 نحو 52%. هذا يُنشئ مقياساً متسقاً لكنه يعني أن الدرجة 500 قد لا تكون مطابقة لمدخلك الأصلي. للحصول على لونك الدقيق عند الدرجة 500، يمكنك ضبط hex يدوياً — سيُولَّد المقياس بالنسبة لما تُدخله.
›هل يمكنني استخدامه مع الخصائص المخصصة CSS؟
نعم — انقر «نسخ CSS» للحصول على كتلة :root جاهزة للاستخدام تحتوي جميع الدرجات الـ 11 كخصائص مخصصة. في CSS، ارجع إليها بـ var(--color-500)، var(--color-50) وهكذا. يمكنك إعادة تسمية البادئة --color- بأي شيء يناسب مشروعك (--brand-، --primary-، --blue-). الخصائص المخصصة تتتالى ويمكن تحديد نطاقها لمكون أو تجاوزها في استعلام وسائط لوضع الظلام.
›كيف تختلف هذه الدرجات عن دالة CSS color-mix()؟
دالة CSS color-mix() (مدعومة في المتصفحات الحديثة) تمزج لونين بنسبة مئوية، شبيهة بمزج الطلاء. تستخدم هذه الأداة مقياس إضاءة محدداً مسبقاً (مبنياً على HSL) ينتج مقياس نظام تصميم أكثر تحكماً وقابلية للتنبؤ. color-mix() أفضل للمزج الفردي (مثل مزج لون علامتك التجارية مع 20% أبيض)، بينما تُولّد هذه الأداة لوحة كاملة ومنهجية لنظام التصميم. كلا النهجين له مكانه بحسب حالة الاستخدام.
أدوات ذات صلة
آخر تحديث: