Pick a hue, watch six harmonies form in real time.
Three centuries of designers, painters, and printmakers have already done the hard work. The color wheel is the shorthand for that work: a circular diagram first sketched by Isaac Newton in 1666 when he bent sunlight through a prism and split white light into its hues.
Every color you'll ever use sits somewhere on this wheel. Once you understand the relationships between positions, choosing a palette stops being a guessing game.
Same method whether you're designing a logo, a landing page, or a whole product.
Start with a color that anchors your brand or mood.
Complementary, analogous, triadic. Pick the relationship.
Tune saturation and value until each color earns its place.
Run contrast checks before you ship.
Every color on the traditional wheel belongs to one of three families. Their relationships are the foundation of every palette you'll build.
The three colors that cannot be created by mixing other colors. Every other color in the wheel descends from them. On the traditional artist's wheel (RYB), the primaries are red, yellow, and blue.
Digital screens use a different set: red, green, blue (RGB), because they mix light, not pigment. Print uses cyan, magenta, yellow, black (CMYK). Same wheel logic, different primaries depending on the medium.
Orange (red + yellow), green (yellow + blue), and purple (blue + red). Each sits exactly between its two parent primaries on the wheel, at 60° intervals.
Secondaries inherit some character from each parent: orange feels warm like red but bright like yellow; purple is intense like red but cool like blue. Useful when you want a complementary relationship that feels softer than two raw primaries clashing.
Red-orange, yellow-orange, yellow-green, blue-green, blue-purple, red-purple. Each is a primary mixed with its adjacent secondary, filling the 30° gaps on the wheel.
Most real-world colors (the ones designers actually reach for) are tertiaries. Teal, salmon, chartreuse, indigo, magenta. They're more nuanced and more flattering than raw primaries, which can feel cartoonish in isolation.
Each harmony is a geometric pattern on the wheel: a tested formula for how colors relate. Pick the right one for the emotion you want, and the rest of the design gets easier.
Two colors directly across the wheel. The loudest pairing color theory allows.
When you want maximum contrast, instant visual energy, and one element to clearly dominate against its opposite. Often the secret behind sports team identities, action movie posters, and call-to-action buttons that demand a click.
Blue and orange (the Mavericks, the Bond posters, every other corporate brand)
A base color, plus the two colors flanking its complement.
When you want the impact of a complementary scheme without the harsh head-to-head clash. Gives you three usable colors instead of two, which is easier to balance in real designs like editorial layouts, fashion lookbooks, and brand systems that need more nuance.
Teal with coral and soft red, common in modern editorial design
Three adjacent hues. The colors already agree with each other before you arrange them.
When you want calm, cohesion, and a single emotional temperature. Perfect for nature scenes, sunset gradients, meditation app UIs, and any design where you want the user to feel settled rather than alert.
Yellow to orange to red (autumn leaves, sunset light)
Three colors at perfect 120° angles. A balanced equilateral triangle on the wheel.
When you want vibrancy and energy without the head-on contrast of complementary. Lets you pick one color to lead and use the other two as accents. Common in children's brands, board games, and playful tech products.
Red, yellow, blue (primary triad: Mondrian, Superman, McDonald's)
Two complementary pairs forming a rectangle. The richest scheme, and the hardest to balance.
When you need a full system with warm and cool variety: dashboards, data visualization, infographics. Pick one color to lead; the other three become supporting accents. Without that hierarchy it collapses into noise.
A muted blue lead with green, pink, and yellow accents, common in modern data viz palettes
A single hue, varied only by saturation and brightness. Think shades, tints, and tones.
When you want sophistication and quiet confidence. Cannot clash with itself, so it's the safest scheme for luxury brands, professional dashboards, and minimal product UIs. The risk is monotony, so pair with strong typography to keep it from feeling flat.
Stripe's purple system, Apple's grayscale, single-color photography
The wheel handles hue. Shades, tints, and tones handle everything else: depth, softness, sophistication.
Adds airiness. Pastel skies, pale stationary, soft brand identities. Tints feel approachable and calm.
Adds gravity. Deep palettes for luxury, drama, and contrast against light backgrounds. Shades feel grounded and serious.
Adds maturity. Muted and natural. The secret behind most editorial and "tasteful" design. Tones feel sophisticated.
When designers say "this brand feels too aggressive," they usually mean it's all raw hue with no shades or tones. Adding 10% gray to a pure red instantly makes it feel grown-up. Adding 20% white turns the same red into something a children's brand would use. Same wheel position, entirely different message.
The three sliders behind every color picker you've ever used. Once you can name what each one does, you stop fighting the picker and start working with it.
The "name" of the color: red, green, blue, and so on. Move along the strip and the hue changes; everything else stays the same.
From gray on the left to fully vivid on the right. High saturation feels intense and demanding; low saturation feels mature and quiet.
From black on the left to the brightest version on the right. Value controls weight. Heavier colors anchor a layout; lighter ones recede.
Why designers think in HSV instead of RGB. RGB asks you to balance three light channels. That's useful for computers, terrible for humans. HSV separates "what color is it" from "how strong" from "how bright." Three questions you can answer one at a time. Pick a hue, then adjust intensity, then brightness. Way less guessing.
Five principles that separate amateur palettes from professional ones. They apply to logos, websites, packaging, any place color has a job.
Use one color for 60% of your design, a supporting color for 30%, and an accent for 10%. The ratio keeps designs balanced without feeling boring.
Live preview using your current palette →
Most great brand systems are built on a tiny core. Add colors only when you can name a job for each one.
Audiences should immediately know what your "main" color is. If everything competes equally, nothing wins.
Pure hues from the picker rarely survive contact with real layouts. A small desaturation usually looks more refined than the raw version.
WCAG asks 4.5:1 for body text, 3:1 for large text and UI elements. Use our contrast checker on every text-on-color combination.
Around 8% of men have some form of color blindness. Always pair color with shape, position, or text, especially for status and error states.
Desktop monitors are forgiving. Phones are not. Colors shift on cheap displays, in sunlight, at angles. If it survives the worst case, you're safe.
A quick-reference for the associations behind the wheel's eight major hue families. Use these as starting points, not rules, and always design for your specific audience.
| Color | Common Western associations |
|---|---|
Red | Passion · energy · danger · love |
Orange | Warmth · creativity · enthusiasm |
Yellow | Optimism · attention · caution |
Green | Nature · growth · money · safety |
Blue | Trust · calm · authority · sadness |
Purple | Luxury · royalty · spirituality · mystery |
Pink | Femininity · playfulness · romance |
Neutral (gray/black/white) | Sophistication · seriousness · minimalism |
The six classic harmonies are Complementary (180° opposite), Analogous (±30° neighbors), Triadic (three colors 120° apart), Tetradic (four colors forming a rectangle at 90°/60° angles), Split-Complementary (a base color plus the two neighbors of its complement), and Monochromatic (one hue with varied saturation and value). Each represents a different geometric relationship on the 360° hue wheel.
RGB describes color by the amount of red, green, and blue light mixed together, which is useful for screens. HSL describes color by hue (the position on the color wheel), saturation (how intense), and lightness (how light or dark). HSL maps directly to how designers think about color harmony, which is why the color wheel uses hue angles.
Complementary harmonies create strong, attention-grabbing brands (think sports teams). Analogous and monochromatic harmonies feel sophisticated and calm, which is great for luxury and editorial brands. Triadic schemes work well for playful, energetic brands. The right choice depends on the emotion you want to evoke.
Yes. Complementary colors are exactly 180° apart on a hue wheel. Examples include blue and orange, red and cyan, yellow and violet. When placed next to each other, complementary pairs produce the highest visual contrast and make each other appear more vivid (an effect called simultaneous contrast).
The color wheel helps you choose hue relationships, but accessibility depends on lightness contrast, not hue. Always pair the wheel with a WCAG contrast checker to ensure text meets at least 4.5:1 contrast (3:1 for large text or UI elements). Never rely on color alone to convey meaning.
More color tools to take your work further.
