مولّد لوحات الألوان

اختر لوناً أساسياً ونوع التناسق، واضغط على أي لون لنسخه.

ما المشكلة؟

أضف هذه الحاسبة إلى موقعك أو مدونتك

انسخ هذا الكود والصقه في صفحتك (في محرر HTML). مجاني، ويتكيّف ارتفاعه تلقائياً.

طريقة الاستخدام

تعتمد الأداة على عجلة الألوان (نظام HSL):

  • متجاورة: ألوان قريبة على العجلة (±20° و±40°)، هادئة ومريحة.
  • متكاملة: اللون ونقيضه (180°)، تباين قوي.
  • ثلاثية: ثلاثة ألوان متباعدة 120°.
  • رباعية: أربعة ألوان متباعدة 90°.
  • أحادية: اللون نفسه بإضاءات مختلفة.
  • درجات 50–900: مزج اللون بالأبيض والأسود لنظام تصميم كامل، كما في Tailwind.

مثال عملي

من الأخضر #0f6e56 تعطي الصيغة المتكاملة لوناً مقابلاً قريباً من الأحمر الوردي #6e0f27، مناسباً لأزرار تلفت الانتباه.

أسئلة شائعة

كيف أختار ألوان موقعي؟
ابدأ بلون العلامة، واستعمل درجاته للخلفيات والنصوص، ولوناً متكاملاً للأزرار المهمة.
كيف أستعمل متغيرات CSS؟
انسخها إلى ملف CSS ثم استعمل مثلاً color: var(--color-3).
هل الألوان مناسبة لضعاف البصر؟
تحقق من تباين النص بأداة HEX إلى RGB، فهي تعرض نسبة التباين ومعايير WCAG.

عمليات بحث شائعة

  • مولد الوان
  • لوحة الوان
  • تناسق الالوان
  • درجات الالوان
  • color palette generator