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.
Handplockade verktyg som passar bra ihop med Color Wheel. Fortsätt utan att förlora din fil.
Generate, lock, and share 3-8 color palettes with harmony modes. Export as PNG, CSS variables, or JSON — free, right in your browser.
Prova nuExplore the psychology, symbolism, and cultural meaning of any color — plus famous brand usage and suggested pairings with hex codes.
Prova nuPlocka valfri pixelfärg från ett foto (HEX / RGB / HSL) eller extrahera automatiskt den dominerande paletten. Exportera som JSON eller CSS-variabler.
Prova nuFörvandla foton med över 23 professionella effekter: konstnärliga stilar, vintagefilter, moderna effekter och specialtransformationer.
Prova nuGenerera alla favicon-storlekar (16, 32, 48, Apple 180, Android 192 och 512) plus site.webmanifest från en enda bild. Ladda ner som ZIP.
Prova nuLägg till anpassad text på JPG-, PNG-, SVG-, WEBP- eller GIF-bilder. Flera textrutor, anpassningsbara typsnitt, färger och positionering.
Prova nuA 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.
usageVerkliga problem det löser varje dag — för företag, kreatörer och vardagliga uppgifter. Hitta användningsfallet som passar dig och kom igång på några sekunder.
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