Using Cold and Dark (#154250) in Interface Design: Scale, Buttons and Dark Mode

Cold and Dark (#154250) is a dark, muted blue. As an interface color it has a clear personality: it is dark enough to carry white labels, which makes it a natural button and header color. This guide shows how to build a working interface from it: a full scale, every button state, a dark-mode version, a link color that passes, and the CSS to paste in.

A scale built from Cold and Dark

A single color is not enough for an interface. You need lighter steps for surfaces and borders and darker steps for text and hover states. This 50 to 950 scale keeps the hue and saturation of Cold and Dark and moves only the lightness. The step closest to Cold and Dark keeps its exact value.

Button states

Interactive elements need to look different when you hover, press and disable them, and each state still has to be readable. These values are made from Cold and Dark itself, so the button stays in family.

Disabled controls are exempt from WCAG contrast rules, but they still need to be recognizable, so the label is kept dark enough to read. For keyboard focus, use an outline of Cold and Dark (#154250), which reaches 3 to 1 against a white page, the minimum for interface parts.

Dark mode

On a near-black page (#0F1115), Cold and Dark reaches 1.73:1 (Fail). That is not enough for text, so lighten it. Whale Shark (#578393) is the closest lightness of the same hue that reaches 4.5 to 1.

Links and text

Cold and Dark on white reaches 10.89:1 (AAA), so it can be a link and heading color as it is. Links also need a second cue beyond color, such as an underline, because some readers cannot tell the link color from the surrounding text.

Surfaces and borders

Tints of Cold and Dark make quiet surfaces that feel connected to the brand without competing with it. Snow (#F8F9F9) works as a card or page tint, and Airy (#E5E6E7) as a border or divider.

The CSS

:root {
  --brand: #154250;
  --brand-hover: #133E4B;
  --brand-active: #123A47;
  --on-brand: #FFFFFF;
  --brand-surface: #F8F9F9;
  --brand-border: #E5E6E7;
  --brand-text: #154250;
  --focus-ring: #154250;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #578393;
    --brand-text: #578393;
  }
}

A short checklist

1. Use Cold and Dark for the one action you most want people to take.
2. Put #FFFFFF text on it and check that the ratio stays above 4.5 to 1.
3. Use the scale for hover, pressed, border and surface colors rather than inventing new ones.
4. Define a separate dark-mode value and test it on a dark page.
5. Never use the color as the only signal: add an icon, a label or an underline.