مولد لوحة ألوان HEX
ابدأ بلون HEX وأنشئ لوحة كاملة بدرجات وتناغم ورموز دلالية ومتغيرات CSS جاهزة.
إعدادات سريعة
اللون الأساسي (HEX)
#2563EB
ألوان التناغم
أساسي
لون العلامة والدعوة الرئيسي
#2563EBثانوي
لون داعم للعلامة
#6C59D5إبراز
إبرازات عالية التباين
#E3AA2Dالخلفية
درجة خلفية الصفحة
#F7F7F8السطح
البطاقات وحاويات السطح
#E8E9EEالنص
لون النص الافتراضي
#1B212C:root {
--color-primary: #2563EB;
--color-secondary: #6C59D5;
--color-accent: #E3AA2D;
--color-background: #F7F7F8;
--color-surface: #E8E9EE;
--color-text: #1B212C;
--color-primary-50: #F4F6FB;
--color-primary-100: #D1DBF1;
--color-primary-200: #ABBFEB;
--color-primary-300: #82A2E7;
--color-primary-400: #5583E8;
--color-primary-500: #2563EB;
--color-primary-600: #124BC7;
--color-primary-700: #0D3794;
--color-primary-800: #082462;
--color-primary-900: #04112F;
}أنشئ نظام ألوان كاملًا من رمز HEX واحد
تحول الأداة لونًا أساسيًا إلى لوحة منظمة لحظيًا. أدخل قيمة أو اختر لونًا أو ولّد لونًا عشوائيًا، وشاهد التناغم والدرجات والرموز ومتغيرات CSS.
الخطوة 1: أدخل أو اختر لونًا
أدخل رمز HEX أو اختر من المنتقي أو انقر «لون عشوائي».
الخطوة 2: اعرض اللوحة
شاهد اللون الأساسي مع ألوان متناغمة تكمل تصميمك.
الخطوة 3: استكشف الدرجات والرموز
راجع مقياس 50–900 للخلفيات والحدود والحالات والنص، مع رموز دلالية للواجهة.
الخطوة 4: انسخ متغيرات CSS
انسخ المتغيرات أو الأدوار الدلالية بنقرة والصقها في ملف الأنماط.
لوحات منظمة لمشاريع حقيقية
تتجاوز الأداة العينات الأساسية وتنشئ لوحات جاهزة للأنظمة وواجهات المنتجات والهوية.
إنشاء ألوان متناغمة
أنشئ تلقائيًا ألوانًا متكاملة تحافظ على التوازن والتباين.
مقياس درجات (50–900)
درجات من الفاتح إلى الداكن لطبقات الواجهة والحالات والخلفيات والنص.
رموز دلالية لاتساق الواجهة
أدوار جاهزة للإجراءات وحالات النجاح والتحذير والعناصر المحايدة.
متغيرات CSS جاهزة
صدّر اللوحة كاملة كمتغيرات CSS بنقرة.