couleur.io

Yes. couleur.io includes a built-in preview that applies your generated palette to sample page content, and it also offers a dark theme version of that same preview. You can judge contrast and readability in both before copying any CSS.

What the preview shows

The preview renders a small mock webpage rather than isolated color swatches. Based on the tool's page, the sample content includes:

• A navigation row with home, about, and contact
• An article-style block with a heading ("A tale of two animals"), a date line, and body paragraphs
• A read more link and a subscribe element

This matters because swatches alone don't tell you whether your accent color survives contact with real text. Seeing the palette on headings, body copy, links, and buttons shows you where contrast actually holds up.

Light and dark theme contexts

The tool provides two preview modes:

Because the palette is built from a single hue and saturation with varying lightness, the dark theme preview is where you'll usually spot problems first — a lightness step that reads fine on white can disappear or glare on a dark surface.

How to use it to make a decision

1. Pick a starter hue — a value from 0 to 360.
2. Refine saturation — a value from 0% to 100%.
3. Look at the palette — 10 swatches generated from varying lightness levels on that hue and saturation.
4. Check the preview in context — read the sample page in the standard view, then switch to the dark theme view.
5. Judge the accent color specifically — see the note below.
6. Copy the CSS variables if it holds up, or adjust and re-check.

What to look for when judging

The preview is most useful for these checks:

• Body text against background — is the paragraph copy still comfortable to read?
• Headings vs. body — do they separate clearly, or blur together?
• Links and "read more" — does the accent color stand out from surrounding text without vibrating against it?
• The subscribe/button element — is it obviously interactive?
• Dark theme — does anything become unreadable or overly harsh?

A caveat about accent colors

The tool generates accent ideas by rotating the base hue in 45-degree increments. Its own guidance notes that accents only 45 or 315 degrees from the base hue may not contrast enough with the base color. Accents at 90, 135, or 180 degrees of difference usually work better.

So when you preview, don't assume every accent option is equally viable — test the wider rotations first, and use the preview to confirm the one you pick actually separates from the base in both themes.

Tuning without starting over

If the preview reveals a problem, you don't have to rebuild the palette. The generated CSS variables let you adjust globally:

• --base-hue, --base-sat, and --primary-lightness shift the whole palette at once
• --accent-hue and --accent-lightness shift just the accent color

Change one value, then re-check the preview in both themes. This is the fastest loop: adjust a variable, look at the sample page, repeat until the contrast reads well in light and dark.

Bottom line

Use the preview as your go/no-go check. If the palette reads clearly on the sample page in both the standard and dark theme contexts — especially the accent against body text and UI elements — it's a reasonable foundation to copy into your project. If the accent only works in one theme, adjust --accent-hue or --accent-lightness before committing.

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:

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.

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.

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.