لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

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

لونمطور

إعلان · حذف؟

مدخل

عملية تلقائية

اللون الأساسي

منتقي الألوان

عرافة

اسم

يُستخدم كمفتاح المتغير في إخراج CSS، SCSS، وJSON.

طريقة المزيج

طريقة

يُعطي OKLCH تدرجًا أكثر سلاسة وذو مظهر طبيعي. أما HSL وRGB فهي أبسط لكنها قد تبدو غير متساوية.

تنسيق التصدير

شكل

انتاج

جانب العميل

إعلان · حذف؟

مرشد

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

اختر لونًا هكس أو RGB واحصل فورًا على 10 تدرجات (مزيج اللون مع الأبيض) و10 تدرجات سوداء (مزيج مع الأسود) كأيقونات مرئية. انقر على أي أيقونة لنسخ رمزها الهكس، أو استيراد المجموعة الكاملة كخصائص CSS، متغيرات SCSS، JSON، أو قائمة هكس بسيطة.

كيفية استخدام

اختر لونًا أساسيًا باستخدام مُختار الألوان، أو الصق أي قيمة هكس (3 أو 6 أرقام) في حقل الهكس.
اختياري: تغيير اسم المتغير (المستخدم في مفاتيح إخراج CSS/SCSS/JSON).
اختر طريقة المزيج. يعطي OKLCH تدرجًا أكثر سلاسة، وHSL هي الطريقة الكلاسيكية في الويب، وRGB هي المزيج الخطي الأبسط.
اختر تنسيق التصدير. يتم تحديث التصدير بشكل مباشر عند تغيير أي شيء.
انقر على أي أيقونة لنسخ رمزها، أو استخدم زر النسخ / التحميل في لوحة التصدير.

خصائص

10 تدرجات + 10 تدرجات سوداء – مجموعتين من الأيقونات بزيادة 10%، تبدأ من مزيج خفيف 10% إلى مزيج تقريبًا نقي 100%.
ثلاث طرق مزيج – OKLCH لخطوات متساوية من حيث الإحساس، HSL لتحويلات لونية تُحافظ على اللون، أو مزيج مباشر RGB.
أيقونات قابلة للنسخ بالانقر – يُظهر كل خلية رمزها الهكس ويُنسخ إلى الحافظة ببساطة عند النقر.
أعداد متعددة للتصدير – خصائص CSS، متغيرات SCSS، مخطط JSON، أو قائمة هكس بسيطة قابلة للقراءة.
العرض المباشر – كل تغيير في اللون أو الاسم أو الطريقة أو التنسيق يُعيد توليد الأيقونات والكود فورًا.
تحميل التصدير – احفظ المخطط المُولَّد في ملف بامتداد مناسب لتنسيقك.

 التعليمات

ما الفرق بين التدرج والظلال؟

يُعد التدرج نتاج مزيج اللون مع الأبيض، مما يجعله أخف وأكثر نعومة. أما الظلال فهي نتاج مزيج اللون مع الأسود، مما يجعله أعمق وأكثر تأثيرًا. معًا يشكلان مقياس القيم لون واحد.
لماذا يظهر OKLCH عادةً أكثر سلاسة من RGB أو HSL؟

تم تصميم OKLCH لتتناسب مع طريقة رؤية العين للإضاءة واللون، لذا فإن خطوات الأرقام المتساوية تبدو متساوية من حيث الظواهر البصرية. أما RGB وHSL فيعملان في مساحة الألوان المُعدة للجهاز، لذا فإن خطوة رقمية متساوية قد تبدو أكبر أو أصغر حسب الموضع على المقياس.
ما الفرق بين التدرجات والظلال وبين مخطط الألوان؟

يُعد المخطط مجموعة مُختارة من الألوان المتماسكة (مثلاً، لون أساسي، لون مُميز، وألوان محايدة). أما التدرجات والظلال فهي تغييرات لون واحد على المحور بين الوضوح والظلام. يُستخدم أنظمة واجهة المستخدم عادةً الجمع بين كلاهما: اختيار عدد قليل من الألوان الأساسية، ثم إنشاء تدرجات وظلال لكل لون.