درجات الألوان والظلال

حول هذه الأداة

ينشئ مولد الدرجات الفاتحة والداكنة درجات أفتح (بمزج الأبيض) وأغمق (بمزج الأسود) لأي لون أساسي على 5 أو 10 أو 20 خطوة، مع مخرجات بصيغة متغيرات CSS.

طريقة الاستخدام

1. اختر لونًا أساسيًا.
2. اختر 5 أو 10 أو 20 خطوة.
3. انقر أي عينة لنسخ قيمة hex الخاصة بها.
4. انقر Copy as CSS Variables لتصدير السلّم كاملًا.

معلومات مفيدة

• الدرجة الفاتحة (tint) لون ممزوج بالأبيض، والدرجة الداكنة (shade) لون ممزوج بالأسود.
• يمزج المولد الألوان بخطوات RGB متساوية، فتغيّر كل خطوة اللون بالمقدار نفسه.
• تستخدم أنظمة التصميم مثل Tailwind سلّمًا من 50 إلى 900 مبنيًا من الدرجات الفاتحة والداكنة لكل لون من ألوان العلامة التجارية.
• افحص تباين ألوان النصوص المأخوذة من السلّم، لأن الخطوات الوسطى كثيرًا ما تُخفق في WCAG AA على الخلفية البيضاء.

تعمل بالكامل داخل متصفحك — لا يتم رفع أو حفظ أي شيء تُدخله.

الأسئلة الشائعة