Cool colours: shades and combinations

Blues, many greens and blue-leaning purples are often described as cool colours. Yellow-green can nevertheless appear warmer than blue-green. Neighbouring shades matter as much as the name.

“Cool colours” and “cold colours” describe the same broad visual family here. There is no universal dividing line that assigns every possible shade to one side. A green with more yellow can look warmer than a green leaning towards blue; a violet can change character when placed beside red rather than blue. Compare neighbours under the same conditions.

Lightness and saturation are separate decisions. A pale blue is lighter than navy, but that alone does not define which is cooler. Likewise, making a colour greyer reduces its saturation without automatically turning it into a cool shade. Black, white and grey can pick up an apparent temperature from their surroundings.

These are editorial sRGB examples, not official paint references or a complete list of cool colours. The names help describe them; the HEX values identify the particular digital swatches.

• Muted blue #839BAE: try it as a secondary panel or background shape. Choose text separately instead of assuming white lettering will work.
• Sage green #6E9181: use it to connect a blue scheme with plants, textiles or other materials. It can serve as an accent without matching every green in the project.
• Deep blue #34649C: the darkest of these four examples can give headings, navigation or a labelled panel a stronger role.
• Lavender #A69ABD: try a smaller decorative area when the blue/green combination needs a different hue. Keep important information independent of that colour.

You do not need to use all four. Removing an unnecessary accent can make a hierarchy clearer than adding another shade.

A difference between warm and cool does not measure readability. The table tests white text against each original swatch as an opaque, solid sRGB background.

For ordinary paragraphs, only the deep-blue/white pair meets the WCAG AA text-contrast minimum among these examples. Ratios are rounded to two decimals; decisions use the unrounded values. A large heading may have a different threshold, but that does not make the same pair suitable for small captions.

Transparency, photographs and gradients change the effective background. Check the final pair again, including button states. A passing pair is one check, not proof that a complete palette or interface is accessible.

A website or document

Choose the reading surface and text first. Use the medium blue, sage or lavender for decorative areas only after establishing readable content. A deep-blue panel with white text is one tested option above. If a colour marks a link, error or status, add a label, underline or another appropriate cue rather than relying on hue alone.

A room or material board

Start with the surfaces that will stay: flooring, worktops and furniture. Compare a real sample with them in daylight and under the intended lamps. Wood or ecru can provide a warm counterpoint; repeat that material deliberately rather than adding many unrelated warm accents. The warm-colour guide offers a contrasting family to compare.

A file going to print

Keep the HEX values as screen references, then ask for the printer’s output profile and a proof on the intended paper. Converting a blue to CMYK numbers does not guarantee that the printed result will match your display. See the CMYK printing guide before approving production.