Pick a base color and instantly generate a harmonious palette using color theory. Choose from six harmony rules, fine-tune the results, and export as CSS variables, SCSS, or JSON — everything runs in your browser.
Color harmonies are combinations of colors that look pleasing together based on their positions on the color wheel. Rather than picking colors arbitrarily, using a harmony rule ensures the resulting palette has an inherent visual logic — colors feel like they belong together because they have a mathematical relationship in HSL or HSV color space. This is exactly how professional designers and design systems define their brand palettes.
This tool works in HSL space (Hue, Saturation, Lightness) which is the most intuitive model for manipulating colors programmatically. Hue is the pure color angle (0–360°), saturation controls intensity, and lightness controls how light or dark it is. All harmony calculations simply rotate the hue wheel by specific angles while keeping saturation and lightness constant.
:root {}$variable map for Sass projectsA well-chosen color palette is the cornerstone of any design system. The recommended approach is to define your palette as CSS custom properties (variables) in the :root selector, then reference those variables throughout your stylesheets — never hard-code hex values in component styles. This way, changing a single variable instantly updates the entire UI.
For design tokens that span multiple tools (Figma, code, iOS, Android), JSON is the standard interchange format used by tools like Style Dictionary and the W3C Design Token spec. Export your palette as JSON from this tool and feed it directly into your token pipeline.