Color Palette Generator
Generate color palettes online for free — lock the swatches you like, regenerate the rest and choose a harmony mode. Switch to Website color roles to get a background, surface, primary, accent and text color that pass WCAG AA contrast, with a live website preview. Export HEX, CSS variables, JSON, Tailwind or SCSS, or share the palette as a link.
100% private — runs entirely in your browser. Your files never leave your device.
| Pair | Ratio | Needs | Result |
|---|
New release
A calmer way to plan your week
Body copy sits on the background in the text colour, so you can judge readability before you build anything.
Need a matching dark theme, borders and muted text, page previews and fonts? Open these colors in the Website Color Palette Generator →
Lock the swatches you like (🔒) and regenerate the rest. Harmony modes derive colors from a shared hue using OKLCH for even, perceptually balanced steps. Website color roles builds a background, surface, primary, accent and text color and adjusts them until they meet WCAG AA contrast (4.5:1 for text, 3:1 for buttons and accents).
How to use the Color Palette Generator
- Press Generate (or the spacebar) for a new palette.
- Lock the colors you like with the padlock.
- Pick a harmony mode for a coordinated set.
- Switch to Website color roles for a light or dark website scheme that passes WCAG AA contrast.
- Export as CSS variables, JSON, Tailwind or SCSS, or copy a share link.
What you can use it for
- Build a color scheme for a brand or UI
- Explore harmonious palettes quickly
- Pick an accessible color palette for a website or app
- Export ready-to-use CSS variables, Tailwind theme colors, JSON or SCSS
- Lock favourites and iterate around them
More free tools
Working on a color scheme?
Pick, convert, mix and check colors with our full set of free, no-signup color tools.
Explore all free color tools →Frequently asked questions
How do I keep a color I like?
Click the lock icon (🔒) on a swatch, then press Space or Generate — locked colors stay while the rest regenerate.
What are the harmony modes?
Analogous, complementary, triadic and monochromatic derive colors from a shared hue; Auto gives varied, balanced sets. All use OKLCH for even steps.
How do I export the palette?
Copy any single swatch, or pick an export format — HEX list, CSS variables, JSON, Tailwind v4 (@theme), Tailwind v3 config or SCSS variables — and copy the code. Copy share link saves the exact palette in a URL.
What are website color roles?
Instead of five loose swatches, the Website color roles tab gives each color a job: background (the page), surface (cards, menus and navigation), primary (buttons and calls to action), accent (tags, links and highlights) and text. A live preview shows them on a sample web page, in a light or dark theme.
Do the website colors meet WCAG contrast?
Yes. The generator adjusts each unlocked color’s OKLCH lightness until text reaches at least 4.5:1 on both the background and the surface, the primary reaches 3:1 against the background, the button label reaches 4.5:1 on the primary and the accent reaches 3:1 on the surface. The contrast table shows every ratio. If you lock a color that cannot meet a check, the table marks it Fail rather than changing your locked color.
Is it free and private?
Yes — free, no signup, and generated entirely in your browser.