How many steps should I generate?

Five per side covers most interface needs. Fewer suits a small component set; ten produces a design-system-style ramp where some neighbouring steps become hard to distinguish.

Why do my lightest tints look washed out rather than pale versions of the color?

Mixing toward white reduces saturation as well as darkness, so the far end of a scale approaches neutral. Generate fewer steps if you want the hue to stay stronger.

Can I generate only tints or only shades?

Yes. The mode control switches between both sides, tints only, or shades only, and the base color remains in the output either way.

Color Shade and Tint Generator

Base color

Steps per side

11 colors

100% white

#ffffff

80% white

#d0e5e8

60% white

#a2cbd1

40% white

#73b1bb

20% white

#4597a4

Base color

#167d8d

20% black

#126471

40% black

#0d4b55

60% black

#093238

80% black

#04191c

100% black

#000000

Export palette

Palette output

:root {
    --color-1: #ffffff;
    --color-2: #d0e5e8;
    --color-3: #a2cbd1;
    --color-4: #73b1bb;
    --color-5: #4597a4;
    --color-6: #167d8d;
    --color-7: #126471;
    --color-8: #0d4b55;
    --color-9: #093238;
    --color-10: #04191c;
    --color-11: #000000;
}

Tints, shades and why you need both

A tint is your color mixed toward white; a shade is the same color mixed toward black. Together they turn a single brand color into the range an interface actually needs: hover and pressed states, tinted backgrounds, borders, disabled states and dark-mode equivalents.

Your base color is preserved exactly and sits in the middle of the scale. Each step is an even mix toward white or black, and every swatch is labelled with the proportion used so the scale is reproducible.

How many steps to generate

Five steps per side suits most interface work, giving eleven values including the base — enough for background tints, hover states and a dark variant without producing pairs too similar to tell apart. Two or three steps are usually enough for a small component library.

Ten steps per side produces a fine-grained ramp closer to what a design system publishes, but neighbouring values become hard to distinguish and some will round to the same HEX code.

What mixing toward white and black does

Mixing happens in sRGB, which is the same operation a CSS gradient or a designer's opacity slider performs. Tints lose saturation as they approach white and shades lose it as they approach black, so the extreme ends of a long scale drift toward neutral.

Lighter tints of a mid-tone color rarely hold enough contrast for text. Use the scale to find surfaces and states, then verify any text pairing against its real background.

Frequently asked questions

A tint mixes a color with white, a shade mixes it with black, and a tone mixes it with gray. This tool generates tints and shades; the base color itself is left untouched.