How to Use couleur.io to Generate CSS Variables for Your Website

Updated

couleur.io generates a 10-swatch color palette from a single starter hue and saturation level, then outputs CSS variables you can paste directly into your stylesheet. It's a good fit if you want a harmonized palette without picking ten colors by hand, and if you're comfortable editing HSL values in CSS. The tool works in the browser and requires no build step — you pick a hue, refine saturation, preview the palette in a light and dark page context, then copy the variables.

What the tool actually produces

The palette is built entirely from HSL. You choose:

  • A starter hue — a value from 0 (red) to 360 (red again)
  • A saturation level — a value from 0% to 100%

From those two inputs, couleur.io creates 10 swatches by varying lightness while keeping hue and saturation fixed. Because every swatch shares the same hue and saturation, the colors are harmonized by construction rather than by eye.

Accent colors are generated separately by rotating the base hue in 45-degree increments. One caveat from the tool's own documentation: accents only 45 or 315 degrees from the base hue may not contrast enough. Rotations of 90, 135, or 180 degrees usually work better as accents.

Step-by-step: from hue to CSS variables

1. Pick a starter hue

Set the base hue to match the dominant color you want for your site. If you're matching an existing brand color, convert it to HSL first and use its hue value here.

2. Refine saturation

Adjust saturation to control how vivid or muted the whole palette feels. This single value affects all 10 swatches, so it's the fastest lever for going from "loud" to "understated."

3. Preview the palette in context

The tool renders the palette against a sample page — a nav, headings, body copy, and a "read more" link — in both a light and a dark theme context. Use this to check whether your text and accent colors hold up before you commit. This is the step most people skip, and it's the one that catches unreadable combinations early.

4. Copy the CSS variable set

Toggle the CSS variables option to get the full palette as variables, then paste them into your stylesheet. The tool notes this variable-composition approach is inspired by Maxime Heckel's writing on CSS variable composition.

5. Apply the variables in your CSS

Once the variables are in your stylesheet, reference them anywhere you'd normally hardcode a color:

:root {
  /* pasted from couleur.io */
  --base-hue: 210;
  --base-sat: 60%;
  --primary-lightness: 45%;
  --accent-hue: 345;
  --accent-lightness: 50%;
}

.button {
  background: hsl(var(--base-hue) var(--base-sat) var(--primary-lightness));
}

.button--accent {
  background: hsl(var(--accent-hue) var(--base-sat) var(--accent-lightness));
}

The exact variable names and count come from the tool's output — paste it as-is rather than retyping, since the palette swatches are derived from these values.

Tuning the palette after you paste it

The point of the variable set is that you can shift the entire palette by editing a few values instead of ten colors:

Change this Effect
--base-hue Rotates every base swatch to a new hue at once
--base-sat Makes the whole palette more vivid or more muted
--primary-lightness Moves the primary color lighter or darker
--accent-hue Changes only the accent color's hue
--accent-lightness Changes only the accent color's lightness

Because hue and saturation are shared across the base swatches, changing --base-hue or --base-sat keeps the palette harmonized — you can't accidentally break the relationship between colors. Changing --accent-hue is the one edit that can reduce contrast against the base, so re-check it against your background after adjusting.

Common snags

  • Accent looks too similar to the base. You likely picked a 45- or 315-degree rotation. Move toward 90, 135, or 180 degrees.
  • Text is hard to read in the preview. Adjust --primary-lightness before copying, or plan to use a different swatch from the 10 for text versus backgrounds.
  • Colors look right in light mode but wrong in dark. Check the dark theme preview before finalizing — the same lightness values behave differently against a dark background.
  • You want one specific color to stay fixed. The palette is generated, not hand-picked, so if a brand color must be exact, set it as a separate variable and use the generated palette for everything else.

When this approach fits

Use couleur.io if you want a coherent palette fast and you're working in CSS with HSL values. Skip it if you need precise control over each individual color, if your project uses a design system with locked tokens, or if you need CMYK or print-accurate values — the tool is built around HSL for web use.