Color Wheel: Harmonies, Models and Palette Generator

A color wheel is a map of hue. Going around the circle changes the hue (red, orange, yellow, green, blue, violet and back to red); moving toward the edge makes a color more saturated; the brightness or lightness slider makes the whole wheel lighter or darker. Because the hues sit at fixed angles, relationships between colors become geometry: a color and the one directly opposite are complementary, neighbors are analogous, and three hues 120° apart are a triad.

To build a palette with this tool:

1. Start from a color you already need, such as a brand or product color, and set it as the base.
2. Pick a harmony. The extra handles show where its partner colors sit, and they follow the base as you drag.
3. Give each color a job. One should dominate, one support it and one act as the accent; the 60-30-10 preview shows how that balance looks in an interface.
4. Check value contrast and color vision before you commit: the badges on every swatch show the WCAG contrast ratio against white and black.

Grabbing any handle other than the base rotates the whole harmony, which is a quick way to try the same relationship in a different part of the wheel.

A complementary color sits directly opposite on the color wheel, 180° away. The answer depends on the wheel: painters use the RYB wheel, while screens and printers use the RGB and CMY wheels, which share the same circle.

Switch the Wheel setting in the tool to see both answers for any color you pick.

All four wheels put hues in a circle, but they disagree about where each hue sits, so the same harmony gives different colors:

RYB is the wheel taught in art class, laid out like Johannes Itten's 12-part wheel. It gives the familiar painter's pairs: red and green, yellow and violet, blue and orange. RGB describes how screens add light, and CMY how inks subtract it. They are the same circle with the roles swapped: RGB's secondaries (cyan, magenta, yellow) are CMY's primaries, which is why both put cyan opposite red.

OKLCH is a modern perceptual model: its lightness and chroma are designed to match how people see color, so every color at one lightness looks equally light. That makes harmonies built on it noticeably more balanced: a triad in OKLCH will not have one color glaring brighter than the other two. Colors are kept inside the sRGB gamut by reducing chroma, never by shifting hue.

A harmony is a fixed relationship on the wheel. The angles in this table are measured from your base color; the tool lets you widen or narrow the ones marked adjustable.

The more hues a scheme has, the more it needs one of them to lead. Four equal colors fight for attention; one dominant hue with the rest as supporting and accent colors reads as a design.

Harmonies give you hues. A usable interface palette also needs neutrals, states and enough contrast. A reliable process:

• Lead with one hue. Use your brand or base color as the primary action color, and treat harmony partners as accents, illustrations and charts.
• Add neutrals. Most of a screen is background, surfaces and text. Grays tinted very slightly toward your brand hue look more polished than pure grays.
• Generate a scale per color. Use the Tints and Shades harmonies (or the Tailwind color generator) to get light backgrounds, borders, hover and pressed states from each hue.
• Keep semantic colors separate. Success, warning and error colors should be recognizable on their own, and should not be confused with your accent. Always pair them with an icon or a label.
• Check contrast early. Body text needs at least 4.5:1 against its background (WCAG AA). The badges on every swatch show the ratio against white and black; use the contrast checker for exact pairs.
• Test without color. The Vision preview simulates protanopia, deuteranopia and tritanopia, and Grayscale checks value contrast. If the design still works there, it works for everyone.
• Prefer OKLCH for scales. Equal lightness steps in OKLCH look like equal steps, which is why modern design systems define their palettes in it.

Every color is computed with the standard formulas from CSS Color Module Level 4, the same math browsers use for hsl(), lab() and oklch(). A few details matter if you need exact values:

• RYB is a traditional arrangement, not a measured color space, so there is no single official RYB-to-RGB table. This wheel maps the six RYB primaries and secondaries onto pure screen hues and interpolates between them, so a color can move between wheels without drifting.
• OKLCH colors that do not fit the sRGB gamut are brought inside it by lowering chroma while keeping lightness and hue, the approach the CSS specification recommends.
• CMYK values are a simple mathematical conversion. Real print colors depend on the paper, inks and press, so final artwork should be converted with your printer's ICC profile. Use the color converter for every other format.

Everything runs in your browser. Shared links only contain the base color, harmony and wheel.