Most palettes start with one color somebody already likes: a brand blue, the green of a logo, a fabric swatch for a wedding. The difficult part is everything after that first choice. Which colors go with it, how many do you need, and why does a set that looks balanced in a design tool fall apart once text sits on top of it?
Color harmony answers the first two questions with simple geometry on a color wheel. Contrast answers the third, and it is the one people skip. This guide covers both, with real HEX values you can check, and shows how the free color palette generator turns one base color into six kinds of palette.
TL;DR: A color palette generator rotates a base color's hue around the HSL color wheel by fixed angles (180 degrees for complementary, 120 for triadic, 90 for tetradic, 30 and 60 for analogous) or moves its lightness to make shades, tints and monochromatic sets. The Toolz color palette generator does this client-side, free, no signup: pick a base, choose one of six modes, click a swatch to copy its HEX code, or copy the whole set as CSS custom properties. HSL is not perceptually uniform, so check any text and background pair against WCAG contrast ratios before you ship it.
What is a color palette generator?
A color palette generator is a tool that takes one starting color and calculates related colors from it using fixed rules, so the set looks coordinated without trial and error. The rules come from the color wheel: colors opposite each other contrast, colors next to each other blend, and colors spaced evenly around the wheel balance.
The Toolz generator works in HSL, which describes a color as hue, saturation and lightness. Hue is an angle from 0 to 360 degrees around the wheel (red at 0, green at 120, blue at 240). Saturation is how vivid the color is, from 0% gray to 100% full color. Lightness runs from 0% black to 100% white. HSL is defined for the web in the CSS Color Module Level 4 specification, and every browser converts it to the same RGB values.
Working in HSL makes harmony rules easy to express. A complementary color is the same saturation and lightness with 180 added to the hue. That is one addition instead of a lot of fiddling with RGB sliders.
What are the six harmony modes?
Each mode is a recipe for moving away from the base color. Here is exactly what the Toolz generator does in each one, taken from its source code.
| Mode | What changes | Swatches | Hue positions |
|---|---|---|---|
| Shades & Tints | Lightness only, set to 90, 75, 60, the base value, 35, 22 and 12 | 7 | Base hue |
| Monochromatic | Lightness and saturation together | 5 | Base hue |
| Complementary | Hue flips 180 degrees, with a lighter base and a darker complement | 4 | Base, base + 180 |
| Analogous | Hue steps 30 degrees each way | 5 | -60, -30, base, +30, +60 |
| Triadic | Hue spaced a third of the circle apart | 3 | Base, +120, +240 |
| Tetradic | Hue spaced a quarter of the circle apart | 4 | Base, +90, +180, +270 |
Two details matter in practice. Analogous, triadic and tetradic keep the base color's saturation and lightness on every swatch, so they only change hue. Shades & Tints and Monochromatic keep the hue and change lightness, so they produce light and dark versions of one color.
A worked example: every mode from #4466ee
The generator opens with #4466ee, a medium blue. Converted to HSL it is hue 228, saturation 83%, lightness 60%. Here is what each mode returns for that base. These are the HEX codes the tool prints, and you can reproduce them with the standard HSL to RGB conversion in the CSS specification.
Triadic adds 120 and 240 to the hue: 228, then 348, then 108 (468 wraps around to 108).
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
Notice the pattern. At the same saturation and lightness, rotating by exactly a third of the wheel reshuffles the same three RGB channel values: 44, 66 and ee trade places.
Complementary adds 180, which lands on hue 48, a warm yellow. The mode also includes a lighter version of the base and a darker version of the complement, so you get four swatches: #8aa0f4, #4466ee, #eecc44 and #d2ac14.
Analogous steps 30 degrees at a time from 168 to 288: #44eecc, #44bbee, #4466ee, #7744ee, #cc44ee. It reads as a band from teal through blue to violet.
Tetradic adds 90, 180 and 270: #4466ee, #ee44bb, #eecc44, #44ee77.
Monochromatic keeps hue 228 and trades saturation for lightness in both directions: #c4cded, #879ae8, #4466ee, #0936ec, #0225b1.
Shades & Tints sets lightness to 90, 75, 60, the base value, 35, 22 and 12: #d0d9fb, #8aa0f4, #4466ee, #4466ee, #0f2da3, #0a1c67, #050f38.
The last one shows a quirk worth knowing. The shade scale uses fixed lightness steps plus the base's own lightness. When the base happens to sit at exactly 90, 75, 60, 35, 22 or 12 percent lightness, as #4466ee does at 60, two swatches come out identical. Nudge the base lightness by one step if you want seven distinct colors.
How do you pick the right harmony for a job?
Pick the harmony by how much contrast the design needs. Low-contrast schemes feel calm and are easy to keep consistent; high-contrast schemes draw attention and are easy to overdo.
| Goal | Good starting mode | Why |
|---|---|---|
| A UI color scale (100 to 700) | Shades & Tints | One hue, predictable light-to-dark steps |
| A minimal, cohesive brand | Monochromatic | Everything shares a hue, nothing clashes |
| A call-to-action that stands out | Complementary | The opposite hue is the strongest contrast |
| A soft, natural look | Analogous | Neighboring hues blend |
| A playful, balanced set | Triadic | Three evenly spaced hues, none dominant |
| Charts with several series | Tetradic | Four distinct hues that still relate |
A common rule of thumb for layouts is to let one color cover most of the area, a second take a smaller share, and an accent appear sparingly. It works well with complementary and triadic palettes, where giving all colors equal space tends to look loud.
Why does a palette look balanced but read badly?
A palette can look balanced in HSL and still fail on screen because HSL lightness is not how bright a color looks to a person. HSL treats every hue at 60% lightness as equally light. Human vision does not.
The complementary example above makes this concrete. #4466ee and #eecc44 both have HSL lightness of 60%. Their relative luminance, the measure the Web Content Accessibility Guidelines use for perceived brightness, is very different: about 0.17 for the blue and about 0.62 for the yellow. The yellow is several times brighter to the eye.
That gap shows up as contrast. Using the WCAG formula, contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance:
| Pair | Contrast ratio | WCAG AA for normal text (4.5:1) |
|---|---|---|
| White text on #4466ee | about 4.77:1 | Passes |
| White text on #eecc44 | about 1.57:1 | Fails |
| Black text on #eecc44 | about 13.4:1 | Passes |
The generator itself already reacts to this: each swatch picks dark or white label text from a brightness estimate, which is why the yellow swatches get dark labels. For real designs, run the text and background pairs you plan to use through a color contrast checker. The thresholds come from WCAG 2.2: 4.5:1 for normal text and 3:1 for large text at level AA. The color contrast guide walks through the luminance math step by step.
How do you export a palette as CSS variables?
Click Copy CSS and the generator puts the current palette on your clipboard as CSS custom properties on :root. The names are numbered in steps of 100 in swatch order. For the triadic example:
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
Paste that at the top of a stylesheet and reference the colors anywhere:
.button-primary {
background: var(--color-100);
color: #ffffff;
}
The numbering follows swatch order, not lightness. In Shades & Tints mode that happens to run light to dark, so --color-100 is the lightest tint. In triadic or analogous mode the numbers are just positions. Rename the variables to something meaningful such as --brand, --accent and --surface once you have chosen, because --color-200 means nothing to the next person reading your CSS.
To copy a single color instead, click its swatch. The HEX code goes to the clipboard and the swatch shows "Copied" for a moment.
Can you make a wedding or pastel palette with it?
Yes, as long as you bring the starting color. There are no wedding presets or curated themes, so the palette is only as good as the base you choose.
For a wedding, take a color from something real: the flowers, the invitation card stock, a bridesmaid dress fabric. Enter its HEX code and try each mode. Starting from a sage green, #9caf88, Complementary returns #c2ceb6, #9caf88, a dusty lavender #9b88af and a deeper #755e8d. That lavender against sage is a classic pairing, and the math found it in one click.
For pastels, start from a pale, softly saturated base such as #a7c7e7. Analogous, Triadic and Tetradic keep that lightness and saturation on every swatch, so the whole set stays soft. Shades & Tints and Monochromatic deliberately move lightness, so they add dark colors, down to #0d1f30 for that blue. There is no separate lightness slider; the base color is the control.
Screen colors and printed colors differ. A monitor mixes red, green and blue light, while a printer lays down cyan, magenta, yellow and black ink on paper, and some bright screen colors have no exact ink equivalent. If a palette is going onto stationery, order a printed proof before a full run.
What are the common mistakes and error cases?
Most palette problems come from the input or from trusting the math too far.
The palette turns blue while you type. Until the text box holds a valid HEX code, the generator falls back to #4466ee. A half-typed value like #9c or #9caf8 shows the default blue palette. The field accepts three or six hex digits, with or without the #, so #9ca on its way to #9caf88 briefly shows a palette for #99ccaa.
The base swatch is one step off. Colors are rounded to whole HSL numbers before being converted back, so some bases do not round-trip exactly. #c08081, for example, comes back as #c18182. The difference is one unit per channel and invisible, but it matters if you are matching a brand code exactly: keep the official HEX for the base and use the generated ones for the rest.
Using every color everywhere. A five-color analogous palette is a range to choose from, not five colors that all need a job.
Skipping contrast. As shown above, two colors at the same HSL lightness can differ more than threefold in luminance. Check text pairs.
Expecting perceptual evenness. Shade steps are even in HSL lightness, not in how light they look. If you need a scale that looks even, adjust individual steps by eye or work in a perceptual space such as OKLCH, which CSS Color 4 also defines.
How does this compare with other color tools?
Palette generation is one step in a longer workflow. The table shows which tool fits each step.
| Task | Tool | What it gives you |
|---|---|---|
| Find or sample a starting color | Color picker | HEX, RGB and HSL for any color |
| Build a coordinated set | Color palette generator | Six harmony modes, CSS export |
| Make a fine-grained scale of one color | Color shades generator | A dedicated tint and shade ramp |
| Blend two colors | Color mixer | Intermediate colors between two inputs |
| Check text readability | Color contrast checker | WCAG ratio and pass or fail |
If the scale matters more than the harmony, the guide to generating shades and tints goes deeper on building 50 to 900 ramps. Every color tool is listed on the color tools hub.
Is the generator private and does it work offline?
Yes. All the HSL math and rendering run in your browser with JavaScript. Nothing you type is uploaded, and after the page loads the palette generator keeps working with no network connection. Copying a swatch or the CSS counts toward a daily usage limit, which records the mode you were in, not your colors.
