How many colors does it generate?

The palette contains 5 colors. That is enough for a base, surface, primary accent, secondary accent, and decorative color in many UI workflows.

Can I use the palette in Tailwind?

Yes. The Tailwind export gives a starter extend.colors block with brand1 through brand5 values.

Does it guarantee WCAG contrast?

No. It helps you choose colors, but you still need to check the final text and background pairs for contrast.

Yes. Lock a swatch to keep it unchanged when generating a new palette from the current base and harmony.

Color Palette Generator

Generate 5-color palettes from a base HEX color with monochromatic, analogous, complementary, triadic, tetradic, and random harmony modes.

Base color

Harmony mode

Tip: press Space for a new palette. Lock a swatch to keep it unchanged during the next generation.

Export

:root {

}

Generate a 5-color design palette

Use this color palette generator to start from one HEX color and build a compact palette for UI mockups, websites, dashboards, product cards, and brand experiments.

Choose a base color with a color picker or by entering HEX.
Switch between monochromatic, analogous, complementary, split-complementary, triadic, tetradic, and random harmony modes.
Copy each color as HEX, RGB, or HSL.
Export the full palette as CSS variables, Tailwind config, or JSON.

Harmony model

The tool uses HSL hue offsets around the color wheel. Harmony modes are quick starting points, not a substitute for testing the palette inside the real layout.

h_{ana l o g o u s} = h \pm 3 0^{\circ}

h_{co m pl e m e n t a r y} = h + 18 0^{\circ}

h_{t r ia d i c} = h + 12 0^{\circ}, h + 24 0^{\circ}

h_{t e t r a d i c} = h + 9 0^{\circ}, h + 18 0^{\circ}, h + 27 0^{\circ}

Mode	Typical feel	Good starting point for
Monochromatic	Quiet and cohesive	Dashboards, forms, restrained UI
Analogous	Soft and natural	Landing pages, editorial sections, backgrounds
Complementary	High contrast	Calls to action and accent states
Triadic	Lively	Illustrations, charts, playful interfaces
Tetradic	Rich but harder to balance	Infographics and multi-section layouts

Accessibility and export notes

Check final text contrast

A harmonious palette does not guarantee accessible text. WCAG contrast depends on the exact foreground/background pair, font size, weight, and final UI state.

The preview chooses black or white text for readability, but it is not a full WCAG audit. Check final text/background pairs before shipping.

CSS variables are useful for plain CSS, Tailwind export is a starter `extend.colors` block, and JSON works well for design-token scripts or internal tooling.

Frequently Asked Questions

Sources and References

Calculations are based on the listed reference sources. Links open in a new tab.

Updated: June 2, 2026

Related Tools

Random Color Generator

Generate one random color or a 5-color random palette with HEX, RGB, and HSL values for CSS, design mockups, and test data.

Open

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with live preview, color stops, angle or position controls, presets, and copy-ready CSS.