مولد مقياس ألوان Tailwind CSS
مرشد
مولد مقياس ألوان Tailwind CSS
أدخل لونًا من نوع hex واحصل فورًا على مخطط كامل من 50 إلى 950 بأسلوب Tailwind مع خطوات متساوية من حيث الظواهر البصرية. يتم بناء المقياس في مساحة اللون OKLCH، لذا يشعر كل توقف كمُتقدم بدرجة سطوع متساوية للعين — وليس مجرد انخفاض خطي في RGB أو HSL.
انسخ النتيجة مباشرة إلى tailwind.config.js، وانسخها كخصائص CSS أو متغيرات SCSS، أو استخراجها كـ JSON لمسار مُدخلات التصميم.
كيفية استخدام
- اختر لونًا أساسيًا باستخدام مُختار الألوان، أو أدخل قيمة hex مثل
#464aff. - أعطِ المخطط اسمًا (مثلاً
primary,brand، أوaccent) — يصبح هذا المفتاح في الكود المُستخرج. - اختر Tailwind v4 (OKLCH) لـ
oklch()CSS المعاصر، أو Tailwind v3 (hex) لإخراج hex الكلاسيكي. - قم بتشغيل توقف 950 على أو خارج، وانقل مقياس التباين لأعلى أو لأسفل لزيادة أو تقليل التباين.
- اختر صيغة التصدير — تكوين Tailwind، أو خصائص CSS، أو متغيرات SCSS، أو JSON — ثم انسخ أو احفظ الكود المُنشأ.
- انقر على أي لون في المُعرض للحصول على قيمته من نوع hex ونسخها إلى الحافظة.
خصائص
- الرياضيات المُحسّنة لمساحة OKLCH – تُستخدم لتوازي الوضوح والدرجة في مساحة اللون OKLCH بحيث يشعر كل توقف في المدى من 50 إلى 950 كخطوة متساوية للعين.
- مقياس كامل من 50 إلى 950 – تُنتج المقياس الكامل المكون من 11 توقف، مع خيار إزالة توقف 950 إذا كنت بحاجة فقط إلى التوقف الكلاسيكي 10.
- مُعرض توقف حي – اعرض كل لون بسرعة، انقر على أي لون لنسخ قيمته من نوع hex، وقم بتعديل المقياس فورًا أثناء الكتابة.
- مدقق تباين WCAG – يتم تقييم كل توقف على خلفية بيضاء وسوداء مع شهادات نجاح أو فشل من الدرجة AA أو AAA.
- أهداف تصدير متعددة – إخراج كـ
tailwind.config.js,:rootمتغيرات CSS، متغيرات SCSS، أو مصطلحات تصميم بسيطة. - مُحكم التباين – مقياس واحد يُستخدم لضبط التباين في جميع التوقفات، بحيث يمكنك تحسين الوضوح أو تقليل التباين دون تغيير اللون.
- مُضمن في نطاق الألوان – يتم تثبيت الدرجة التباينية عند كل مستوى للسطوع بحيث تُظهر القيم المُولدة دائمًا داخل نطاق sRGB.
التعليمات
-
ما هو مساحة الألوان OKLCH؟
OKLCH هو نظام لون مُحسّن يُستمد من نموذج Oklab. يُمثل اللون كقيم ثلاثية — L (السطوع المُحسوس)، C (الدرجة، أو درجة الألوان)، وH (زاوية اللون). بخلاف HSL، تم تصميم OKLCH بحيث يُنظر إلى تغيير معين في L كمقدار متساوي من التغيير في السطوع بغض النظر عن اللون. وهذا يجعله مناسبًا جدًا لبناء مقياس ألوان حيث يجب أن يشعر كل خطوة كمُتَوازٍ.
-
لماذا يُفضل OKLCH على HSL في مقياس الألوان؟
تم تصميم HSL لتكون سهلة الحساب، وليس لتتناسب مع الوعي البشري. في HSL، يمكن أن تبدو الألوان ذات نفس القيمة L بشكل متفاوت في السطوع — يُنظر إلى ألوان القيمة 50% كأعلى سطوع مقارنة بألوان الأزرق ذات نفس القيمة. يُعالج هذا السؤال من خلال نموذج يُمثل كيفية رؤية العين للسطوع، لذا فإن المقياس المُبنى في OKLCH يُنتج ألوان متوازية بصرية لا يمكن مطابقتها من قبل HSL.
-
ما المقصود بـ "التماثل البصري"؟
يُعتبر نظام اللون متماثلًا بصريًا عندما تُمثل المسافات العددية تغييرات متساوية في الوعي البشري. بعبارة أخرى، إذا قمت بتحريك قيمة السطوع بنفس الكمية مرتين، يجب أن يرى العين هذين التغييرين كمُتَوازٍ. يُعتبر OKLCH تقريبًا متماثلًا بصريًا، وهذا هو السبب في أن يُنتج تدرجات سلسة ومقسومة بشكل متساوٍ.
-
ما معنى الأرقام من 50 إلى 950 في مخططات Tailwind؟
تُسمّي Tailwind كل لون في المخطط برقم من 50 (اللون الأخف) إلى 950 (اللون الأسود)، مع أن 500 يمثل اللون الأساسي عادةً. الأرقام الأقل تُظهر ألوان أخف، والأرقام الأعلى تُظهر ألوان أعمق. يُعطي المقياس المكون من 11 توقف (50، 100، 200، 300، 400، 500، 600، 700، 800، 900، 950) مصطلحًا متسقًا لكل لون في النظام.
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
أدوات يجب تجربتها
عرض الكلشارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
