How couleur.io Creates Harmonized Color Palettes and Accent Colors

couleur.io builds a palette from two inputs: a starter hue (0–360) and a saturation level (0–100%). It then generates 10 swatches by varying lightness while keeping hue and saturation fixed, which is why the colors read as harmonized rather than random. Accent colors come from rotating that base hue in 45-degree increments, and the tool itself notes that 90, 135, or 180-degree shifts usually contrast better than 45 or 315.

The core mechanism: one hue, one saturation, ten lightness steps

The tool works in HSL, so each color is defined by three separate values instead of a single hex code. That separation is what makes the palette predictable:

• Hue stays constant across the whole palette, so every swatch is recognizably the same color family.
• Saturation stays constant too, so no swatch suddenly looks washed out or neon relative to its neighbors.
• Lightness is the only variable, stepped across 10 levels to produce the swatch range.

Because only one dimension changes, the result is a set of colors that share a visual identity. This is the practical difference between a harmonized palette and a hand-picked one: you get consistency by construction, not by trial and error.

Why HSL matters here

In HSL, hue is a degree on a color wheel (0 and 360 are both red), saturation is a percentage, and lightness is a percentage. Adjusting lightness alone moves a color from near-black through the pure hue to near-white without shifting its character. That is exactly the behavior you want when you need a range of tints and shades for backgrounds, borders, text, and buttons that all belong together.

How accent colors are generated

Accent colors are produced by rotating the selected base hue by increments of 45 degrees. So from a base hue you get candidate accents at +45, +90, +135, +180, and so on around the wheel.

The tool is explicit about which of these tend to work:

The reason is straightforward: small rotations land close to the base color, so the accent reads as a slightly-off version of the same color rather than a distinct one. Larger rotations move far enough around the wheel to separate clearly while still relating to the original hue.

Using the output in a real project

The tool outputs modern CSS you can use directly. Two ways to work with it:

1. Pick individual colors from the 10-swatch palette when you only need a few specific values.
2. Copy the full set of CSS variables as a foundation for your project's color system.

If you take the CSS variables route, the tool exposes a few control points that let you retune the whole palette at once:

• --base-hue — shifts every color in the palette to a new hue family.
• --base-sat — raises or lowers saturation everywhere simultaneously.
• --primary-lightness — moves the primary color up or down the lightness range.
• --accent-hue and --accent-lightness — adjust the accent color independently of the base palette.

This is the practical payoff of the HSL approach: changing one variable re-harmonizes the entire set instead of forcing you to re-pick each color.

Checking a palette before you commit

The tool includes a preview that renders the palette in context — a sample page with navigation, headings, body text, and a "read more" link — and it also offers a dark theme preview. Use it to answer questions that swatches alone can't:

• Does the accent still stand out against the base when used for links or buttons?
• Does body text remain readable on the lightest and darkest swatches?
• Does the palette hold up when the surrounding UI flips to dark?

The dark theme preview is worth running even if you're only building a light interface, because it shows whether your lightness steps leave room for an inverted version later.

Where this approach fits and where it doesn't

couleur.io is a good fit when you want a coherent single-hue system quickly, or when you need a defensible accent color without guessing at complementary pairs. It is a lighter-weight option than a full design-token pipeline, and the CSS variable output drops into most projects without conversion.

It is less suited to palettes that intentionally span multiple unrelated hues, or to work that requires precise brand color matching — since the palette is derived from a hue and saturation you choose, not from fixed brand values. In those cases you'd use the tool as a starting point and then pin specific swatches to your required colors.

One caveat the tool states directly: don't assume a 45-degree accent will read as an accent. If the contrast looks weak in the preview, step out to 90, 135, or 180 degrees before adjusting anything else.