What are color harmonies?

Color harmonies are sets of colors related by a mathematical rule on the color wheel — complementary (180° apart), triadic (120° apart), tetradic, analogous, split-complementary, and so on. Designers use them to build palettes that feel intentional and balanced.

Which harmony should I pick?

Complementary and split-complementary work well for high-contrast accents (buttons, alerts). Analogous schemes are calm and natural-looking. Triadic and tetradic produce vibrant, varied palettes that need careful balancing. Monochromatic is great for content-heavy UIs.

Does this match the rotations in Adobe Color, Coolors, etc.?

Yes — the angles used here (30°, 90°, 120°, 150°, 180°, 270°) match the standard color theory definitions you'll find in design tools and textbooks.

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

الأساس

النظام

Base + opposite (180°)

#3B82F6base

rgb(59, 130, 246)

hsl(217, 91%, 60%)

#F6AF3Ccomplement (180°)

rgb(246, 175, 60)

hsl(37, 91%, 60%)

التفاصيل التقنية

كيف يعمل مولّد تناغمات الألوان

ما الذي تفعله الأداة

يحسب مولّد تناغمات الألوان مجموعات ألوان مرتبطة رياضيًا انطلاقًا من درجة لون أساسية واحدة: المتكاملة، والمتجاورة، والثلاثية، والرباعية، والمربعة، والمتكاملة المنقسمة، والأحادية اللون، والظلال. تُعرض كل لوحة بقيم HEX وRGB وHSL يمكنك نسخها بنقرة واحدة واستخدامها مباشرةً في CSS أو رموز التصميم.

حالات استخدام شائعة للمطورين

يضع المصممون نماذج أولية للوحات العلامة التجارية عبر استكشاف كيف تتطور درجة لون العلامة تحت قواعد تناغم مختلفة. ويستخرج مطورو الواجهة الأمامية ألوان تمييز للأزرار والتنبيهات والشارات من لون العلامة الأساسي. ويختار مهندسو تصور البيانات مجموعات ألوان فئوية تبدو مقصودة لكنها تظل قابلة للتمييز. ويقارن مديرو المنتجات خيارات اللوحات عند مراجعة مقترحات التصميم دون الحاجة إلى أدوات تصميم مخصصة.

تنسيقات البيانات أو أنواعها أو متغيراتها

تتوفر ثمانية مخططات: المتكاملة (الأساس + 180°)، المتجاورة (الأساس ± 30°)، الثلاثية (3 ألوان تفصل بينها 120°)، الرباعية (مستطيلة من 4 ألوان)، المربعة (4 ألوان تفصل بينها 90°)، المتكاملة المنقسمة (الأساس + ±150°)، الأحادية اللون (نفس الدرجة مع تفاوت في الإضاءة 10–90%)، والظلال (نفس الدرجة من الداكن إلى الفاتح). يتضمن كل لون تمثيلاته بصيغ HEX وRGB وHSL إلى جانب تسمية للدور.

المزالق الشائعة والحالات الطرفية

تبدو التناغمات المشتقة من ألوان أساسية شديدة انخفاض التشبع أو قريبة من التدرج الرمادي غير قابلة للتمييز عبر المخططات — ابدأ من لون أساسي مشبع. قد تنتج الألوان الأساسية عالية التشبع مع المخططات الثلاثية أو الرباعية لوحات صارخة يصعب موازنتها؛ فكّر في خفض التشبع لاستخدامات واجهة المستخدم. بعض التركيبات المشتقة من التناغمات لا تحقق تباين WCAG — تحقّق دائمًا من أزواج النص/الخلفية في أداة تباين الألوان قبل الإطلاق.

متى تستخدم هذه الأداة بدلًا من الكود

استخدم أداة المتصفح لتوليد الأفكار والاستكشاف السريع ومراجعة التصميم. في الشيفرة، تتيح لك مكتبات مثل chroma.js أو colord أو culori حساب التناغمات برمجيًا، ودمجها في خطوط أنابيب بناء رموز التصميم، ودمج رياضيات التناغم مع فضاءات ألوان متجانسة إدراكيًا مثل Oklch للحصول على لوحات أكثر اتساقًا في المظهر.