One color in,a whole brand out.
Most palettes are picked by eye and fall apart the moment you build with them — clashing accents, no contrast, no system. This one starts from a single base color and the math of color harmony, rotates the color wheel by a rule you choose, and hands you swatches with hex codes plus the CSS variables to drop straight into your stylesheet.
Your base color
The base plus its opposite (180°) — high-contrast, striking accents.
Your palette
Swatches
Paste into your stylesheet
:root {
--color-1: #f0a82f;
--color-2: #f8d498;
--color-3: #2f77f0;
--color-4: #0f54c9;
--color-5: #162c51;
--color-6: #f7f2ea;
}Copy the hex codes
Color 1
#f0a82f
Color 2
#f8d498
Color 3
#2f77f0
Color 4
#0f54c9
Color 5
#162c51
Color 6
#f7f2ea
Harmony isn't legibility. Before you ship, check every text-on-color pair for at least 4.5:1 contrast.
Your move
A palette makes it look right. I make it convert.
Generated a complementary palette from #f0a82f — 6 colors ready to paste.
Color sets the tone, but the layout, the offer, and the order of the page are what move people to act. Bring me a brand that looks the part but isn't converting and I'll show you, free, where attention is leaking and what I'd change first — colors included.
Plain English
Harmony is geometry, not taste.
A color palette is the small, fixed set of colors a brand uses everywhere: the dominant brand color, one or two accents that earn attention, and the neutrals that hold the page together. Get the set right once and every page, ad, and email looks like it came from the same place. Get it wrong and your work looks improvised, no matter how good the copy is.
The reason a good palette feels right isn't taste — it's geometry. Every color lives at an angle on the color wheel (its hue), and the classic harmony rules are just instructions for which angles to combine. Complementary takes the color directly across (180° away) for maximum contrast. Analogous takes neighbors (±30°) for a calm, cohesive feel. Triadic spaces three colors evenly (120° apart) for vivid balance. Monochromatic keeps one hue and varies only its lightness. Tetradic builds a rich four-color rectangle.
This generator does that math for you. You give it one base color and a rule; it converts the hex to HSL, rotates the hue by the rule's angles, converts back to hex, and renders the result as swatches plus a copy-ready CSS custom-property block. You still bring the judgment — but you start from a structurally sound set instead of a guess.
The formula
Harmony = base hue + a rule's hue rotation (held in HSL, rendered as hex)
Take the brand amber #f0a82f. In HSL that's roughly hue 38°, 87% saturation, 56% lightness. Complementary rotates the hue +180° to ~218° — a deep blue, #2f77f0 — the maximum-contrast partner. Analogous instead nudges ±30° to a warm red-orange and a yellow-green that sit beside the amber without fighting it. Same base color, two completely different moods, both structurally sound.
Picked a palette that isn't working? Here's why.
Two colors keep fighting for attention.
You've given two colors the same job. A palette needs a hierarchy: one dominant color, one accent. Demote the loser to a neutral or use it only at small sizes.
Text on the brand color is hard to read.
Harmony and legibility are different problems. A harmonious pair can still fail contrast. Run your text-and-background pair through a contrast checker and target 4.5:1 for body copy.
The palette looks muddy or washed out.
Your colors are too close in lightness, so nothing pops. Keep the hues harmonious but spread the lightness — a dark, a mid, and a light — so each color has a clear place to live.
It looks great on screen, dull in print or on a button.
Highly saturated screen colors lose energy off-screen and can vibrate on small UI. Keep a slightly desaturated variant of each color for backgrounds and large fills.
How to turn a palette into a brand system
01Rank the colors
Decide your one dominant color, one or two accents, and the neutrals. A palette without a hierarchy is just a swatch dump — the ranking is what makes it usable.
02Reserve the accent
Your brightest accent should mean one thing: act here. Spend it on the primary button and the link, nowhere else, so attention always lands where you want it.
03Build neutrals from the base
Don't reach for pure grey. Tint your neutrals slightly toward the base hue so backgrounds and borders feel part of the same family, not bolted on.
04Spread the lightness
Within a hue, keep a dark, a mid, and a light version. That range is what lets you build depth — surfaces, hovers, borders — without introducing new colors.
05Check contrast before you commit
Harmony is half the job; legibility is the other half. Test every text-on-color pairing against WCAG (4.5:1 for body) before it ships.
06Name colors by role, not hue
Save them as --color-accent and --color-surface, not --amber and --blue. Role-based names let you re-theme later without renaming every variable.
The vocabulary
- Hue
- The position of a color on the wheel, in degrees (0–360). Red sits near 0°, green near 120°, blue near 240°. Harmony rules rotate this number.
- Saturation
- How vivid a color is, from grey (0%) to fully pure (100%). High saturation reads as energetic; lower saturation reads as calm and premium.
- Lightness
- How light or dark a color is, from black (0%) to white (100%). Varying lightness within one hue is the core of a monochromatic palette.
- Complementary
- Two colors directly across the wheel (180° apart). The highest-contrast pairing — striking, but it can vibrate if overused at large sizes.
- Analogous
- Colors that sit next to each other on the wheel (±30°). Cohesive and easy on the eye, ideal when you want calm rather than contrast.
- Triadic
- Three colors evenly spaced 120° apart. Vivid and balanced — usually best with one dominant and the other two as accents.
- Monochromatic
- One hue at several lightness levels. The simplest, safest scheme — hard to get wrong, easy to look refined.
- Tetradic
- Four colors forming a rectangle on the wheel (two complementary pairs). The richest scheme, and the easiest to overdo — anchor it on one dominant color.
Color palette questions, straight answers
Three to five working colors is the sweet spot: one dominant brand color, one or two accents, and a neutral or two for text and backgrounds. This tool generates five to six harmonious options so you can pick the ones that earn a role — more colors don't make a stronger brand, a clear hierarchy does.
Keep going
A calculator tells you what. A call tells you what to do about it.
Send me the account behind these numbers. I'll tell you straight where the money's leaking and what I'd fix first — free, and you keep it whether you hire me or not.