Can I paste a 3-digit hex code?

Yes. The # is optional and a 3-digit code is expanded first, so #f80 becomes #ff8800 before the palette is built. Its complementary color is #0077ff.

What does the CSS variables export look like?

For the triadic palette of #3b82f6 you get :root { --color-1: #3b82f6; --color-2: #f63b82; --color-3: #82f63b; } with one variable per line. Rename the variables to your own token names after pasting.

How many colors does each scheme give?

Complementary gives 2 colors, triadic 3, tetradic 4, and analogous and monochromatic 5 each. Monochromatic keeps your hue and saturation and sets lightness to 20, 35, 50, 65 and 80%, so your exact base color is usually not one of its swatches.

Why does a grey base color give only greys?

A grey has 0% saturation, so rotating its hue changes nothing and every scheme repeats the same grey (monochromatic still steps its lightness). Start from a color with some saturation.

Hex color palette generator

Paste a hex code such as #3b82f6 and get a palette built from it. This page opens on the triadic scheme: three hues 120 degrees apart that keep your color's saturation and lightness, here #3b82f6, #f63b82 and #82f63b. Switch to complementary, analogous, tetradic or monochromatic, then copy one hex value or the whole set as CSS custom properties. All calculations run locally in your browser.

Base color

#3b82f6

#f63b82

#82f63b

PALETTE TYPE

How it works

All color calculations use the HSL (hue, saturation, lightness) color space. The base color is converted from hex to HSL, and the hue is rotated by a fixed amount depending on the palette type (complementary: 180deg, triadic: 120deg/240deg, etc.). The adjusted hue values are converted back to RGB and then to hex for display. All arithmetic runs in JavaScript in your browser.

Processing runs in your browser

All processing happens locally in your browser tab. Our servers are not involved at any point.

Related operations

For lightening or darkening a single colour, try tints and shades. To convert any chosen swatch between HEX, RGB, and HSL, use the colour converter. For testing readable text colours on your palette, see the contrast checker.

Frequently asked questions

Can I paste a 3-digit hex code?: Yes. The # is optional and a 3-digit code is expanded first, so #f80 becomes #ff8800 before the palette is built. Its complementary color is #0077ff.
What does the CSS variables export look like?: For the triadic palette of #3b82f6 you get :root { --color-1: #3b82f6; --color-2: #f63b82; --color-3: #82f63b; } with one variable per line. Rename the variables to your own token names after pasting.
How many colors does each scheme give?: Complementary gives 2 colors, triadic 3, tetradic 4, and analogous and monochromatic 5 each. Monochromatic keeps your hue and saturation and sets lightness to 20, 35, 50, 65 and 80%, so your exact base color is usually not one of its swatches.
Why does a grey base color give only greys?: A grey has 0% saturation, so rotating its hue changes nothing and every scheme repeats the same grey (monochromatic still steps its lightness). Start from a color with some saturation.

Last reviewed September 30, 2026

Other pages for this tool

Related tools

Background reading: Complete guide to color tools
Step by step: Build a color system for a design project