CodeKitHubما هي هذه الأداة؟
سلم الدرجات هو سلسلة من تنويعات لون واحد بمستويات إضاءة مختلفة، تُستخدم في تصميم واجهات المستخدم لأشياء مثل حالات التمرير، الحالات المعطلة، الحدود، والخلفيات التي تحتاج إلى الارتباط بلون العلامة التجارية دون أن تكون مطابقة له تمامًا.
تحوّل هذه الأداة لونك الأساسي إلى HSL، وتثبّت الصبغة والتشبع، وتُدرِّج الإضاءة من نحو 95% (ظل يقارب الأبيض) وصولاً إلى نحو 10% (درجة تقارب الأسود)، مع وضع لونك الأصلي في موضعه الطبيعي في منتصف السلم.
لماذا تستخدمها؟
- يُنشئ سلمًا بأسلوب نظام التصميم (مثل سلم 50/100/200…/900 في Tailwind) من أي لون واحد، وليس فقط من لوحة جاهزة ثابتة.
- اختر 7 أو 9 أو 11 خطوة حسب مستوى الدقة الذي تحتاجه في السلم.
- تعرض كل خطوة كود HEX الدقيق ونسبة الإضاءة المئوية — انقر للنسخ.
- يحافظ على ثبات الصبغة والتشبع عبر السلم بأكمله، بحيث تبدو جميع الدرجات مرتبطة بوضوح باللون الأساسي بدلاً من الانجراف نحو الرمادي.
- مجاني وفوري ومحلي بالكامل.
كيفية الاستخدام
- اختر لونك الأساسي باستخدام منتقي الألوان أو بكتابة كود HEX.
- اختر عدد الخطوات التي تريدها في السلم (7 أو 9 أو 11).
- اقرأ كود HEX ونسبة الإضاءة المئوية لكل درجة مباشرة على عينتها.
- انقر على أي عينة لنسخ كود HEX الخاص بها.
مثال
الإدخال
#3B82F6 (أزرق متوسط)، 9 خطواتالناتج
9 درجات من ظل يقارب الأبيض (~95% إضاءة) إلى درجة تقارب الأسود (~10% إضاءة)، مع وضع #3B82F6 نفسه كخطوة وسطىتبقى الصبغة والتشبع ثابتين عبر الخطوات التسع — تتغير الإضاءة فقط — لذا تبدو كل درجة بوضوح جزءًا من نفس عائلة اللون.
الأسئلة الشائعة
هل هذا نفس النظام الذي تستخدمه Tailwind CSS لسلالمها اللونية؟
إنها نفس الفكرة الأساسية (صبغة/تشبع ثابتان، إضاءة متغيرة) لكنها ليست نسخة طبق الأصل من لوحة Tailwind المحددة — سلالم 50-900 في Tailwind ضبطها مصممون يدويًا، ولم تُولَّد بصيغة واحدة. تمنحك هذه الأداة بنية مشابهة مُولَّدة من أي لون تختاره، وهي مفيدة عندما لا يكون لونك الأساسي من الألوان الجاهزة في Tailwind.
لماذا يبدو لوني متشابهًا تقريبًا في خطوتين متجاورتين؟
يمكن أن يحدث هذا بالقرب من الطرفين الفاتح جدًا أو الغامق جدًا من السلم، حيث تتغير الإضاءة المُدرَكة أبطأ مما توحي به النسبة المئوية الرقمية (خاصية معروفة في إدراك الإنسان للألوان، وليست خاصة بهذه الأداة). اختيار خطوات أقل (7 بدلاً من 11) يباعد بين قيم الإضاءة أكثر ويقلل العينات شبه المتطابقة.
هل يمكنني استخدام هذه الدرجات مباشرة كخصائص CSS مخصصة؟
نعم — انسخ كل كود HEX والصقه في متغيرات CSS الخاصة بك (مثل --color-brand-100 إلى --color-brand-900)، مع مطابقة موضع الدرجة في السلم مع نظام التسمية الذي يستخدمه مشروعك.
هل يجب أن أستخدم هذه الأداة أم خلاط الألوان؟
إذا كنت تصنع نسخًا أفتح وأغمق من لون واحد — حالات التمرير، خلفيات خفيفة، حدود مرتبطة بلون العلامة التجارية — استخدم مولّد الدرجات هذا. إذا كنت بحاجة بدلاً من ذلك إلى اللون الواقع بين لونين مختلفين (مثل خطوة بين أزرقك الأساسي وبرتقالي ثانوي)، استخدم خلاط الألوان، الذي يستوفي قنوات RGB للونين بأي نسبة بدلاً من تغيير إضاءة لون واحد.
ماذا يحدث إذا كان لوني الأساسي فاتحًا جدًا أو غامقًا جدًا بالفعل؟
يقع اللون الأساسي دائمًا في الصف الأوسط، مع ظلال تتصاعد إلى نحو 95% إضاءة فوقه ودرجات تتراجع إلى نحو 10% تحته. إذا كان لونك الأساسي يقارب الأبيض بالفعل، ينضغط نصف الظلال في السلم إلى نطاق إضاءة ضيق (صفوف شبه متطابقة) بينما ينتشر نصف الدرجات على نطاق واسع — والعكس صحيح للون أساسي غامق جدًا. للحصول على أكثر سلم متساوي التوزيع، ابدأ بنسخة متوسطة الإضاءة من لونك (تقريبًا 40-60% إضاءة).
هل يمكنه أيضًا توليد نغمات (اللون ممزوجًا بالرمادي)؟
لا — تُغيّر هذه الأداة الإضاءة فقط مع تثبيت التشبع، مما ينتج ظلالاً ودرجات وليس نغمات. إذا أردت سلمًا أكثر خفوتًا، خفِّض تشبع لونك الأساسي أولاً (اختر نسخة أكثر رمادية في منتقي الألوان) وأنشئ السلم منها؛ سترث كل خطوة التشبع المنخفض.