مولّد لوحات ألوان متناسقة
ولّد لوحات ألوان متناسقة فوراً بالضغط على Spacebar — مع 6 أنظمة لونية كلاسيكية (متناغم، تكميلي، ثلاثي، رباعي...). تصدير CSS / JSON / صورة بضغطة.
⌨️ Spacebar = توليد
🔒 قفل الألوان
📥 CSS · JSON · PNG
🌈 6 أنظمة
🎨 الفرق بين الأنظمة الستة
1
أحادي (Monochromatic)درجات من نفس اللون. هادئ وأنيق. مثالي للعلامات التجارية الفاخرة والمواقع الجادّة.
2
متناغم (Analogous)ألوان متجاورة على عجلة الألوان (±30°). مريح للعين، شائع في الطبيعة (شروق، غروب).
3
تكميلي (Complementary)لونان متقابلان (أزرق + برتقالي). تباين عالٍ، يلفت النظر، مثالي لـ CTA buttons.
4
ثلاثي (Triadic)3 ألوان متباعدة 120° (أحمر + أصفر + أزرق). حيوي ومتوازن، شائع في علامات الأطفال والرياضة.
5
رباعي (Tetradic)4 ألوان على شكل مستطيل. صعب التحكم لكنّه غنيّ. استخدم لون واحد أساسي و 3 ثانوية.
6
عشوائي (Random)توليد عشوائي بضمان قابلية القراءة. مفيد للإلهام أو لكسر الأنماط.
❓ الأسئلة الشائعة
كيف أحفظ لوناً وأعيد توليد الباقي؟
اضغط على أيقونة القفل 🔒 على اللون. اضغط Spacebar أو زرّ التوليد، اللون المقفول يبقى والباقي يتغيّر.
كيف أنسخ كود لون واحد؟
انقر على اسم اللون (HEX) داخل الشريط. أو زرّ Copy في زاوية الشريط.
هل تدعم RGB و HSL؟
نعم — عند تصدير JSON أو CSS Variables تحصل على HEX و RGB و HSL لكل لون.
كيف أستخدم اللوحة في موقعي؟
صدّر CSS Variables والصقه في :root في ستايل الموقع، ثم استخدم
color: var(--c1) في أي مكان.كم لون في كل لوحة؟
5 ألوان — العدد المثالي لـ design system: لون أساسي، ثانوي، تأكيد، نص، خلفية.
🛠️ أدوات أخرى قد تفيدك
أداة مجانية من أكاديمية النخيلي
✅ تم