Color Palette Generator
Generate color palettes from a base color using complementary, analogous, triadic, tetradic, square or monochromatic harmonies. Lock and export CSS/Tailwind.
Palette settings
Base hue + the opposite hue (180°).
Lock colors you like; Regenerate picks a new random base color and keeps locked colors.
Export
Palette
:root {
--palette-1: #3b82f6;
--palette-2: #b07d00;
}Related Tools
View AllWhat is Color Palette Generator?
Builds a palette from one base colour using classic colour-wheel harmonies. Hue rotation can be done in perceptual OKLCH (keeps perceived lightness equal) or classic HSL. Colours can be locked before regenerating, and the palette exports as CSS variables, SCSS, Tailwind v3 config, Tailwind v4 @theme or JSON.
How to use Color Palette Generator
- Enter a Base color (hex, rgb(), hsl() or oklch()) or click Regenerate for a random one.
- Choose a Color harmony and whether hue is rotated in OKLCH or HSL.
- Lock colors you want to keep; Regenerate then only replaces unlocked ones.
- Click a swatch to copy its hex value.
- Pick an export Format and Token name and copy the code.
Example
Base #ff0000, Triadic, HSL
:root {
--palette-1: #ff0000;
--palette-2: #00ff00;
--palette-3: #0000ff;
} When to use Color Palette Generator
Use it to explore colour schemes for a brand, UI theme or illustration. A harmony is a starting point, not an accessibility check: verify text/background contrast separately. To expand a single colour into a 50–950 scale use the Color Shades Generator.
How Color Palette Generator works
Harmonies rotate the base hue by fixed angles while keeping saturation/chroma and lightness: complementary 0°/180°, analogous 0°/±30°/±60°, triadic 0°/120°/240°, split complementary 0°/150°/210°, tetradic 0°/60°/180°/240°, square 0°/90°/180°/270°. Monochromatic keeps hue and changes lightness by −30, −15, 0, +15, +30 (HSL %) or ±0.15/±0.3 (OKLCH L). OKLCH colours outside sRGB are gamut-mapped by reducing chroma. Regenerate picks a random base with hue 0–360°, saturation 55–85% and lightness 45–60%.
Common Use Cases
- Brand colour exploration from a logo colour
- Accent colours for a UI theme
- Data visualisation category colours
- Exporting a palette as CSS custom properties
- Tailwind theme setup
FAQs
Should I rotate hue in OKLCH or HSL?
OKLCH keeps the perceived lightness of all colours equal, which gives more balanced palettes. HSL matches the classic colour wheel used in many design tools but its colours can differ a lot in brightness.
What does locking do?
A locked swatch keeps its colour when you change the base colour, harmony or press Regenerate.
Are the palettes accessible?
Harmonies say nothing about contrast. Check text and background combinations against WCAG contrast ratios before using them.