Start with a color, choose a harmony, style and use case, then refine, test and export a complete theme.
HexPalette's color palette generator turns one base color into a complete, working theme — not just five swatches. Choose how the palette should behave across three axes, check it against WCAG contrast, preview it in light and dark, and export ready-to-use tokens.
Every palette begins with a base color you control — type a hex, use the color picker or eyedropper, or roll a random base. The generator builds the scheme around it, so the color you care about stays at the centre.
Most tools ask for one thing. HexPalette composes three: Harmony sets the hue geometry (analogous, complementary, triadic…), Style sets the character (muted, pastel, vibrant, earthy…), and Use case tunes the result for where it ships — a website UI, a dashboard, a brand or an editorial layout.
Each color is assigned a role — Surface, Secondary, Primary, Accent and Text. That turns a color scheme generator into a design-system starting point: you can see which color is the background, which carries the brand, and which is body text.
Generation and every nudge — lighter, darker, warmer, cooler — run in OKLCH, a perceptual color space. Lightness and hue stay consistent as colors shift, so this OKLCH palette generator avoids the muddy, uneven results HSL tends to give.
Every theme is checked for WCAG contrast as you build. This accessible color palette generator flags whether body text clears AA on its surface, warns when an accent is too subtle, and can fix a failing text pair in one click — and tell you what it changed.
When the theme works, export it. You get role-named tokens — background, surface, primary, secondary, accent, text, border and states — as CSS variables (light and dark in one file), a Tailwind config, JSON or SCSS. That is the difference between copying hex codes and handing a working theme to a project.
A color palette generator builds a set of colors that work together from a starting point — a base color, a harmony rule or a mood. HexPalette goes further: it produces a role-based theme (surface, primary, accent, text) with light and dark modes and export-ready tokens, not just five swatches.
Set your base color at the top, then pick a harmony, style and use case (or leave them on Auto). Press Compose or the Space bar to generate, lock the colors you like, and refine the rest — everything updates live.
Yes. Every theme is tested against WCAG AA as you build. The accessible color palette generator shows which text and background pairs pass, warns when an accent is too subtle, and can adjust a failing text pair to clear AA — telling you exactly what it changed.
OKLCH is a perceptual color space where equal changes in lightness or hue look equal to the eye. Generating and editing in OKLCH keeps a palette even and avoids the muddy mid-tones HSL produces, which is why HexPalette works as an OKLCH palette generator under the hood.
Yes. Export role-named tokens — background, surface, primary, secondary, accent, text, border and states — as CSS custom properties (light and dark in one file), a Tailwind config, JSON or SCSS variables.
As you work, the address bar updates with your base color and palette, so you can copy the link to share or reopen a specific result. The clean /generator page stays the canonical tool page.