Color Palette Generator
Press Space to get a new palette of 3 to 10 colors, built in OKLCH from the harmony you pick. Lock the colors you like, fix any pair that fails WCAG contrast, and export to CSS, Tailwind, SCSS, JSON, ASE, PNG or SVG. Free, no sign-up, and it all runs in your browser.
- Dark Slate Gray
- Medium Turquoise
- Byzantium
- Cotton Candy
- Burnt Sienna
Contrast between every pair
3 of 10 pairs pass AA, 1 pass AAA.
AA needs 4.5:1 for normal text, AAA needs 7:1. Large text and UI parts need 3:1.
- AAA
- AA
- AA
- Large text only
- Large text only
- Fail
- Fail
- Fail
Preview on an interface
The lightest color becomes the surface, the darkest the text, and the most colorful the primary. Any text below 4.5:1 switches to black or white.
- Body text on surface#02312b on #ffcdef10.31:1
- Navigation#ffcdef on #02312b10.31:1
- Primary button#000000 on #cf58395.11:1
- Accent badge#ffcdef on #812b6c6.10:1
- Card#02312b on #5dbfc06.55:1
- Link on surface#02312b on #ffcdef10.31:1
How the generator works
Every palette starts from a seed, a harmony rule and the colors you locked. The same inputs always give the same palette, which is why a shared link opens exactly what you saw. The exact rules, thresholds and formulas are on the methodology page.
Harmonies in OKLCH
Hues are placed on the OKLCH wheel rather than the HSL one. Analogous keeps neighbors close together, complementary pairs a hue with its opposite 180 degrees away, split complementary takes the two hues on either side of that opposite, and a triad spaces three hues 120 degrees apart. Monochrome holds one hue and varies lightness and chroma. When a locked color has real chroma, it becomes the anchor and the free slots are built around it. Read OKLCH explained for why this space keeps lightness steps even.
Contrast-aware mode
With contrast-aware mode on, which is the default, every generated palette contains at least one pair at 4.5:1 or better, the WCAG 2.2 AA level for normal text. The generator gets there by spreading lightness, never by changing hue, and it never touches a locked color. The contrast panel under the palette counts how many of the possible pairs pass AA and AAA, live, as you edit.
Fix a failing pair
Every pair below 4.5:1 gets a Fix action. It searches for the smallest change in OKLCH lightness that lifts the pair to 4.5:1, darker or lighter, keeps the hue, and only ever changes an unlocked color. One click applies it and Undo takes it back. To check a single pair in more depth, including large text and UI parts, use the contrast checker.
Keyboard shortcuts
- Space generates a new palette, unless a button or field has focus.
- L locks or unlocks the focused or hovered color, and C copies its hex value.
- E opens the export sheet, U undoes and Shift + U redoes.
- / jumps to the first hex value and ? lists every shortcut.
Frequently asked questions
How do I generate a color palette?
Press Space, or the Generate button, and HueKit builds a new palette of 3 to 10 colors from the harmony you picked. Lock any color you want to keep with L or its lock button; the next palette is built around the locked colors and leaves them exactly as they are.
What does contrast-aware mode do?
It guarantees that at least one pair of colors in every generated palette reaches 4.5:1, the WCAG 2.2 AA minimum for normal text, as long as one color is unlocked. It is on by default and only adjusts lightness, so the harmony you chose stays intact.
Why does HueKit build palettes in OKLCH?
OKLCH is perceptually uniform: equal steps in lightness look like equal steps to the eye, which plain HSL cannot promise. Hue angles for each harmony are set in OKLCH, and chroma is reduced until a color fits in sRGB, so a hue never shifts because a channel was clipped.
How do I export a palette to Tailwind CSS?
Open Export (or press E) and choose Tailwind v4 @theme for a block of --color-* variables in oklch(), or Tailwind v3 config for a theme.extend.colors object. Token names come from the nearest named color, so you get bg-medium-turquoise instead of bg-color-2.
Can I share or save a palette without an account?
Yes. Share copies a link such as /palette-generator?c=02312b-5dbfc0-812b6c, with locks kept in &lk=. Save keeps the palette in this browser only, up to 200 palettes, and the library can be exported as a JSON file. Nothing is sent to a server.
Related tools
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.