Color Palette Generator, Schemes and Random, Free

About the Color Palette Generator

The Color Palette Generator builds a set of matching colours from one starting colour. Type a Base colour, choose a scheme such as Analogous, Triadic or Monochromatic, and the swatches appear straight away. Each swatch shows its hex code, its rgb() and hsl() values and how readable white or black text would be on it. When the set looks right, copy it as CSS or JSON, download it as an SVG or PNG, or share the page address.

All the work is done in your browser. Nothing is uploaded, there is no account, and the palette is kept only in the page address, which holds nothing but the colours and the scheme.

How to use it

The page opens on Analogous with five swatches built from #3b82f6.

How the schemes work

Every scheme except Monochromatic and Random turns the base colour round the HSL hue wheel and keeps its saturation and lightness. A hue $H$ in degrees becomes

$H' = (H + \Delta) \bmod 360$

where $\Delta$ is the offset for that swatch. The offsets are 0 and 180 for Complementary, 0, 150 and 210 for Split-complementary, and 0, 120 and 240 for Triadic. Tetradic uses 0, 60, 180 and 240, and Square uses 0, 90, 180 and 270. Analogous uses -60, -30, 0, 30 and 60, so the base is the middle swatch.

Worked example: #3b82f6 is hsl(217, 91%, 60%). A Square scheme gives hues 217, 307, 37 and 127, all at 91 % saturation and 60 % lightness. The third swatch is $217 + 180 = 397$, and $397 - 360 = 37$, which is an orange.

Monochromatic and Random

Monochromatic keeps the hue and saturation and spaces the lightness evenly from 10 % to 92 %. For $n$ swatches, step $i$ counted from 0 has

$L_i = 10 + \frac{82\,i}{n - 1}$

With five swatches that gives 10, 30.5, 51, 71.5 and 92 %. The step nearest the base colour is replaced by the base itself, so your colour is always in the set.

Random ignores the base. Each colour gets any hue, a saturation from 40 to 90 % and a lightness from 30 to 75 %, which keeps results lively without being washed out or nearly black.

Reading the contrast badges

Each swatch shows a ratio and a badge for white text (On white) and for black text (On black). The tool uses the WCAG 2.x relative luminance of the linearised sRGB channels:

$L = 0.2126\,R + 0.7152\,G + 0.0722\,B, \qquad \text{ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$

Here $L_1$ is the lighter colour. The badge is AAA from 7:1, AA from 4.5:1, AA Large from 3:1 and Fail below that. Ratios are truncated to two decimals, never rounded up, so a badge is never flattering. White on black is 21:1. The base #3b82f6 is 3.67:1 on white (AA Large) and 5.70:1 on black (AA), so black text suits it better.

Editing, locking and sharing

Type a valid colour into any Hex code field and that swatch changes at once. Invalid text shows a message and changes nothing. A locked swatch keeps its colour when you regenerate the palette or change the scheme or base. Press the space bar to draw a new palette when no button or text field has focus.

The address is kept up to date as ?colors=3b82f6-...&scheme=triadic, with up to 12 colours and no #. Copy it to share the palette, and opening it shows the same colours.

Using the result

Copy CSS gives :root { --color-1: #3b82f6; ... }, ready for a stylesheet. Copy JSON gives an array of objects with hex, rgb and hsl. Download PNG is a 1200 by 240 strip named palette.png.

To start from a photograph instead, use the Image Color Picker or the Color Extractor. To see the colours in a pattern, try the SVG Pattern Generator. For a page that opens on the colour-wheel schemes, see the Color Scheme Generator, and for quick random sets, the Random Color Palette.

Frequently asked questions