Color Palette Generator
Start from one colour you already like and get a set of swatches built around it. Five harmony rules, and every swatch copies its hex value when you click it.
About this tool
Enter a base colour as hex or pick it, then switch between Complementary, Analogous, Triadic, Monochromatic and Shades. Each rule is a different way of moving around the colour wheel from where you started, so the same base colour produces five quite different schemes.
Randomize drops in a fresh base colour when you have no starting point at all and want to see what turns up. The swatches recalculate immediately, and clicking one puts the hex on your clipboard.
Everything runs in your browser — nothing you enter here is sent to a server or stored. Provided as is, without warranty.
How many colours a product actually needs
Fewer than most palette tools imply. A small product ships fine with one brand colour, one accent used sparingly for things like destructive actions, a neutral ramp of four or five greys for text and surfaces, and semantic colours for success, warning and error. That is it. If you find yourself with twelve brand colours and no rule about which goes where, the palette is doing nothing for you beyond looking busy.
The harmony rules here are most useful as a starting shape rather than a finished answer. Monochromatic and Shades are the two you will reach for most often in practice, because what a product interface really needs is a ladder of tints of one hue for backgrounds, borders, hover states and pressed states. Complementary and Triadic are better suited to marketing pages, illustration and charts, where you want colours that stay distinct from one another rather than blending.
The caveat worth internalising: these harmonies are generated in HSL, which is convenient maths but not perceptually even. Two swatches with the same L value will not look equally bright to your eye — a yellow at 50% lightness reads far brighter than a blue at 50% lightness. So a palette that looks perfectly balanced as a row of squares can fall apart the moment you use those colours for text, because the darker-looking hues silently fail contrast while the lighter ones pass. Always take your candidate colours through the WCAG contrast checker before you commit.
When you settle on something, write the hex values into CSS custom properties or design tokens straight away and refer to them by name everywhere. Hardcoded hex values scattered through components are what makes a rebrand expensive later. You will also want opacity variants of your brand colour for overlays, focus rings and subtle borders — the colour transparency generator will produce those RGBA values for you.
Ready to see where agents can take cost out of your business?
Tell us about the process you want to optimise. Vlad personally reviews every brief and replies within one business day.