Color Palette Generator | Harmonious Color Schemes

How do I generate a color palette from a single hex color?

Enter your hex code in the Base Color field (e.g., #14b8a6) and click Generate Palettes. The tool converts it to HSL, then computes five harmony types — Complementary, Analogous, Triadic, Split-Complementary, and Monochromatic — each as a row of five swatches. Click any swatch to copy its hex value to your clipboard.

What is the difference between complementary and split-complementary color palettes?

A complementary palette pairs your base hue with the color directly opposite it on the color wheel (180° away), creating maximum contrast. A split-complementary palette uses the two hues adjacent to the opposite (150° and 210° away), producing a similarly vibrant but slightly softer contrast that is easier to balance in UI design.

How do I use a generated palette in CSS?

Copy the hex values from the swatches and define them as CSS custom properties: –color-primary: #14b8a6; –color-accent: #b84e14;. Reference them throughout your stylesheet with var(–color-primary). This keeps your palette in one place and makes global updates trivial.

Can I start from a random color to get palette inspiration?

Yes. Click the Random Color button to generate a cryptographically random hex value and immediately compute all five palettes from it. This is useful for brand exploration when you do not have a starting color locked in.

What is a limitation of browser-based palette generation?

The palette calculations are done purely in HSL math and do not account for perceptual uniformity (as in the OKLCH or CIELAB color spaces). Colors at equal HSL lightness can look visually different in brightness, so always verify contrast ratios with a dedicated accessibility checker before finalizing a UI palette.