Are these colours or just pale greys?

Tinted surfaces. The chroma band is 0.02 to 0.08, so at the low end they read as white with a cast, and at the high end as a clearly distinguishable tint.

Why not use pure white for a light theme?

Because elevation becomes invisible. Several near-whites at different lightness give cards, panels and hover states something to separate by, which one flat white cannot do.

Where do text colours come from?

Elsewhere — this preset supplies surfaces only. A dark ink, a muted ink and a link colour all have to be chosen and checked against these values.

Why is one warm tint included among the cool ones?

For contrast of temperature. A single warm surface gives notices, highlights or a sidebar a distinct register without introducing a saturated colour into a quiet palette.

Why does regenerating barely change the palette?

Because only the tint chroma is re-rolled, inside the narrow 0.02 to 0.08 band. The five-step lightness ladder and the hue order are fixed, so the set keeps its structure.

Light Mode Palette Generator

CSS

You Might Also Need

CSS Color Variables Generator

Generate CSS custom property color variables

Color Context Simulator

See the same color on different backgrounds

Pastel Palette Generator

Generate soft pastel palettes

The light mode palette generator produces five tinted white and pale blue surfaces from a fixed run with lightness between 0.85 and 0.97 — a light ui color palette built for bright themes.

What is Light Mode Palette Generator?

Bright interfaces live or die on surfaces that are nearly white but not identical to each other, and that is precisely the band this preset occupies. Its hues are 220, 200, 180, 0 and 30 — blue, cyan-blue, teal, a red and an orange — with lightness climbing from 0.85 to 0.97 and chroma rolled between 0.02 and 0.08. The tints are barely visible as colours and entirely visible as layers, which is the point of a light background palette.

Hues: 220, 200, 180, 0 and 30, giving blue, cyan, teal, red and orange casts.
Lightness: 0.85, 0.88, 0.91, 0.94 and 0.97 — five steps from soft tint to near paper.
Chroma: rolled per swatch in the very narrow band 0.02 to 0.08.
Output: five hex swatches and a copyable CSS custom-property block.

The narrow chroma band is what makes the result usable rather than decorative. At 0.02 a surface reads as white with an attitude; at 0.08 it is a distinguishable tint that can still sit behind dark text without competing. Because the ramp tops out at 0.97, the lightest swatch behaves like paper, and the darkest gives a footer or sidebar somewhere to sit without turning into a block of colour. Tinted white surfaces also avoid the pitfall of pure white in bright themes, where every subtle elevation change is invisible and the page reads as flat.

Text colours are not included: dark ink, muted ink and link colours all have to come from elsewhere.
Nothing in the set is dark enough for a border or a divider that must read clearly against the lightest surface.
The warm casts at hue 0 and 30 are easy to overuse; one warm surface plus four cool ones is the balance the preset implies.
No preset selector, no transparency, no theme tokens beyond the five hex custom properties.

Naming the levels matters here for the same reason it does in a dark theme. A light mode palette generator is really a surface contract: page, panel, card, control and hover, one value each, so that a new component cannot invent its own near-white. Written down that way, a light ui color palette stops being a set of colours and becomes the rule that keeps a bright interface coherent as it grows.

Use it as the base of a bright theme and assign it as a ladder: page, panel, card, raised control, hover state, from the lightest to the darkest. Then choose one accent and verify it against the two extremes with the contrast checker, because pale surfaces make accents look stronger than they measure. The dark-mode generator mirrors this page for night themes, the neutral shades tools supply the greys and inks this preset deliberately leaves out, and the CSS variables generator writes the ladder out as named tokens once the levels are assigned. A theme built from five named surfaces is far easier to audit than one assembled from dozens of near-whites.

How to use Light Mode Palette Generator

Open the page for the initial set of pale surfaces.
Press Regenerate to re-roll the tint chroma while the lightness ladder stays fixed.
Assign the five levels to page, panel, card, control and hover states.
Choose a dark ink and an accent separately, then measure both against the extremes.

When to use Light Mode Palette Generator vs related tools

Use this as the surface base of a bright interface that needs more structure than plain white provides. The dark mode palette generator is the mirror for night themes, the CSS variables generator writes the levels out as named tokens, and the contrast checker verifies the ink you pair with them.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.