Color palette generator
GeneratorsNo. 13 / 84
Build a palette from any hex color: complementary, analogous, triadic and more. Copy every hex or the whole CSS block in one click.
five colors that get along, which is more than most offices manage.
work surface
Math, not advice — results are indicative.Read the disclaimer.
most-used utilities
A calm interface
Start from your brand color and try monochrome or analogous.
A chart that needs to pop
Triadic or tetradic gives you distinct series without making them unrelated.
A full CSS theme
Copy the variables block and paste it straight into :root.
pro tips
Complementary pairs are loud. Use one as the accent and let the other dominate, not both at full strength.
Monochrome palettes are the safest for interfaces: same hue, different lightness, and the text stays readable.
Check the final hex values against real text. A pretty palette can still fail contrast.
what it does
Start with one color and the page builds a set around it. Complementary pushes to the opposite side of the color wheel, analogous stays close, triadic spreads three ways, and monochrome keeps the hue and changes the lightness. It is the fastest way to stop guessing which colors belong together.
The palettes are generated in HSL rather than RGB, because hue rotations are what make a scheme look intentional. Change the base and the whole set moves with it; change the rule and the same base produces a different mood.
Use it for a landing page, a chart series, a slide deck or a room. Copy a single swatch for a quick decision, or copy the CSS variables block when you want the palette to travel into code without retyping six hex values.
Nothing is saved and nothing is sent. The base color stays in the page, the swatches update live, and the random button is there for when you want a starting point that is not blue again.
quick answers
What is the difference between RGB and HSL here?
The palette is calculated in HSL because hue, saturation and lightness map naturally to color relationships. The output is still hex, ready for CSS.
Are these palettes accessible?
Not automatically. Accessibility depends on contrast against text and background, so check the final pair with a contrast tool.
Can I use the palette commercially?
Yes. Colors are not copyrightable, and the generated values are yours to use.