Click any color on the wheel and instantly see its complementary, analogous, triadic, and split-complementary harmonies. Understand why colors work together — and get the codes to use them.
Click anywhere on the wheel to pick a color
Click wheel to change base color
Click any card to copy all colors in that harmony. Hover swatches for hex codes.
A color wheel is one of those tools that looks simple until you realize how deep it goes. Here's what's packed into the three tabs above — and why each one matters for real design work.
The wheel displays the complete HSL (Hue, Saturation, Lightness) color model as a ring — all 360 degrees of hue at consistent saturation. Click anywhere to select a color. The crosshair shows exactly where you clicked so you can be precise.
Complementary, analogous, triadic, split-complementary, tetradic, and monochromatic — all six classic harmony types, calculated instantly as you click. Each swatch shows its hex code and is one click to copy.
The Explorer tab shows all six harmony types for your selected color simultaneously — laid out as a visual grid so you can compare them side by side and choose the one that fits your project. No switching back and forth.
Choose a harmony type and the number of shades per color, and the Palette Builder generates a complete production-ready palette — shown as a visual strip and individual cards, each with hex codes and RGB values ready to copy.
Every color you pick shows up simultaneously in Hex, RGB, and HSL. Click any copy button to grab the format you need — or click the large color swatch to copy the hex directly. A toast notification confirms each copy.
No account, no subscription, no usage caps. Use the color wheel for personal projects, client work, or commercial applications without restriction. The tool runs entirely in your browser — no data is sent anywhere.
The basics take about 30 seconds to learn. Here's what to do with each part of the tool.
The outer ring of the wheel shows the full hue spectrum — all 360 degrees. Click anywhere on it to select that hue. The inner parts show lighter and darker versions. Your selected color appears in the panel instantly.
Select one of the six harmony buttons (complementary, analogous, triadic, etc.) and the tool immediately shows you which colors harmonize with your selection, drawn as swatches below. Each includes its hex code.
Click the copy icon next to any value field, or click any harmony swatch, to copy that hex code. Use "Copy All" to grab every color in the current harmony at once — useful for dropping the full set into a design file or CSS file.
Switch to the Harmony Explorer tab after selecting a color. You'll see all six harmony types displayed as color strips simultaneously — the quickest way to decide which direction to take your palette.
Go to the Palette Builder tab. Choose your harmony type and how many shades per color (1, 3, or 5). The tool generates a complete palette with all hex and RGB codes. Hit "Copy All" to get every color as a comma-separated list.
Found a color you want to fine-tune? Hit "Full Picker" to send your selected color to the main color picker where you can adjust brightness, saturation, and opacity with full control.
Color harmony isn't just a theory concept — it's a practical tool for making design decisions faster and with more confidence. Here's what each type actually is, when to use it, and what it feels like.
Two colors directly opposite each other. This pairing creates maximum contrast — each color makes the other look more vivid by comparison. It's the most powerful harmony for CTAs, brand differentiation, and anywhere you want immediate visual impact.
Three to five colors sitting next to each other on the wheel. They share underlying tones which is why they always feel cohesive and natural — like colors you'd see in a landscape or a photograph. Low visual tension, high visual comfort.
Three colors equally spaced around the wheel. Triadic schemes are vibrant and bold — all three colors fight for attention in a way that feels energetic rather than chaotic, as long as one color takes the lead and the others accent.
Your base color plus the two colors flanking its direct complement. It delivers most of the contrast of complementary pairs with much less tension. Often described as the "beginner-friendly" version of complementary — harder to make look bad.
Four colors forming two complementary pairs — arranged as a rectangle on the wheel. The richest and most varied of all harmonies. Works beautifully when one color clearly dominates; becomes chaotic when all four are used equally.
One hue at different saturation and lightness levels. The result is elegant and refined — every color feels like it belongs because they literally share the same hue. The key is making sure the lightness steps are distinct enough to create real hierarchy.
Color theory has a reputation for being either too abstract (inaccessible art school territory) or too simplified ("just use complementary colors and call it a day"). The reality is somewhere more useful in the middle: there are a handful of foundational concepts that, once you genuinely understand them, change how you see and make design decisions every day.
The color wheel is the most important of those foundational tools. It's not a diagram of rules — it's a map of relationships. Once you understand the map, you can navigate color decisions instead of guessing at them.
Most designers are taught RGB (red, green, blue values) as the "native" language of digital color. And while RGB is how screens actually render color, it's a terrible model for human beings to think in. Changing a color from "slightly more orange" to "slightly more yellow" means adjusting the R and G channels in specific ratios — unintuitive at best.
HSL — Hue, Saturation, Lightness — is the model that matches how humans naturally think about color. Hue is what most people mean when they say "color": the position on the color wheel expressed as a degree from 0 to 360. Saturation is how vivid or muted a color is, from 0% (pure gray) to 100% (fully saturated). Lightness is brightness from 0% (black) to 100% (white), with 50% being the "true" color.
Once you think in HSL, adjustments become intuitive. Want a paler version of your brand orange? Lower the saturation. Want a darker version for hover states? Lower the lightness. Want the complementary color? Add 180 to the hue. This tool works in HSL for exactly this reason.
hsl(16, 92%, 48%) is far easier to adjust and reason about than #e8400a. When you need to create a hover state, you can just change the lightness value — no hex math required.
One of the most common mistakes in beginner color work is choosing pure grays (equal R, G, and B values) for background and text colors. Pure grays work fine in isolation, but placed next to a saturated brand color, they create an uncomfortable disconnect — the two groups of colors don't feel like they belong to the same palette.
The solution is what some call "chromatic neutrals" or "warm grays" and "cool grays." A warm gray has a slight orange or yellow tint — hsl(30, 5%, 95%) instead of hsl(0, 0%, 95%). A cool gray has a slight blue tint. Neither reads as anything other than gray to most people, but when placed next to the brand color, they feel cohesive instead of disconnected.
The rule of thumb: match the neutral's hue to the brand color's hue, then reduce saturation to 3–8%. The result is a gray that still functions as a neutral but carries just enough of the brand's warmth or coolness to tie the palette together.
This is the part of color theory that surprises people even after they think they understand it: the same color looks significantly different depending on its surroundings. A medium orange placed on a dark brown background looks lighter and more vivid than the same orange on a white background. A muted blue next to a bright red appears to have a slightly greenish quality it doesn't have in isolation.
This phenomenon — called simultaneous contrast — is why testing colors in context matters more than evaluating them in isolation. When you're reviewing a palette, never look at the swatches on a pure white background if your actual design has a dark background. The colors will behave differently in deployment than they appear in the palette viewer.
Our color wheel helps with this by showing harmony colors as actual swatches placed next to each other — so you can see the relationships in context rather than evaluating each hex code independently.
When you've selected a harmony, the next question is how much of each color to use. The 60-30-10 rule is the simplest useful framework: 60% of the visual space uses the dominant color (usually a neutral or your primary), 30% uses a secondary color, and 10% uses an accent. In a complementary scheme, the 10% accent is your brand color's complement — used sparingly so it pops when it appears. In an analogous scheme, the three colors share the 100% in roughly 60-30-10 proportions with the middle color dominating.
The point of the rule isn't the specific percentages — it's the concept that not all colors in a palette should be used equally. Hierarchy in color distribution creates hierarchy in the interface. When everything gets equal treatment, nothing stands out.
Here's how I actually use this color wheel in practice, in case a specific workflow helps make it more concrete.
When starting a new project, I'll open the wheel and click around the outer ring in the hue range I'm considering for the brand — usually based on the emotional brief. I pick two or three candidate hues and, for each one, look at the analogous harmony to see what the "neighborhood" of that hue looks like. This gives me a sense of whether the general direction will produce a palette I can work with.
Once I've narrowed to a primary hue, I switch to the Harmony Explorer to see all six harmony types at once. This is the comparison moment — where I decide whether this project calls for the contrast of complementary, the cohesion of analogous, or the balance of split-complementary. The choice usually becomes obvious once you see them all side by side.
Then I take the selected harmony into the Palette Builder, generate the full shade scale, and copy all the hex codes into my CSS token file. From there, every color decision in the project traces back to this wheel — which means the palette stays coherent even as the design grows.
These are the things that take a while to figure out on your own — faster to just know them upfront.
Pure red next to pure cyan creates visual vibration — a buzzing effect that's uncomfortable to look at. Desaturate one or both colors (lower saturation to 60–75%) before using a complementary pair. The contrast remains; the discomfort disappears.
If all your analogous colors have the same lightness, they'll blend into each other and lose hierarchy. Make sure at least one color in the set is noticeably lighter or darker than the others. This creates the contrast you need for text, cards, and interactive elements to be readable.
True triadic schemes with all three colors in equal proportion tend to look hectic. Pick one hue as the clear dominant (60%+ usage), use a second as the support (around 30%), and deploy the third only as an accent. The hierarchy makes the scheme feel intentional rather than chaotic.
The misconception about monochromatic is that it means "one color tone." What it actually means is one hue with freely varying saturation and lightness. The best monochromatic palettes have enormous range — from a very light, low-saturation tint to a deep, rich dark. That range is what creates elegance.
A harmony that looks beautiful as an abstract swatch set can look wrong applied to a real interface. Before committing, sketch a quick mockup with real text, a button, and a card. The moment you add typography and UI elements, you'll see whether the hierarchy actually works.
If a palette isn't working and you can't figure out why, try plotting each color on the wheel. Often you'll discover that what you thought was a triadic scheme is actually four colors from different areas with no coherent structure. The wheel reveals relationships you couldn't see from the hex codes alone.
The questions people search for when learning about color wheels and color theory — answered directly.
hsl(180, 100%, 50%)), those degrees refer to the RGB-based hue circle.