Build a color scheme from the wheel
This free color wheel turns one color into a complete, balanced palette. Pick a base color on the wheel, choose a harmony rule — complementary, analogous, triadic, and more — and the tool instantly generates the matching colors using classic color theory. Drag the points around the wheel and the whole scheme moves with them, so you can explore combinations in seconds. Everything runs in your browser, with the HEX, RGB, HSL, and OKLCH values for every color ready to copy.
A color wheel arranges hues in a circle so that the relationships between them become visual: colors that sit opposite each other contrast, and colors next to each other blend. That geometry is what turns guesswork into a system — instead of hunting for colors that “go together,” you let the angles do the work.
How to use the color wheel
- Set your base color by dragging a point on the wheel — angle sets the hue, distance from the center sets how vivid it is — or type a HEX code into the field below.
- Choose a harmony from the dropdown. The wheel adds the right number of points and positions them by the rule, and the palette on the right updates to match.
- Adjust the lightness with the ring around the wheel — drag toward the bottom for lighter colors, toward the top for darker ones.
- Fine-tune with the tints strip at the top to jump to a lighter or darker version of the same color.
- Copy what you need — click any swatch to copy its HEX, or use Export colors to grab the whole palette at once. Random palette gives you a fresh starting point whenever you’re stuck.
The color harmonies, explained
Each harmony is a rule for picking colors based on their position on the wheel. They’re the same relationships artists and designers have used for centuries — the tool just calculates them precisely.
Complementary. Two colors directly opposite each other on the wheel. This is the highest-contrast pairing you can make, so it feels bold and energetic. Use one as your main color and the other as an accent rather than splitting them 50/50.
Analogous. Three colors that sit next to each other. Because they share a family, the result feels calm and cohesive — think of a sunset sliding from red to orange to yellow. Let one color lead and use the others as support.
Triadic. Three colors spaced evenly around the wheel. It stays vibrant and balanced at the same time, which makes it a safe choice for playful, colorful designs. One dominant color plus two accents usually reads best.
Split-complementary. A base color plus the two colors on either side of its opposite. You keep the strong contrast of a complementary scheme but soften the tension, so it’s a little more forgiving to work with.
Tetradic. Four colors forming two complementary pairs. It gives you the richest range to work with, but it’s also the easiest to overdo — balance warm and cool tones, and let a single color dominate the layout.
Monochromatic. One hue at several different lightness levels. There’s no color clash to manage, so it always looks clean and intentional — ideal for minimal designs or when you want the content, not the color, to lead.
HEX, RGB, HSL, and OKLCH
The tool shows every color in four formats so you can paste it wherever it’s needed. HEX is the six-character code used across web design, like #D84663. RGB writes the same color as red, green, and blue values from 0 to 255. HSL describes it as hue, saturation, and lightness, which makes it easy to adjust a color by hand. OKLCH is a newer, perceptually even model — equal numeric steps look like equal visual steps — which is why it’s increasingly used for building accessible, consistent color systems in modern CSS.
Where a color wheel helps
Anytime you need more than one color that works together, the wheel is the fastest way there: a brand palette, a website theme, a poster, an illustration, a data chart, or a room. Start here to find a harmony you like, pull individual colors into the color picker to fine-tune them, expand the scheme with the color palette generator, and before you ship, run your text-and-background pairs through the contrast checker to make sure they stay readable.
Frequently asked questions
Is this color wheel free? Yes. It’s completely free, runs in your browser, and doesn’t require an account or any download.
What is a color wheel? It’s a circular arrangement of hues that shows how colors relate to one another. Opposite colors contrast, neighboring colors harmonize, and evenly spaced colors stay balanced — which is what makes it such a useful tool for choosing combinations.
Which color harmony should I use? For a calm, cohesive look, choose analogous or monochromatic. For something bold and high-energy, choose complementary or triadic. Split-complementary and tetradic sit in between, giving you contrast with more colors to play with. The best approach is to try a few and see which fits the mood you’re after.
How do I copy the colors? Click any swatch in the palette to copy its HEX code, or use the Export colors button to copy the whole palette at once. You can also copy the base color’s HEX directly from the input field.
What is OKLCH? OKLCH is a modern way of describing color that matches how our eyes actually perceive it, so equal changes in the numbers look like equal changes on screen. It’s especially handy for creating tints and shades that feel consistent — something older models like HSL don’t always get right.
How do I make sure my colors are readable? Color harmony is about which colors look good together; readability is about contrast between text and its background. Once you’ve picked your colors here,
