Pick a base colour — type a hex code or use the swatch — and the rest of the palette is derived from it: a full ramp of tints and shades, the complementary colour, the two analogous neighbours, and the triadic set. Click any swatch to copy its hex code.
Nothing is saved and nothing is sent anywhere. Try a few base colours, then read the rest of this page before you commit to one.
The thing that makes a website look amateur is using a palette evenly. Professional work is lopsided, and the usual proportion is 60–30–10: about 60% a neutral background, 30% a supporting colour for sections and cards, and 10% the accent on buttons and links. If everything is the accent colour, nothing is. Then add two more that no generator gives you — a very dark colour for body text and a very light one for page backgrounds. Nearly every real design system is two brand colours and four or five neutrals.
Text needs a contrast ratio of at least 4.5 to 1 against its background, and large headings 3 to 1. That is the WCAG AA standard, and in the United States it is not merely a nicety — accessibility complaints about websites are real and increasingly common.
The practical consequence is that a beautiful mid-tone is often a terrible text colour. Light grey on white and mid-blue on mid-green both fail. Keep the accent for buttons and links where the text on top is white or near-black, and set body copy close to #1a2233 rather than pure black — pure black on pure white is harsh to read at length. This is exactly what the tints and shades ramp is for: pick the accent for its character, then take a darker step from the ramp when it has to carry text.
A large share of visitors browse with dark mode on, and a palette that sings on white can become unreadable when the background flips: the same mid-tone that had good contrast against white often has almost none against near-black. Take a lighter step from the ramp for dark backgrounds — the same brand colour, adjusted so it stays legible.
Colour carries expectation, and fighting it costs you trust. Blues and deep greens read as dependable and suit professional services, medical practices and finance. Warm reds, oranges and terracotta read as appetite and urgency, which is why they suit food. Black with a single sharp accent reads as premium. Soft, muted tones read as calm and suit wellness and beauty. None of this is a rule you cannot break — but breaking it should be a decision rather than an accident. The recent work page shows these palettes in use on real businesses.
Define your colours once as CSS custom properties and reference them everywhere, so a change of mind is one edit rather than a hundred. Name them for their job, not their appearance — accent rather than green — so a rebrand does not leave your stylesheet full of variables called green that are now blue.