مولد سلم الدرجات اللونية (Tint & Shade)
حوّل لونًا واحدًا للعلامة التجارية إلى سلم نظام تصميم من 50 إلى 900 — عشر درجات فاتحة وداكنة بأكواد hex، انقر للنسخ.
737 مشاهدة
انقر على عينة لنسخ كودها السداسي عشري
من لون واحد إلى نظام كامل
أنظمة التصميم (مثل Tailwind وMaterial) لا تكتفي أبدًا بلون علامة تجارية واحد — بل تُنشئ سلمًا من 50 (قريب من الأبيض) إلى 900 (قريب من الأسود)، مع وضع لون العلامة عند حوالي 500. الدرجات الفاتحة (tints) تمزج اللون الأساسي نحو الأبيض؛ والدرجات الداكنة (shades) تمزجه نحو الأسود. يُنتج هذا المولد المحطات القياسية العشر بأكواد hex ومتغيرات CSS؛ انقر أي عينة لنسخها.
كيف يُستخدم السلم عمليًا: 50-100 للخلفيات وتعبئة التحويم، 200-300 للحدود، 500-600 للأزرار والروابط، 700-900 للنص على خلفيات فاتحة. اقتران درجات من نفس السلم يحافظ على انسجام الواجهة، والدرجات ≥700 مع ≤100 عادةً ما تجتاز تباين WCAG — تحقق من الزوج الدقيق باستخدام فاحص التباين لدينا.
الأسئلة الشائعة
لماذا يبدو لوني الزاهي باهتًا في الدرجات الفاتحة؟
المزج نحو الأبيض الخالص يستنزف التشبع — وهذا مرغوب فيه للخلفيات. إذا أردت درجات فاتحة أكثر حيوية، اجعل اللون الأساسي أكثر تشبعًا قبل التوليد.
أين يجب أن يقع لون علامتي على السلم؟
استهدف 500-600. إذا كان لون علامتك فاتحًا أو داكنًا جدًا، ضعه عند الدرجة التي تطابق سطوعه ودع المولد يملأ الاتجاهين.
هل هذه القيم نفسها التي يعطيها Tailwind؟
ليست متطابقة — لوحات Tailwind مضبوطة يدويًا لكل درجة لون. يستخدم هذا السلم مزجًا متسقًا، وهو قابل للتنبؤ لألوان العلامات المخصصة وقريب بما يكفي للمشاريع الحقيقية.
أدوات مشابهة
الإبلاغ عن مشكلة
مولد سلم الدرجات اللونية (Tint & Shade)