palette مولد سلم الدرجات اللونية (Tint & Shade) star

كيف يُبنى السلم

تحدد نظرية الألوان ثلاث طرق لتعديل لون أساسي بشكل منهجي في نموذج HSL: Tint (الدرجة الفاتحة) (المزج نحو الأبيض، رفع قيمة السطوع Lightness — يبدو اللون أفتح)، وShade (الدرجة الداكنة) (المزج نحو الأسود، خفض قيمة السطوع — يبدو اللون أغمق وأكثر عمقًا)، وTone (الدرجة المطفأة) (المزج نحو الرمادي، تقليل التشبع Saturation مع بقاء السطوع دون تغيير يُذكر — يبدو اللون باهتًا أو "مغبرًا"). يُنتج هذا المولد نصف هذا الثالوث المتعلق بـTint وShade: بدءًا من لونك الأساسي، يحرّك السطوع صعودًا نحو الأبيض في المحطات الأفتح، ونزولًا نحو الأسود في المحطات الأغمق، لينتج سلمًا من عشر خطوات من 50 إلى 900 تستخدمه أنظمة تصميم مثل Tailwind وMaterial، مع تثبيت لون العلامة التجارية الأصلي عند المحطة 500 تقريبًا.

مثال ملموس: بدءًا من لون أزرق قريب من hsl(217, 91%, 60%)، تقع المحطة 50 قرب hsl(217, 91%, 97%) — أبيض تقريبًا، ولا يتبقى من اللون سوى أثر خفيف — بينما تقع المحطة 900 قرب hsl(217, 60%, 20%) — داكنة جدًا، مع انضغاط التشبع كلما اقترب اللون من الأسود. تحصل كل محطة على كود hex ومتغير CSS جاهز للاستخدام؛ والنقر على أي عينة لونية ينسخها.

الفائدة العملية من توليد سلم كامل بدلًا من تقدير عدد قليل من الدرجات بالعين هي الاتساق: تُشتق كل محطة من اللون الأساسي نفسه وبقاعدة المزج نفسها، لذا فإن حدود بطاقة عند المحطة 200 وحالة تحويم عند المحطة 100 تبدوان دائمًا وكأنهما تنتميان إلى العائلة اللونية نفسها، حتى بعد أشهر عندما يحتاج مصمم آخر أو مكوّن آخر إلى درجة جديدة من لون العلامة التجارية نفسه.

ما يجب معرفته

• Tint وShade وTone ليست العملية نفسها: تنفذ هذه الأداة Tint وShade فقط — أي تغييرات السطوع. أما Tone الحقيقي فيقلل التشبع مع إبقاء السطوع ثابتًا تقريبًا، منتجًا نسخة مطفأة من اللون بدلًا من نسخة أفتح أو أغمق؛ وهذا التعديل المنفصل ليس ما تطبقه هذه الأداة.
• أين تُستخدم كل محطة: 50-100 لخلفيات الصفحة وتعبئات التحويم، 200-300 للحدود والفواصل، 500-600 للأزرار والروابط (لون العلامة التجارية نفسه)، 700-900 لنص المحتوى على خلفيات فاتحة.
• التباين ليس تلقائيًا: اقتران محطة ≥700 بمحطة ≤100 يجتاز عادةً تباين WCAG AA، لكن "عادةً" ليست "دائمًا" — تحقق من الزوج الدقيق الذي تنوي نشره باستخدام فاحص تباين مخصص.
• ليست مطابقة للوحات Tailwind الخاصة: ألوان Tailwind المدمجة مضبوطة يدويًا لكل درجة لون بحسب التصميم، بينما تطبق هذه الأداة صيغة مزج واحدة متسقة على أي مدخل — قابلة للتنبؤ لألوان العلامات المخصصة، وقريبة بما يكفي للواجهات الحقيقية.
• الوضع الداكن يعكس السلم عادةً: الخلفية التي تستخدم المحطة 50 في الوضع الفاتح غالبًا ما تقابل شيئًا قريبًا من المحطة 900 في الوضع الداكن، والعكس صحيح — توليد السلم الكامل مسبقًا يعني أن كلا النمطين مغطى بالفعل.