Drag on the interactive HSL color wheel to pick a base color, then get every classic color harmony — complementary, split-complementary, analogous, triadic, tetradic, and square — with copyable hex codes and live UI previews. Free, in your browser.
Drag on the wheel to pick a base color
Complementary colors sit directly opposite each other on the color wheel — blue and orange, red and green. They create the strongest possible contrast and vibrancy, which makes designs feel energetic and makes calls to action pop. Use one color as dominant and its complement sparingly as an accent to avoid visual tension.
Split-complementary takes a base color plus the two colors adjacent to its complement. You keep the high contrast of a complementary scheme but soften the tension, making it much harder to get wrong. It is a great starter scheme: one dominant hue, two supporting accents, and a naturally balanced result.
Analogous schemes use three neighboring colors on the wheel, such as yellow, yellow-green, and green. Because neighbors share an undertone, the result feels serene, harmonious, and natural — think sunsets and forests. Choose one dominant color, use the neighbors for support, and add a neutral for contrast.
A triadic scheme picks three colors evenly spaced 120 degrees apart, like red, yellow, and blue. It stays vibrant even when you use pale or muted versions, and it remains balanced because no hue dominates by proximity. Let one color lead and reserve the other two for accents and highlights.
Tetradic (rectangle) schemes use four colors arranged as two complementary pairs, spaced 60 degrees apart. They offer the richest variety of any classic harmony, but they are also the hardest to balance — pick one dominant color, mute the others, and watch the ratio of warm to cool hues carefully.
A square scheme spaces four colors evenly, 90 degrees apart around the wheel. Like tetradic, it pairs two complementary duos, but the even spacing gives a punchier, more playful balance of warm and cool. It works best when one color clearly dominates and the rest appear as small accents.
أدوات مختارة بعناية تتناسب مع Color Wheel. تابع عملك دون فقدان ملفك.
Generate, lock, and share 3-8 color palettes with harmony modes. Export as PNG, CSS variables, or JSON — free, right in your browser.
جرّبه الآنExplore the psychology, symbolism, and cultural meaning of any color — plus famous brand usage and suggested pairings with hex codes.
جرّبه الآناختر لون أي بكسل من صورة (HEX / RGB / HSL) أو استخرج تلقائيًا لوحة الألوان السائدة. صدّرها كـ JSON أو متغيرات CSS.
جرّبه الآنحوّل الصور بأكثر من 23 تأثيراً احترافياً: أساليب فنية وفلاتر قديمة وتأثيرات حديثة وتحويلات خاصة.
جرّبه الآنأنشئ جميع أحجام أيقونة الموقع (16 و32 و48 وApple 180 وAndroid 192 و512) إضافة إلى ملف site.webmanifest من صورة واحدة. نزّلها كملف ZIP.
جرّبه الآنأضِف نصاً مخصصاً إلى صورة JPG أو PNG أو SVG أو WEBP أو GIF. مربعات نص متعددة وخطوط وألوان ومواضع قابلة للتخصيص.
جرّبه الآنA color wheel arranges hues in a circle in spectral order — red through yellow, green, blue, and back to red. Colors that harmonize sit in predictable geometric positions on it. On this page, drag anywhere on the wheel (or type a hex code) to set your base color, and all six classic harmonies are computed instantly with copyable hex codes.
basicsComplementary colors sit directly opposite each other — blue and orange, red and green, yellow and purple. Because they are as different in hue as two colors can be, they create maximum contrast and vibrancy. Designers usually let one color dominate and use its complement sparingly for accents and calls to action.
color theoryTriadic uses three colors spaced 120 degrees apart, giving a vivid but balanced trio. Tetradic (rectangle) uses four colors as two complementary pairs spaced 60 degrees apart, offering the most variety but the hardest balance. Square also uses four colors but spaces them evenly at 90 degrees, which splits warm and cool hues more evenly.
color theoryStart from a color you already have — type its hex code into the wheel. For a safe, professional look use the analogous scheme; for a bold, high-contrast look use complementary or split-complementary. Each scheme on this page includes a small sample interface so you can judge how the combination feels in a real layout before committing.
usageYes. The wheel controls hue (around the circle) and saturation (distance from the center), and a separate slider controls lightness. Harmonies preserve your chosen saturation and lightness while rotating the hue, so a soft pastel base produces soft pastel harmonies and a deep base produces deep ones.
usageمشكلات حقيقية تحلّها كل يوم — للشركات والمبدعين والمهام اليومية. اعثر على حالة الاستخدام التي تناسبك وابدأ في ثوانٍ.
See every classic harmony computed live from a base color you choose, with a plain-English explanation of when and why each scheme works.
Type your brand hex into the wheel and use split-complementary or triadic schemes to find accent colors that contrast without clashing.
Each harmony is applied to a small sample card — header, body, button, and dots — so you can judge combinations in context instead of as abstract swatches.
Use analogous harmonies for natural, serene scenes and complementary ones for dramatic focal points, copying exact hex codes into your painting app.
Pixoate