Generate a Color Palette From One Color
Build a full color palette from a base color — shades, complementary, and analogous — and copy each HEX code.
Click any swatch to copy its HEX.
Generated locally
Safe for unreleased branding
No account
Secure connection
How it works
- 1
Pick a base colour
Paste a HEX code — usually the brand colour you are already committed to.
- 2
Choose a harmony rule
Complementary for contrast, analogous for calm, triadic or tetradic for variety, shades for a single-hue scale.
- 3
Copy the palette
Take the HEX values straight into your stylesheet, theme editor or design tool.
Why use this tool
Five harmony rules
Complementary, analogous, triadic, tetradic and shades, each a defined relationship on the colour wheel rather than a mood.
One input, whole set
Give the brand colour you already have; the rest are derived from it, so the palette is anchored rather than assembled.
Copyable HEX values
Every swatch comes with its code, ready for a stylesheet or a design file.
See the relationship
The generated colours are shown together, which is the only way to judge whether a combination holds.
Nothing is uploaded
The wheel arithmetic runs in your browser — no colour values are sent anywhere.
Free with no account
No sign-up, no limit on palettes, and no watermark.
What a harmony rule actually is
The rules are positions on a hue wheel, not aesthetic opinions. Take the base colour's hue angle and the rule tells you where the others sit: complementary at +180°, analogous at roughly ±30°, triadic at +120° and +240°, tetradic as two complementary pairs. That is the whole mechanism. Their usefulness is not that these combinations are objectively beautiful — it is that they are *predictable*. A palette built by rule fails in ways you can reason about, while a palette assembled by picking swatches that each looked good in isolation tends to fail in ways nobody can diagnose, because there is no relationship to inspect.
Choosing between the rules
Each rule solves a different problem. Analogous hues sit next to each other and share a family resemblance, which makes them safe and quiet — good for a background or an illustration, weak when you need something to stand out. Complementary maximises separation, which is exactly what an accent needs: one dominant colour, one opposite hue used sparingly for the action you want clicked. Triadic gives three distinct hues that stay balanced, but only if one clearly dominates and the other two support. Tetradic offers four and is genuinely difficult; most tetradic palettes that work in practice use two of the colours at a fraction of the area of the other two.
Why an interface needs shades more than hues
The rules above answer "which colours go together", but a real product needs something else: many steps of the same colour. A page background, a card surface, a hairline border, a disabled label and body text are usually all the same hue at different lightness values, and getting those steps evenly spaced matters more to the finished look than the choice between triadic and tetradic. That is what the shades mode produces — a single hue stepped through lightness, which is exactly how a design-system colour scale is built. Most projects need one accent hue and a well-built neutral scale far more than they need five distinct hues.
A generated palette is a starting point, not a design system
What the wheel gives you is hue relationships. What it cannot give you is roles. A working palette assigns each colour a job — this is the surface, this is the primary action, this is the destructive action, this is the border — and those assignments depend on your interface, not on geometry. Nor does the wheel know anything about legibility: a triadic scheme can be perfectly balanced and still put text on a background at 2.5:1. Generate the relationships here, assign the roles yourself, then run every text-on-background pair through the contrast checker before any of it reaches a component library.
The 60-30-10 proportion
A common failure is to treat a five-colour palette as licence to use five colours equally, which produces an interface that looks busy and has no focal point. The convention that survives contact with real layouts is roughly 60% a dominant neutral, 30% a secondary, and 10% an accent. Under that ratio, a complementary pair is not two colours in competition — it is a large calm surface and a small deliberate interruption. This is also why palettes look better in a mockup than in production: a mockup shows the swatches at equal size, and the interface will not.
Converting and extending a palette
Once you have the set, the practical work is turning it into something a stylesheet can use. Hue values from a wheel arrive as HEX; if you plan to derive hover, active and disabled variants, convert them to HSL first with the colour converter and step the lightness, because that keeps every variant in the same hue family instead of drifting. Keep the base colours as the single source of truth and generate the variants from them rather than storing dozens of near-identical hex codes — a palette that grows by hand becomes inconsistent within a few months.
Common mistakes to avoid
- Using every colour in the palette at equal weight. Five colours at equal area produces an interface with no focal point; keep roughly 60% dominant, 30% secondary, 10% accent so the accent actually reads as one.
- Choosing a scheme before knowing what needs to stand out. Analogous is calm and weak at emphasis; complementary exists to make one element unmissable. Pick the rule from the job, not from the look of the swatches.
- Assuming a balanced palette is a legible one. The colour wheel knows nothing about contrast ratios — a harmonious pair can still put text at 2.5:1 against its background.
- Building an interface from hues alone. Surfaces, borders, disabled states and body text are mostly one hue at different lightness values; a good shades scale matters more day to day than a fourth accent colour.
- Hand-picking hover and active variants as new hex codes. Derive them by stepping lightness in HSL from the base colour, or the family drifts in hue as the palette grows.
How it compares
| KeroTools | Palette galleries | Design software | |
|---|---|---|---|
| Starts from your brand colour | Yes | Usually random | Yes |
| Named harmony rules | Five | Rarely stated | Yes |
| Values sent to a server | Never | Often | No |
| Account required | No | Often for saving | Licence required |
| Works offline | After first load | No | Yes |
| Cost | Free | Free / paid | Paid |
Features
Complementary
The hue directly opposite, 180° away — maximum separation, used for a single accent against a dominant colour.
Analogous
Neighbouring hues about 30° apart, which share family resemblance and read as calm and coherent.
Triadic
Three hues evenly spaced 120° apart — vivid and balanced, but needs one clear dominant.
Tetradic
Four hues in two complementary pairs; the richest scheme and the hardest to balance.
Shades
One hue stepped through lightness — the scale interfaces actually need for surfaces, borders and text.
HEX for every swatch
Each generated colour carries its code, ready to copy.
No installation
Nothing to download or install — it works on the web page.
Arabic & RTL friendly
Full interface in eight languages, including right-to-left Arabic.
Secure by default
Served over HTTPS, with no file tracking and no third-party upload.
Who uses it
Designers
Deriving a coherent set from an existing brand colour instead of assembling swatches by eye.
Front-end developers
Getting a shades scale for surfaces and borders without hand-picking a dozen greys.
Small business owners
Extending a single logo colour into something usable across a site and its printed material.
Anyone theming a template
Filling in the secondary and accent slots a theme editor asks for, from one colour they already have.
Frequently Asked Questions
No. Everything runs locally in your browser — nothing is uploaded, stored, or shared.
Yes — completely free, with no account and no limits.