مولد مقياس ألوان 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 إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
أدوات يجب تجربتها
عرض الكلشارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
