Color Palette Generator

The Color Palette Generator helps you turn a single starting colour into a set of colours that belong together, then hands you the hex codes you need for stylesheets, design software or a brand sheet. It is aimed at web designers choosing a scheme for a landing page, developers who need a consistent accent and highlight pair, and anyone putting together slides, charts or a social template without a design background. Rather than guessing which blue sits well beside which orange, you work from colour relationships that have been used in print and screen design for decades: hue rotation for contrast, lightness steps for depth. Each swatch is shown as a hex value so you can paste it directly into a CSS custom property, a Figma fill or a spreadsheet chart series without any conversion step in between.

Colour palettes are built on the HSL model, which describes a colour by hue, saturation and lightness. Hue is an angle from 0 to 360 degrees around a circle: red sits near 0, green near 120 and blue near 240. Saturation runs from 0 per cent, a flat grey, to 100 per cent, a fully vivid colour. Lightness runs from 0 per cent black through 50 per cent, where the hue is at its strongest, to 100 per cent white.

Related colours come from moving around that circle by fixed amounts while leaving saturation and lightness alone. Adding 180 degrees gives the complement, the colour that sits directly opposite and produces the sharpest contrast. Adding and subtracting 120 degrees gives a triad, which suits three-category charts. Shifting by roughly 30 degrees either side gives analogous colours, which look calm because they share a family.

Shades and tints come from a second move. Holding the hue and saturation fixed and lowering lightness produces darker steps for text and borders; raising it produces pale steps for backgrounds and hover states. A hex code is simply the resulting red, green and blue channels written as three pairs of base-16 digits.

Take a base colour of hsl(210, 70%, 50%), a confident mid blue. Converting it to RGB uses the standard formula. Chroma C equals (1 minus the absolute value of 2L minus 1) multiplied by S, which is (1 - 0) x 0.7, so C is 0.7. The intermediate value X is 0.35, and the offset m is L minus C divided by 2, which is 0.5 - 0.35, or 0.15.

Because the hue of 210 degrees falls in the 180 to 240 band, the unshifted channels are (0, X, C). Adding m gives (0.15, 0.50, 0.85). Multiplied by 255 and rounded, that is red 38, green 128, blue 217, written in hex as #2680D9.

Now rotate the hue by 180 degrees to 30 and repeat. At 30 degrees the channels are (C, X, 0), which becomes (0.85, 0.50, 0.15) after adding m, or red 217, green 128, blue 38: hex #D98026. You now have a blue and a warm orange of identical intensity. Use #2680D9 for links and primary buttons, and reserve #D98026 for the single action you most want clicked.

A palette that looks balanced as a row of swatches can still fail in use, because swatches are viewed at large size while real text is small. Before adopting a scheme, check the contrast between your text colour and the background behind it. The Web Content Accessibility Guidelines ask for a ratio of at least 4.5 to 1 for normal body text and 3 to 1 for large text of roughly 24 pixels or above. Mid-tone colours are the usual offenders: a medium blue on a medium grey can look attractive and still be unreadable.

Spread the colours unevenly rather than in equal thirds. A common working split is a dominant neutral across most of the surface, a secondary colour for structure, and a small accent used sparingly, which is what gives an accent its force.

Two further habits save trouble later. Never signal meaning by hue alone, since red and green are indistinguishable for many people with colour vision deficiency; add an icon or label. And test the palette against a dark background, as saturated mid-tones that read well on white often glow uncomfortably on near-black.