مولّد الظلال والتدرجات
أنشئ درجات أفتح وأغمق من أي لون أساسي. ابنِ مقياساً لونياً كاملاً لنظام التصميم الخاص بك.
اللون الاساسي
المستويات
الصبغات (افتح - ممزوج بالابيض)
#EBF3FE10%
#C4DAFC30%
#9DC1FB50%
#76A8F970%
#4F8FF790%
الاساسي
#3B82F6الاساسي
الظلال (اغمق - ممزوج بالاسود)
#3575DD90%
#295BAC70%
#1E417B50%
#12274A30%
#060D1910%
التدرج الكامل (من الافتح الى الاغمق)
حول هذه الأداة
يقوم منشئ الصبغات والظلال بانشاء متغيرات افتح وادكن من اي لون اساسي. يتم انشاء الصبغات بمزج اللون الاساسي مع الابيض (اضافة الاضاءة)، بينما يتم انشاء الظلال بمزجه مع الاسود (تقليل الاضاءة).
تقوم الاداة بانشاء ما يصل الى 5 مستويات من الصبغات و5 مستويات من الظلال، بالاضافة الى اللون الاساسي الاصلي، مما يوفر لك لوحة الوان من 11 خطوة مركزها الدرجة اللونية المختارة. انقر على اي عينة لنسخ رمز hex الخاص بها.
كيفية الاستخدام
- اختر لونا اساسيا باستخدام منتقي الالوان او اكتب رمز hex.
- استخدم ازرار العينات لتجربة الالوان المحددة مسبقا بسرعة.
- اضبط عدد المستويات (3-5) للتحكم في عرض لوحة الالوان.
- انقر على اي عينة لنسخ رمز hex. استخدم نسخ الكل للتدرج الكامل.
حالات الاستخدام
تحتاج انظمة التصميم الى مقياس لوني منهجي لكل لون من الوان العلامة التجارية. يقوم مصممو واجهة المستخدم بانشاء حالات التحويم والتنشيط والتعطيل من لون عمل واحد. ينشئ مطورو الواجهة الامامية متغيرات الوان متسقة.
الأسئلة الشائعة
- ما الفرق بين الصبغة والظل؟ — الصبغة تمزج اللون مع الابيض (افتح)؛ الظل يمزج مع الاسود (اغمق). النغمة تمزج مع الرمادي ولا تنشا هنا.
- كيف يتم حساب المستويات؟ — يمزج كل مستوى اللون الاساسي مع الابيض او الاسود بنسب 10% و30% و50% و70% و90%، مما يوفر خطوات بصرية متسقة.
- هل يمكنني الحصول على متغيرات CSS من هذا؟ — المخرجات هي رموز hex. يمكنك لصقها في CSS الخاص بك كـ --color-500 و--color-400 وما الى ذلك.