Can I preview a couleur.io palette in real page and dark theme contexts?

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.