How to build a website color palette that works
A good web palette isn't five pretty colors. It's a small system with jobs: one color people remember you by, one that tells them where to click, and a few quiet neutrals that carry the text and backgrounds. Generate freely, but judge every candidate palette against those jobs.
The 60 / 30 / 10 rule
Interior designers have used it for decades and it translates directly to screens. Roughly 60% of a page is a dominant neutral (background), 30% is a supporting color (cards, sections, headers) and 10% is the accent that pulls the eye to buttons and links. If a generated palette has three loud colors, lock the best one as your accent and keep generating until the rest settle down.
Which harmony to pick
- Analogous uses neighboring hues. Calm and cohesive, ideal for wellness, hospitality and editorial sites.
- Monochromatic is one hue in different lightness levels. Very easy to keep consistent, and pairs well with a single contrasting accent.
- Complementary pairs opposite hues for maximum punch. Use the second color sparingly, mostly for calls to action.
- Split complementary and triadic are livelier and suit playful brands, kids' products and events.
- Dark UI builds deep, slightly tinted neutrals with one bright accent, the look used by most developer tools.
Why this generator uses OKLCH
Most generators pick colors in HSL, where a "50% lightness" yellow looks far brighter than a "50% lightness" blue. That's why random palettes often have one color that screams. This tool works in OKLCH, a color space built around how people actually perceive lightness and saturation, so the colors in a palette sit together naturally.
From palette to production
Export the palette as CSS custom properties and reference the variables everywhere instead of hard-coded hex values. Then you can retheme the site by changing five lines:
:root {
--color-1: #0a0d26; /* background */
--color-2: #1b2052; /* surfaces */
--color-3: #ff8a1f; /* accent */
}
.btn { background: var(--color-3); }
Before you ship, check every text and background pair with the WCAG contrast checker, and turn your brand color into a full 50 to 950 scale with the Tailwind shade generator. Have a photo you want to match? Pull colors straight from it with palette from image.
Frequently asked questions
How do I generate a color palette?
Press the space bar or the Generate button. Lock any color you want to keep by clicking its lock icon, then keep generating until the rest fall into place.
What is the best harmony for a website?
Analogous and monochromatic palettes are the easiest to use on websites because they feel calm and cohesive. Use complementary or split-complementary when you need a strong accent color for buttons and links.
How many colors should a website palette have?
Most sites work best with one primary brand color, one accent, and two or three neutrals for text, backgrounds and borders. Five colors is a good starting point.
Can I use these palettes commercially?
Yes. Colors cannot be owned, and every palette you generate or pick from the gallery is free to use in any project.