Color Palette Generator
Generate, lock, and export harmonious color palettes.
Generated locally in your browser. Nothing is sent to a server or stored.
- Four classic harmony rules from one base colour.
- Lock any swatch and hit Regenerate to reroll only the rest — the same iterative refinement workflow as Coolors and Adobe Color, not a full restart every time.
- Export the whole palette as ready-to-paste CSS custom properties or a Tailwind config snippet, not just raw HEX.
- Works in HSL, so the palette keeps a consistent saturation and lightness feel.
Why this is private
- Generated locally in your browser. Nothing is sent to a server or stored.
- Open your browser's DevTools → Network tab while using this tool — you won't see a request carrying your input, because it never leaves your device.
- Nothing you enter is uploaded to a server or shared with us — the processing happens entirely on your device.
Overview
Generates a 5-color palette from a base color using complementary, analogous, triadic and monochromatic color harmony rules — lock the colors you like and regenerate the rest, then export as CSS variables or a Tailwind config snippet.
How to use it
- 1Pick a base color and a harmony rule.
- 2Click the lock icon on any swatch you want to keep.
- 3Click Regenerate to reroll the unlocked swatches from a new random base.
- 4Copy any swatch's HEX, the full HEX list, or export as CSS variables or Tailwind config.
Frequently asked questions
What people use it for
Start a brand or UI colour schemePick a primary colour and get harmonious accents to build on.
Iteratively refine a paletteLock the colours that are working and keep regenerating the rest until the whole set feels right.
Drop a palette straight into a CSS or Tailwind projectExport as CSS custom properties or a Tailwind `colors` snippet instead of retyping five HEX values by hand.
Find an accent for an existing colourUse the complementary rule to get a colour that stands out against your base.
Build a chart colour setTriadic or analogous palettes give distinct-but-related series colours.
Create tints and shadesThe monochromatic rule returns five lightness steps of one hue.
Related tools
All developer toolsColor ConverterConvert colors between HEX, RGB, HSL and OKLCH.Color PickerPick a color from anywhere on your screen, or enter one manually — HEX, RGB, HSL, CMYK, OKLCH.CSS Gradient GeneratorBuild a linear or radial CSS gradient from multiple colors, with a live preview and one-click copy.Contrast CheckerCheck WCAG contrast ratio between two colors, including non-text and transparency.
Ready to use Color Palette Generator?
Color Palette Generator