Complements are taken on the traditional red-yellow-blue wheel, so red pairs with green and blue pairs with orange.
Aa9.10:1 on white textAa2.31:1 on black text
Complementary
Every palette needs a place to sit
The base color carries the surface and the text, and the harmony color earns attention because nothing else competes for it.
Create a Color Palette from One Color
Pick a base color with the hue, saturation, and value sliders — or drop in a hex value — and the generator derives a full palette from it using complementary color theory. Each hue in the scheme comes with five levels, from a pale tint through the base color to a deep shade, so the result is ready to use as design tokens. Copy the hex values, CSS custom properties, or JSON, or save the palette as an image. Everything is calculated in your browser.
Howto
- Set the base color. Drag inside the color wheel to choose a hue and saturation at once, use the Hue, Saturation, and Value sliders for precision, or type a hex value such as
#883388. - Choose a harmony. Complementary takes the hue directly opposite the base on the wheel; the other schemes spread the hues differently around the same wheel.
- Choose the color wheel. RYB follows traditional artists' color theory, where red pairs with green. RGB follows the hue circle used by screens and CSS, where red pairs with cyan.
- Click any swatch to copy its hex value.
- Export the whole palette with Copy hex list, Copy CSS variables, or Copy JSON, or use Save PNG for an image of the palette.
What complementary color theory does here
Complementary colors sit opposite each other on the color wheel. Because they share no common hue, placing them side by side produces the maximum contrast available between two colors — which is exactly why a complementary pair works best when one color dominates and the other is saved for the elements that must be noticed: a button, a highlight, a call to action.
The other schemes on this page are variations on the same idea. Split complementary trades a little contrast for a lot of comfort by using the two hues either side of the complement. Tetradic uses two complementary pairs at once. Analogous drops complementary contrast entirely in favour of neighbouring hues, and monochromatic works with a single hue, relying on tints and shades alone.
Frequently asked questions
What is a complementary color?
The complementary color is the hue directly opposite your base color on the color wheel, 180 degrees away. On the traditional red-yellow-blue wheel that makes green the complement of red and orange the complement of blue. On the RGB hue circle used by screens, red's complement is cyan and blue's is yellow. Both are correct for their own wheel, which is why this tool lets you choose.
Why do RYB and RGB give different complements?
The two wheels order the hues differently. The red-yellow-blue wheel comes from mixing pigment and is what most color theory teaching is based on; the RGB hue circle comes from mixing light and is what CSS hsl() and every screen uses. Choose RYB when you want the palette to feel like traditional color theory, and RGB when you want the hue offsets to match the values in your code.
What is the difference between saturation and value?
Saturation is how much of the hue is present, from a neutral grey at 0% to the purest form of the color at 100%. Value is how bright the color is, from black at 0% to the brightest version of that hue at 100%. Lowering saturation mutes a color; lowering value darkens it.
How are the tints and shades generated?
Each hue in the scheme is converted to lightness, then five levels are derived from it: two lighter steps (100 and 300), the base level (500), and two darker steps (700 and 900). Tints are slightly desaturated and shades slightly more saturated, which keeps pale colors from looking washed out and dark colors from looking muddy.
Are the palettes accessible?
The tool shows the contrast ratio of your base color against white and black text so you can check it against WCAG requirements — 4.5:1 for normal body text and 3:1 for large text. Swatch labels automatically switch between light and dark for legibility, but always verify the specific color pairs you plan to use.
Is my color data uploaded anywhere?
No. The palette, the color wheel, and the PNG export are all computed locally in your browser. Nothing is sent to a server.