Color Palette Generator
100% PrivateColor & Design ToolsBuild a harmonious color palette from a single base color using classic harmony rules.
Runs entirely in your browser. Your input is not uploaded to Ovatly or anywhere else.
:root {
--color-palette-1: #24EBAC;
--color-palette-2: #24C6EB;
--color-palette-3: #2563EB;
--color-palette-4: #4824EB;
--color-palette-5: #AC24EB;
}
/* Plain list */
#24EBAC
#24C6EB
#2563EB
#4824EB
#AC24EB- 1Enter a base color with the swatch or as a HEX value.
- 2Choose a harmony rule from the dropdown.
- 3Copy any single color, or copy the whole export block.
- 4Use Random base color when you want a fresh starting point.
With base #2563EB and the Analogous rule, the palette is #24EBAC, #24C6EB, #2563EB, #4824EB and #AC24EB: the base plus the two neighboring hues on each side, 30 degrees apart, all at the same saturation and lightness.
- Harmonies are computed in HSL space, so every color in a hue-based palette shares the base saturation and lightness; real designs usually adjust lightness per color afterwards.
- Monochrome is the exception: it keeps the hue and saturation and steps through five lightness levels instead.
- The export is CSS custom properties plus a plain list; for named, role-based tokens use the CSS Variable Palette Builder.
Analogous is the safest for calm interfaces, complementary gives one strong accent against a main color, and triadic suits playful designs that need three clearly different hues.
About this tool
The Color Palette Generator builds palettes from a single base color using the classic harmony rules of color theory: complementary, split-complementary, analogous, triadic, tetradic and monochrome. Because every palette is computed from hue relationships rather than random picks, the colors genuinely belong together, which makes it a fast starting point for brand colors, interfaces and illustrations.
Related tools
Part of Ovatly's free tools in Color & Design Tools.