Color Token Generator

لماذا يحتاج كل نظام تصميم إلى سلم ألوان

سلم الألوان هو العمود الفقري للغة بصرية متسقة. بدونه، يتخذ المصممون والمطورون قرارات عشوائية — «أزرق أغمق قليلاً لحالة التمرير» أو «نسخة فاتحة جداً لخلفية البطاقة» — مما ينتج عشرات القيم السداسية المتشابهة دون أي علاقة منهجية. مع مرور الوقت، يتراكم الكود بقيم ألوان متفردة يستحيل تحديثها دفعةً واحدة.

يحل سلم الـ11 درجة المُصمَّم جيداً هذه المشكلة: تخدم الدرجات الفاتحة (50–200) الأسطح والخلفيات الملونة، وتحمل الدرجات المتوسطة (300–600) العناصر التفاعلية كالأزرار والروابط وحلقات التركيز، وتتولى الدرجات الغامقة (700–950) النص والحدود عالية التباين. كل قرار يرتبط بالسلم، وتغيير لون العلامة التجارية يعني تحديث قيمة أساسية واحدة بدلاً من البحث في مئات الرموز السداسية.

اصطلاح سلم الألوان في Tailwind

رسَّخ Tailwind CSS اصطلاح التسمية الرقمية بـ11 درجة — 50، 100، 200 حتى 900، 950 — وأصبح منذ ذلك الحين معياراً تبنَّاه Radix UI وshadcn/ui وMaterial Design 3 ومعظم بيئات مكتبات المكونات الحديثة. الميزة هي القابلية للتنبؤ: المطور الذي استخدم أي من هذه الأنظمة يعرف فوراً أن رمز المستوى 500 هو اللون الأساسي المتوسط، والمستوى 100 هو تدرج فاتح جداً، والمستوى 800 هو ظل غامق للاستخدام على الخلفيات الفاتحة.

تولِّد هذه الأداة سلالم متوافقة بصرياً مع لوحات Tailwind المدمجة (الأزرق والأحمر والأخضر وغيرها)، مما يسهِّل إضافة لون مخصص للعلامة التجارية يندمج بشكل طبيعي مع قيم Tailwind الافتراضية. يتطابق تنسيق تصدير Tailwind تماماً مع ما يتوقعه theme.extend.colors في tailwind.config.js.

فهم نسب تباين WCAG

تُحسب نسبة التباين بين لون النص وخلفيته من إضاءتهما النسبية — مقياس لمقدار السطوع الظاهر لكل لون لعين الإنسان. صيغة WCAG هي (L1 + 0.05) / (L2 + 0.05)، حيث L1 هي إضاءة اللون الأفتح وL2 إضاءة الأغمق. تتراوح النتيجة من 1:1 (ألوان متطابقة، لا تباين) إلى 21:1 (نص أسود على خلفية بيضاء، أقصى تباين).

يتطلب WCAG AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير (18 نقطة فما فوق). في هذه الأداة، تُحسب نسب تباين النص الأبيض والأسود لكل عينة وتُعرض كشارات W✓ وB✓. عادةً ما تفشل درجات السلم المتوسطة (400–600) في كلا العتبتين — فهي مصممة للتعبئة الزخرفية والنبرات التفاعلية لا لخلفيات النص.

فضاءات الألوان: HSL وOKLCH وأهميتها

تعمل مولدات اللوحات التقليدية في نموذج HSL — الصبغة والتشبع والإضاءة. يتسم HSL بالبساطة ودعم واسع، غير أنه غير متجانس إدراكياً: تبدو درجة الإضاءة الرقمية نفسها مختلفةً اختلافاً كبيراً باختلاف الصبغة. خطوة من 50% إلى 60% إضاءة تبدو قفزة كبيرة في اللون الأزرق لكنها خطوة صغيرة في الأصفر، لأن العين البشرية تدرك الألوان بشكل مختلف عبر الطيف.

OKLCH هو فضاء لوني متجانس إدراكياً، حيث تبدو خطوات الإضاءة الرقمية المتساوية متساويةً للعين البشرية بصرف النظر عن الصبغة. انتقل Tailwind CSS v4 إلى OKLCH داخلياً لهذا السبب. يُنتج OKLCH سلالم تبدو فيها كل درجة خطوةً متجانسة حقيقية نحو الفتاحة أو الغمقة.

التصدير إلى CSS وTailwind وSCSS وJSON وDTCG

يستخدم تصدير متغيرات CSS نمط التسمية --color-N داخل :root { }. يُدرَج تصدير Tailwind مباشرةً في theme.extend.colors في tailwind.config.js — أعد تسمية 'color' باسم رمزك (مثلاً 'primary' أو 'brand'). يستخدم تصدير SCSS بناء جملة المتغير $color-N المتوافق مع Sass وLess. يتبع تصدير JSON تنسيق رمز DTCG من W3C وهو متوافق مع Style Dictionary وTheo وSupernova.

تُخرج جميع التنسيقات الأربعة نفس قيم hex الـ11، لذا لا يتطلب التبديل بينها بعد التوليد أي تغييرات. انقر على أي عينة منفردة لنسخ قيمة hex الخاصة بها مباشرةً إلى الحافظة.

المقارنة مع Coolors وAdobe Color وMaterial Design Color Tool

Coolors.co أداة اكتشاف لوحات مصممة لتوليد تركيبات عشوائية من 5 ألوان. رائعة للإلهام، لكنها لا تنتج سلالم رموز ولا تُولِّد إعدادات Tailwind ولا تعرض شارات تباين WCAG لكل عينة.

Adobe Color يوفر توليد تناسق اللون من عجلة الألوان وبعض خيارات التصدير، لكنه يتطلب حساب Adobe لحفظ اللوحات وتصديرها. لا يُولِّد سلم ألوان متوافقاً مع Tailwind أو JSON بصيغة DTCG.

أداة Material Design Color Tool من Google تُنتج سلماً من 10 درجات (بدون الدرجة 50) ومصممة خصيصاً للتصميم بأسلوب Material Design — لا تُعيَّن نتائجها بسلاسة على Tailwind أو بيئات أخرى.

هذه الأداة تُولِّد سلماً كاملاً من 11 درجة، وتعرض شارات WCAG W✓/B✓ على كل عينة، وتُصدِّر بأربعة تنسيقات، ولا تتطلب تسجيل دخول. كل شيء يعمل في متصفحك — لا تُرفع بيانات الألوان إلى أي خادم.