Stax

مولد لوحة الألوان

توليد 10 درجات إضاءة وألوان متناسقة من أي لون سداسي.

HSL(217°, 91%, 60%)

Lightness scale from 10% (darkest) to 90% (lightest). Click any swatch to copy its hex value.

ما هو مولّد لوحة الألوان؟

أداة لإنشاء مجموعات ألوان متناسقة بناءً على نظرية الألوان. أدخل لوناً أساسياً، تحصل على 5+ ألوان متناغمة (تكاملية، مماثلة، مثلثية). أساسية لمصممي الويب، الجرافيك، والعلامات التجارية.

أنواع التناغم

  1. تكاملية - متضادة على عجلة الألوان (تباين عالٍ)
  2. مماثلة - متجاورة (هادئة)
  3. مثلثية - 3 ألوان متساوية المسافات
  4. مربعة - 4 ألوان (متنوعة)
  5. أحادية - تدرجات لون واحد

قاعدة 60/30/10

  • 60% لون رئيسي (محايد عادة)
  • 30% لون ثانوي (للأقسام)
  • 10% لون مميز (CTAs، روابط)
  • تجنب أكثر من 5-7 ألوان
  • احفظ كـ CSS variables

تنسيقات الإخراج

HEX (#FF5733) - الأكثر شيوعاً للويب. RGB (255, 87, 51) - مفيد للشفافية. HSL (11°, 100%, 60%) - أفضل لتعديل السطوع. CMYK للطباعة. Pantone للعلامات التجارية الاحترافية. أداتنا تصدر بكل الأنظمة لاستخدام مرن.

الأسئلة الشائعة

كيف أختار ألوان متناسقة؟
أنواع: تكاملية (متضادة على عجلة الألوان). مماثلة (متجاورة). مثلثية (3 ألوان متباعدة بالتساوي). مربعة (4 ألوان). أحادية (تدرجات لون واحد). كل نوع له شعور: تكاملية = حيوية، مماثلة = مهدئة.
كم لون لموقع/علامة تجارية؟
60/30/10: 60% لون رئيسي (محايد عادة)، 30% ثانوي، 10% مميز (للأزرار/CTAs). 5-7 ألوان كحد أقصى للنظام الكامل (مع تدرجات). ألوان أكثر = فوضى. علامات تجارية ناجحة (Apple, Google) تستخدم 2-3 ألوان أساسية.
كيف أحول لون من Photoshop لـ CSS؟
استخدم HEX (#RRGGBB) أو RGB(r,g,b) أو HSL(h,s,l). HEX الأكثر شيوعاً (#FF5733). HSL أفضل للتدريج (تغيير السطوع). أداتنا تحول بين الأنظمة فوراً. احفظ ألوانك كـ CSS variables (--primary: #ff5733) لإعادة الاستخدام.
ما الألوان الأكثر تحويلاً؟
الأخضر للحركات الإيجابية (شراء، تأكيد). الأحمر للتحذير، البيع المحدود. الأزرق للثقة (بنوك، تكنولوجيا). البرتقالي للحركة، الإلحاح. الأسود للفخامة. لكن: السياق يهم أكثر من اللون. اختبر A/B - النتائج تختلف بحسب المنتج والجمهور.

أدوات ذات صلة