Using Peach and Quiet (#FFCCB6) in Interface Design: Scale, Buttons and Dark Mode

Peach and Quiet (#FFCCB6) is a very light, muted pink. As an interface color it has a clear personality: it is light enough that dark labels read better than white ones, which makes it better as a surface, a highlight or a data color than as a button. 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 Peach and Quiet

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 Peach and Quiet and moves only the lightness. The step closest to Peach and Quiet 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 Peach and Quiet 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 Nougat (#B98A76), which reaches 3 to 1 against a white page, the minimum for interface parts.

Dark mode

On a near-black page (#0F1115), Peach and Quiet reaches 13.10:1 (AAA). That is enough to use it directly as text, a link or an icon in dark mode.

Links and text

Peach and Quiet on white reaches only 1.44:1, which is not enough for text. For links and small headings use Leather (#9A6C59), the closest shade that reaches 4.5 to 1, and keep Peach and Quiet itself for fills and large display type.

Surfaces and borders

Tints of Peach and Quiet make quiet surfaces that feel connected to the brand without competing with it. Snow (#FFFCFB) works as a card or page tint, and Snow (#FFF5F1) as a border or divider.

The CSS

:root {
  --brand: #FFCCB6;
  --brand-hover: #F1C1AC;
  --brand-active: #E5B7A3;
  --on-brand: #111111;
  --brand-surface: #FFFCFB;
  --brand-border: #FFF5F1;
  --brand-text: #9A6C59;
  --focus-ring: #B98A76;
}

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

A short checklist

1. Use Peach and Quiet for the one action you most want people to take.
2. Put #111111 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.