Color Palette Generator

Pick a base color and get a palette in the harmony you choose: complementary, analogous, triadic, tetradic, split complementary or monochromatic. See a scale of tints and shades, the WCAG contrast of white and black text on the color, and copy any hex code or a block of CSS variables. Everything runs in your browser.

Base color (hex)

Color harmony

Three colors 120 degrees apart. Lively and balanced.

Triadic palette

Tints and shades

Text on the base color

White text has a contrast ratio of 5.13 (AA) and black text 4.09 (AA large). The more readable choice is white.

WCAG asks for at least 4.5 for normal text (AA), 3 for large text and 7 for the highest level (AAA).

CSS variables

:root {
  --palette-1: #2E5CFF;
  --palette-2: #FF2E5C;
  --palette-3: #5CFF2E;
}

:root {
  --scale-1: #D5DEFF;
  --scale-2: #ABBEFF;
  --scale-3: #829DFF;
  --scale-4: #587DFF;
  --scale-5: #2E5CFF;
  --scale-6: #254ACC;
  --scale-7: #1C3799;
  --scale-8: #122566;
  --scale-9: #091233;
}

Color harmonies are built by turning a color around the color wheel and keeping its saturation and lightness. A complementary color sits 180 degrees away, analogous colors 30 degrees either side, a triadic set every 120 degrees and a tetradic set every 90. Tints are the color mixed with white, and shades are the color mixed with black. The contrast figures use the WCAG formula for relative luminance, and the level shown on each swatch is the best of white or black text on it. Click a swatch to copy its hex code. Everything is worked out in your browser.

Related Tools

[5 suggestions]

Color Converter and Contrast Checker

Convert a color between HEX, RGB and HSL, look up CSS color names, and check the WCAG contrast ratio of text on a background.

Developer & Web

Color Contrast Checker

Check the WCAG contrast ratio of a text and a background color, see AA and AAA results for text and interface parts, and get the nearest colors that pass.

Developer & Web

CSS Gradient Generator

Design linear, radial and conic CSS gradients with any number of colour stops, preview them live and copy the CSS.

Developer & Web

CSS Shadow Generator

Design box-shadow, text-shadow and drop-shadow with several layers, preview them live and copy the CSS.

Developer & Web

PX to REM Converter

Convert px to rem, em, pt, pc, vw and percent for CSS, with your own root font size, parent size and viewport width.

Developer & Web

About the Color Palette Generator

Color harmonies come from the color wheel. The tool converts your color to hue, saturation and lightness, turns the hue by a set number of degrees, and converts back, keeping saturation and lightness the same. A complementary color is 180 degrees away, so pure red, #FF0000, pairs with cyan, #00FFFF. Analogous colors sit 30 degrees either side, giving #FF0080 and #FF8000 for red. A triadic set is spaced 120 degrees apart, so red goes with green #00FF00 and blue #0000FF. A tetradic or square set is spaced 90 degrees apart, and a split complementary set uses the two colors either side of the complement, at 150 and 210 degrees. The brand blue #2E5CFF has the triad #FF2E5C and #5CFF2E. Tints are the color mixed with white and shades are the color mixed with black, shown as a scale from light to dark. Each swatch shows whether white or black text is more readable on it and the WCAG level reached: contrast of 4.5 is needed for normal text (AA), 3 for large text and 7 for AAA. The base blue has a contrast of 5.13 against white. Hue angles are kept exact and only rounded when written as hex, so turning a color all the way round returns the same color. Palettes are a starting point: check the contrast of the actual combinations you use, and make sure color is never the only way information is shown.

What is a complementary color?▾

The color directly opposite on the color wheel, 180 degrees away in hue. Red and cyan are a complementary pair, and so are blue and yellow. Complementary pairs give the strongest contrast.

What is the difference between a tint, a shade and a tone?▾

A tint is a color mixed with white, a shade is a color mixed with black, and a tone is mixed with gray. This tool makes tints and shades.

How do I choose colors that are accessible?▾

Check the contrast ratio between text and background: WCAG asks for at least 4.5 for normal text and 3 for large text. Each swatch here shows the level that white or black text reaches on it.

What is a triadic color scheme?▾

Three colors spaced evenly around the color wheel, 120 degrees apart. It is lively and balanced, and works best when one color leads and the others support.

Is my data uploaded?▾

No. The calculation runs in your browser and nothing you enter is sent anywhere.