Color Palette Generator: Harmonies and a 50-900 Scale from One Color

Color harmonies and their hue angles

The 50 to 900 scale

How to make a color palette from one color

1. Enter a base color. Type a color as hex, rgb(), hsl(), hwb() or a name such as rebeccapurple, or use the color picker. The example is #1e6bb8. Press Random base for a new starting point.
2. Pick a harmony. Read the complementary, analogous, triadic, split-complementary, square and monochromatic sets. Each swatch is a button: press it to copy its hex code.
3. Use the tints and shades scale. The 50 to 900 scale gives you light backgrounds (50, 100) through to dark text and borders (800, 900). For the example, step 600 is #1f62a6, the closest to the base lightness.
4. Check the contrast. Each swatch lists the WCAG 2 ratio with white and with black text and whether it passes AA (4.5:1) and AAA (7:1). For example, white text on #3079c7 is 4.48:1.
5. Copy the palette. Copy the CSS custom properties for a stylesheet, the Tailwind snippet for tailwind.config.js, or the JSON for a design tool or script.

Frequently asked questions

What are complementary, analogous, triadic and tetradic colors?

They are sets of hues at fixed angles on the color wheel. Complementary is the hue opposite the base (180 degrees): #1e6bb8 and #905e00. Analogous colors sit 30 degrees either side (#007692, #1e6bb8, #605bb8). Triadic uses three hues 120 degrees apart (#1e6bb8, #ab4053, #487a0d). Split-complementary uses the two hues next to the complement, at 150 and 210 degrees (#1e6bb8, #aa4819, #766c00). Tetradic (square) uses four hues 90 degrees apart (#1e6bb8, #9e4380, #905e00, #007e56).

Why use OKLCH instead of HSL for a palette?

In HSL, colors with the same lightness value can look very different in brightness (yellow looks much lighter than blue at the same L), so steps are uneven. OKLCH is built so that its lightness tracks perceived lightness and a hue rotation changes the hue without changing how light the color looks. That makes the 50 to 900 steps feel evenly spaced and keeps harmony colors balanced.

What does "chroma reduced" mean on a swatch?

Some colors a hue rotation or a very light or dark step asks for do not exist in sRGB. Those swatches have their chroma reduced (same lightness and hue) until they fit, and are marked "chroma reduced". The tool does this by lowering chroma and keeping lightness and hue, so the color stays recognizably the same hue and just becomes less saturated. It does not clip channels, which would shift the hue. In the example, 12 of the swatches are marked.

How is the 50 to 900 scale built?

Ten steps (50, 100, 200 through 900) are given equal lightness spacing in OKLCH from 97% down to 25%, each with the base hue. Chroma follows a smooth curve: all of the base chroma in the middle, 30% at the two ends, so very light tints are not garish and very dark shades are not muddy. The base is not forced onto a step; the tool tells you which step is closest (step 600 for #1e6bb8).

Does step 500 match my base color?

Not necessarily. Some systems pin the base to 500, but this scale uses a fixed lightness ladder so every palette is evenly spaced. The step closest to your base lightness is shown; for #1e6bb8 it is 600. If you want your exact color in the scale, use the base swatch next to it.

How is the contrast with white and black worked out?

With the WCAG 2 formula used by the color contrast checker on this site: the ratio of the relative luminances of the two colors, shown to two decimals and cut off, never rounded up. AA needs 4.5:1 for normal text and AAA needs 7:1. For #1e6bb8 that is 5.45:1 with white text and 3.85:1 with black text. This is the contrast of the text color on that swatch as a background.

How do I use the palette in Tailwind CSS?

Copy the Tailwind snippet into the theme.extend.colors section of tailwind.config.js. The scale becomes palette-50 to palette-900 (for example bg-palette-100 and text-palette-800), the base is palette, and each harmony is a color group such as triadic-2. Rename the keys to fit your design system.

What does the Random base button do?

It picks a hue anywhere on the wheel with a middle lightness and a clear but not extreme chroma, so the result is a usable color rather than a very pale or very dark one. Add ?seed=7 (any whole number) to the page address and the button follows the same sequence every time, which is handy for sharing an example or for testing.

What happens with a gray or a transparent base?

A gray has no hue, so rotating the hue gives the same gray every time; the tool says so, and the scale becomes a plain gray ramp. A color with transparency is used as its opaque red, green and blue, and the tool tells you its alpha is ignored.

Is anything I enter sent anywhere?

No. The base color is read and the palette is built in your browser, and nothing you type is stored or sent anywhere.