How to pick a colour palette that doesn't look like a 2003 Geocities page

The shape of a good palette

Two anchors. One accent. Four to six semantic colours. That is the entire shape. The anchors are the colours the user sees most of the time — usually a background neutral and a brand colour. The accent is the colour the user sees when something matters — a button, a callout, a current selection. The semantic colours are for state: success (green), warning (yellow/amber), error (red), info (blue). A palette of more than 10 colours is almost always the result of "let me add one more just in case" — and the case never comes.

Choosing the anchors

Pick the brand colour first. It should be the colour the user associates with the product, which is usually the colour of the logo and the primary CTA. Then pick the neutral. A neutral is a desaturated colour, usually a grey or off-white, that the body text and most of the surface area sits on. The two together should have a contrast ratio of at least 4.5:1 (WCAG AA for body text) — the contrast checker on this site will tell you in one click.

Choosing the accent

The accent should be complementary to the brand colour — opposite on the colour wheel — so it stands out. If the brand is blue, the accent is orange. If the brand is red, the accent is teal. The accent should be used sparingly: one button per screen, one highlight per paragraph. If the accent appears more than 5% of the time on a page, it is no longer an accent; it is a second brand colour.

Semantic colours

Green for success, amber for warning, red for error, blue for info. Pick the values once, document them, and use them everywhere. The palette on this site is: success `#39ff14` (a high-saturation green that is visible on dark backgrounds), warning `#ffd700` (gold), error `#ff4d4d` (a soft red, not a blood red), info `#2dd4ff` (cyan, the brand). Each is a single hex value used in a single role.

Contrast and accessibility

WCAG AA requires a contrast ratio of at least 4.5:1 for body text and 3:1 for large text (18 pt and above). WCAG AAA is 7:1 for body and 4.5:1 for large. Anything below 4.5:1 is unreadable for low-vision users. The contrast checker on this site accepts two hex values and reports the ratio with a pass/fail against each WCAG level. Use it on every colour pair you ship.

What this site gives you

A colour palette extractor that pulls the dominant colours from any image. A WCAG contrast checker that tells you whether your foreground/background pair is readable. A 4-bit and 8-bit colour picker for the retro aesthetic, because sometimes you want a Geocities page on purpose.