Cold color palettes

Where cold palettes work

• Analytics, monitoring, and finance dashboards with dense data
• Sequential chart scales, heatmaps, and maps
• Developer documentation and API references
• Health, lab, and infrastructure products where a clinical tone fits

Blues cover the full value range

Seven in ten swatches in this collection are blue, cyan, or indigo. Unlike reds and yellows, blues are easy to find at every lightness, from #161a30 to #eef5ff. That is why roughly four in five cold palettes already contain a pair of colors at 4.5:1 or more: a dark navy and a pale ice tone often sit in the same set.

Pick text colors by how light they are, not by hue. Blue text on a blue background can look distinct because the hues differ slightly, while the measured contrast stays low.

Cold base, one warm accent

Several palettes here pair three cool colors with a single warm one, such as #2d3250, #424769, #7077a1, #f6b17a. The warm swatch is the obvious accent. Apricot #f6b17a on the navy #2d3250 measures 6.82:1, so it can carry links, a primary button with dark text, or a highlight.

The periwinkle #7077a1 is harder to place. On the navy it is 2.88:1, below the 3:1 needed for borders, and white text on it is 4.34:1. Use it for large fills or decoration.

Cold ramps for charts

A palette that steps evenly from light to dark makes a ready-made sequential scale for heatmaps and choropleths. #ecf4d6, #9ad0c2, #2d9596, #265073 gets darker at every step, so higher values read as darker cells even in greyscale.

• Label cells with dark text on the first two steps and white on the last: white on #265073 is 8.48:1.
• White on #2d9596 is only 3.59:1, so use it for large numbers or switch to dark text there (black is 5.85:1).

:root {
  --scale-1: #ecf4d6;
  --scale-2: #9ad0c2;
  --scale-3: #2d9596;
  --scale-4: #265073; /* 7.46:1 on --scale-1 */
}

Pairing the colors

Build surfaces from blue-greys rather than pure greys so the neutrals belong to the palette. Keep cyan or violet for active and selected states, and use one warm color, such as apricot #f6b17a, for the single most important action.

Contrast and readability

Blue on blue is where cold palettes fail. In #eef5ff, #b4d4ff, #86b6f6, #176b87, the sky #86b6f6 on the pale #eef5ff is 1.91:1 even though the two look distinct; the teal #176b87 reaches 5.49:1. Violet #7b66ff holds white text at only 4.05:1, so keep it for large type and icons.

Questions

What are cold colors?

Blues, cyans, blue-violets, and the greys and greens that lean toward them. In practice, a palette reads as cold when its neutrals are blue-grey rather than beige, even if it includes one warm accent.

How do I make a cold palette feel less distant?

Add one warm color in a small role, such as an apricot button or a sand-colored highlight, and use an off-white with a trace of warmth for large surfaces. Keep the warm color to one job so the palette still reads as cold.