What couleur.io Is and How It Helps You Build Web Color Palettes

couleur.io is a browser-based color tool that generates a harmonized 10-swatch palette from a single starter hue and saturation level, then outputs CSS variables you can paste directly into a web project. It suits anyone who needs a coherent color scheme quickly — a landing page, a small site, a prototype — without hand-tuning ten separate colors. If you need brand-accurate colors or a full design system, it's a starting point rather than a final answer.

How the palette is generated

The tool works in HSL, which is what makes the output predictable:

• You pick a starter hue — a value from 0 (red) to 360 (red again).
• You pick a saturation level — a value from 0% to 100%.
• The tool then produces 10 color swatches by varying lightness across that fixed hue and saturation.

Because every swatch shares the same hue and saturation, the colors are harmonized by construction. You aren't judging whether ten arbitrary colors "go together" — you're choosing how light or dark each step should be.

Accent colors and how they're derived

Accent suggestions come from rotating the base hue in 45-degree increments. That produces colors that can contrast with the base in a pleasing way, but the tool itself flags a caveat worth repeating:

So if you want a clear accent, start from the 90/135/180 options rather than the nearest rotation.

Previewing in context

The tool renders the palette against sample page content — headings, body text, links, a "read more" — in both a light and a dark theme context. This matters because a palette that looks balanced as swatches can fail once text sits on top of it. Checking both contexts before committing is the main reason to use the preview rather than just eyeballing the swatches.

Using the CSS output

The tool can output a set of CSS variables for the full palette, which you paste into your stylesheet as a foundation. The variables are composed so that a few values drive everything:

• --base-hue, --base-sat, --primary-lightness — adjusting these shifts the entire palette at once.
• --accent-hue, --accent-lightness — adjusting these shifts only the accent color.

That composition means you can retheme a project by changing two or three numbers instead of editing ten color values. You can also toggle CSS variables for the full palette on and off in the interface, and pick individual colors from the palette if you only need a few.

When to use it, and when not to

Good fit:

• You have a rough idea of a hue and want a usable, consistent set of shades fast.
• You want CSS variables rather than a static image of a palette.
• You're prototyping and want light/dark context checks built in.

Poor fit:

• You need exact brand hex values — HSL-derived swatches won't match a fixed brand spec.
• You need semantic naming (success, warning, surface) — the output is a palette, not a token system.
• You need accessibility contrast guarantees — the preview shows context, but it isn't a contrast checker, so verify text/background pairs separately.

A quick workflow

1. Pick a starter hue and saturation that roughly match the mood you want.
2. Scan the 10 swatches and the light/dark previews to see how text and links read.
3. Choose an accent from the 90°, 135°, or 180° rotations if you need visible contrast.
4. Copy the CSS variables into your stylesheet.
5. Tweak --base-hue, --base-sat, and --primary-lightness to shift the whole palette, and --accent-hue / --accent-lightness for the accent alone.

The site notes a "subscribe" element in its page content, so some parts of the experience may involve signing up — the palette generation and CSS output described above are what the tool documents as its core function.