Light color palettes

Where light palettes work

• Documentation, help centers, and knowledge bases read for long stretches
• Settings pages and forms that use tints to group related fields
• Marketing pages that need an open, uncluttered first screen
• Zebra rows, hover states, and selection highlights in tables

Light palettes are surfaces; you bring the ink

Nine in ten swatches in this collection have an HSL lightness above 60%, and over half are above 80%. As a result, only about 6% of the palettes contain a pair of colors that reaches 4.5:1, and just 2% of swatches can hold white text at that level. Treat each palette as a set of backgrounds, then add one dark text color yourself.

Light is not the same as pastel. Almost half of these palettes also appear in the pastel collection, but the light set is more saturated on average (about 69% against 53%) and includes clear brights such as #fffdcb, #ff8e8f, and #f7418f.

Using a tonal ramp as surface steps

Some palettes here are single-hue ramps, which map directly onto interface layers. In #e1f0da, #d4e7c5, #bfd8af, #99bc85, use the first for the page, the second for cards, the third for hover and selected rows, and the fourth for dividers and illustration.

Adjacent steps differ by only about 1.1:1 to 1.4:1. That is fine for fills, but not for the outline of a text field or checkbox, which needs 3:1 against its surroundings. A dark green ink such as #24361f measures 10.90:1 on #e1f0da, and a mid green such as #4a6b3a (5.12:1 on #e1f0da, 4.64:1 on #d4e7c5) works for links and outlines.

:root {
  --bg: #e1f0da;
  --card: #d4e7c5;
  --hover: #bfd8af;
  --divider: #99bc85;
  --link: #4a6b3a;  /* added */
  --text: #24361f;  /* added */
}

Choosing an accent that holds up

A light accent such as the rose #e78895 cannot carry white text (2.51:1). Use it as a button fill with dark text, for example #3a2e2b at 5.20:1, and use a deeper rose such as #a3384a for text links, which measures 6.15:1 on #fff7f1.

Pairing the colors

Pick one swatch as the page and use the others as steps above it: cards, hover, selection. Then add the two colors the palette lacks, a dark ink tinted toward the main hue and a mid-tone for links and outlines. One saturated swatch, such as #f7418f, can carry the primary action with a dark label (black on it is 6.11:1; white is 3.44:1).

Contrast and readability

Only about 2% of the swatches here can hold white text at 4.5:1, while almost all pass with black. Light tints also fail as control edges: #ffe4c9 against #fff7f1 is 1.15:1, so text fields and checkboxes need a darker outline that reaches 3:1.

Questions

What text color should I use on a light background?

A dark color tinted toward the palette's hue usually looks better than pure black, and passes easily: #3a2e2b on #fff7f1 is 12.35:1. Check secondary text, placeholders, and disabled labels too, as these are often set too light.

Why does my light palette look washed out on screen?

When every color is above 80% lightness, nothing anchors the layout. Add one dark ink for text and one mid-tone for links and borders, and the light colors will read as intentional surfaces.