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+ ਪੇਸ਼ੇਵਰ ਇਫੈਕਟਾਂ ਨਾਲ ਫੋਟੋਆਂ ਨੂੰ ਬਦਲੋ: ਕਲਾਤਮਕ ਸ਼ੈਲੀਆਂ, ਵਿੰਟੇਜ ਫਿਲਟਰ, ਆਧੁਨਿਕ ਇਫੈਕਟ ਅਤੇ ਖ਼ਾਸ ਪਰਿਵਰਤਨ।
ਹੁਣੇ ਅਜ਼ਮਾਓਇੱਕੋ ਚਿੱਤਰ ਤੋਂ ਹਰ favicon ਆਕਾਰ (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