Free · browser-based · no sign-up
Color Palette Hex Code Generator
Pick one base color and get a harmonious 3–8 color palette with hex, RGB and HSL values, one-click copying, WCAG AA contrast checks and a live UI mockup preview. Every calculation runs in your browser.
- Harmony rules
- 6 schemes
- Palette size
- 3 to 8 colors
- Copy formats
- CSS · SCSS · Tailwind · JSON
Build your palette
One base color plus a harmony rule is all it takes.
Your 5-color complementary palette
Computed in your browser in under 50ms — nothing is uploaded.
Live UI preview
The same palette applied to a landing page mockup and a dashboard card — judge the harmony and the contrast before you ship it.
Ship a landing page today
Every color in this card comes from your palette: heading, body copy, badge, buttons and the tinted surface behind them.
Export your palette
Drop the palette straight into your stylesheet as CSS custom properties, SCSS variables, a Tailwind config snippet or JSON.
Palette source code tap to show or hide
How it works
Three steps, no account, no upload — the maths happens on your device.
Type a hex code or use the color picker. Invalid values show an inline hint and your last valid palette stays on screen.
Complementary, analogous, triadic, tetradic, split-complementary or monochromatic, with 3 to 8 swatches and an optional WCAG AA contrast pass.
Copy any hex, RGB or HSL value with one tap, or take the whole palette as CSS, SCSS, Tailwind or JSON.
Why designers keep this tab open
Harmony generation, hex→RGB→HSL conversion and contrast ratios are computed locally, so the palette updates as fast as you can type.
Every swatch is measured against white and black. Failing colors get a warning badge, and auto-adjust nudges lightness until they pass at 4.5:1.
Copy CSS custom properties, SCSS variables, a Tailwind theme snippet or JSON — the exact formats you paste into a repo.
See the palette on a hero, a badge, buttons, a dashboard card and an accent chart before you commit to it.
Swatch tiles stack full width with large tap targets, hex labels are always visible and the export block collapses out of the way.
No account, no tracking of your colors, no server round-trip. Everything stays in the browser tab.
FAQ
What makes a palette harmonious?
Each harmony rule keeps hues at fixed angles on the color wheel — 180° for complementary, ±30° for analogous, 120° for triadic, 90° for tetradic, 150°/210° for split-complementary — then varies lightness so the swatches stay distinguishable.
How is contrast calculated?
With the WCAG relative-luminance formula: each channel is linearised, weighted (0.2126 / 0.7152 / 0.0722) and turned into a ratio between 1:1 and 21:1. Level AA needs 4.5:1 for body text.
Can I use the palette commercially?
Yes. Colors are not copyrightable — copy the hex codes into client work, brand guidelines or your own product without attribution.
Does contrast mode change my base color?
Only when auto-adjust is on and a swatch sits below 4.5:1 on white. The hue and saturation are preserved and only lightness is shifted, so the palette stays recognisable.
Does the tool work offline?
Once the page has loaded, yes — every calculation is local JavaScript, so you can keep generating palettes without a connection.
Why did copying fail on my browser?
Clipboard access is blocked outside secure contexts and in some older browsers. The tool then selects the text in the export block so you can press Ctrl+C (or ⌘C) yourself.