Turn one brand color into a complete website palette: background, surface, border, text, muted text, primary, hover, link, on-primary and semantic success/warning/danger — for light or dark theme. Text and link roles are automatically adjusted until they pass WCAG contrast on your background.
Settings
Generated locally in your browser — your settings and results never leave this page.
From one brand color to a working interface
Between “we have a blue” and a functioning website lies a dozen unglamorous decisions: what exact off-white the background should be, how dark body text needs to be, what the border gray is, how the button hover differs from the button. This generator makes those decisions the way a careful designer would — deriving every role from the brand hue in OKLCH, then bending the text-bearing roles until they measure their WCAG targets — and shows its homework in the contrast table.
The twelve roles and their logic
Background and surface sit at whisper chroma near the lightness extreme (theme-dependent), close enough to feel continuous, far enough to separate cards from page. Border splits the difference. Text and muted text are fitted to 7:1 and 4.5:1 against the actual background — not assumed, iterated. Primary keeps your brand color (light theme) or a lightened dark-safe version (dark theme); hover nudges its lightness; on-primary is measured black-or-white. Link is the brand hue bent until it passes 4.5:1. Success, warning and danger take conventional hues at brand-consistent chroma. Every choice is inspectable in the export.
Reading the mock and the table together
The live page mock shows the palette doing its job — text on background, link inline, button with its label — while the table certifies it with measured ratios. Both matter: the mock catches aesthetic misfires the numbers permit; the table catches readability failures the mock’s small sample hides. Ship only when both agree.
Growing beyond twelve roles
Real products sprout states: pressed, focused, visited, selected, disabled. Derive them from the exported roles in the same OKLCH terms (hover minus 0.06 L is the built-in example) rather than freelancing new colors, and the system stays a system. For full theming across light and dark simultaneously, the Light/Dark Theme Generator emits coordinated token sets; for state-token scaffolding, the Semantic Color Token Generator continues the pattern.
How to use the Website Color Palette Generator
- Pick your brand color and the theme (light or dark).
- Twelve UI roles derive automatically, contrast-fitted to the background.
- Review the live page mock and the measured contrast table.
- Export as CSS variables, SCSS, JSON or design tokens.
Frequently asked questions
What roles does the website palette include?
The working set of a real site: background, surface (cards), border, text, muted text, primary, primary-hover, on-primary (text over buttons), link, and semantic success/warning/danger. Each is derived from your brand hue in OKLCH so even grays and states carry a whisper of the brand.
How are the text and link colors guaranteed readable?
They are fitted, not hoped: the generator adjusts their lightness step by step until measured contrast reaches the target – 7:1 for body text, 4.5:1 for muted text and links – against the actual generated background. The contrast table prints the achieved ratios.
Why does the dark theme not just invert the light one?
Dark UIs have their own physics: backgrounds hover near-black but not pure black, chroma is damped so colors do not vibrate, primary lightens instead of darkening for hover. The generator encodes those conventions rather than flipping channels.
Can I use both themes together for a light/dark site?
Generate both (one control switch) and pair the exports under prefers-color-scheme, or feed your brand color to the Light/Dark Theme Generator, which emits the two coordinated token sets in one pass with a dark-mode strategy of your choice.
What if my brand color itself fails contrast as a button?
The on-primary role compensates – it picks black or white by measurement, so the button stays readable even when the brand color is mid-toned. For the link role the brand hue is darkened/lightened until it passes; your logo can stay exactly on-brand while interactive text shifts slightly.
How do I extend the twelve roles when my UI needs more?
Derive, do not invent: hover/active variants via Shades and Tints of the role color, additional surfaces as small lightness steps from surface, more semantic states from the Semantic Color Token Generator. Keeping derivations in OKLCH preserves the coherence this palette establishes.
Does the mock preview reflect real rendering?
It is a genuine HTML/CSS mock using the exact palette – text, link, button and borders composited live. What you see is what the exported variables produce.
