🎛️ Color Palette Generator

Enter one base color to generate shades, tints and three common color-harmony palettes. Click any swatch to copy its HEX code.

Base color

Everything is a move in HSL

Your hex is converted to hue, saturation and lightness, and each palette is a different edit of those three numbers. #3B82F6 comes out as hsl(217.22, 91.22%, 59.8%), and from there:

Shades      hue and sat held; L set to 90, 75, 60, 45, 30, 15
Tints       sat - 10; L compressed as 100 - (100 - L) × 0.6, so 49 to 94
Complement  hue + 180                    -> 37.2°
Analogous   hue - 30, hue, hue + 30      -> 187.2, 217.2, 247.2
Triadic     hue, hue + 120, hue + 240    -> 217.2, 337.2, 97.2

Hues wrap with ((h % 360) + 360) % 360, so 397.2° becomes 37.2° and you never get an out-of-range value. From the default base the triadic row is #3B82F6, #F63B82 and #82F63B - the same three bytes rotated - and the complement is the amber #F6AF3B. The third shade lands on #3C83F6, one unit per channel off your base, because the base sits at L 59.8 and the ramp step is a flat 60.

Reading the rows

The shade ramp is a full lightness scale, not only darker steps. It runs from L 90 down to L 15 regardless of where your base sits, so with a mid-lightness base the first two swatches are lighter than what you typed.
Tints also drop 10 points of saturation. That is what makes them read as pastel rather than as washed-out versions of the same colour.
Click any swatch to copy its hex.

Equal L does not mean equal apparent brightness. The triadic yellow-green #82F63B looks far brighter than the blue #3B82F6 despite both sitting at L 59.8, because HSL lightness ignores the luminance weighting the eye applies. Check any pair you intend to put text on with a contrast checker rather than trusting the L value.

Frequently asked questions

What is the complementary colour of blue #3B82F6?

#F6AF3B, a warm amber. It is the same saturation and lightness with the hue turned 180 degrees, from 217 to 37.

What is the difference between a tint and a shade?

Strictly, a tint is the colour mixed with white and a shade is mixed with black. Here the tint row also removes 10 points of saturation, which mimics mixing with white more closely than raising lightness alone.

How many colours should a brand palette have?

One base hue with five or six lightness steps for interface work, plus one accent from the complementary or triadic row, and neutral greys. Analogous palettes look calm but give you too little separation for status colours.