Slate Gray and Blush
Why they work: cool gray discipline with a warm pink pulse — modern product UI.
Combination sets
The classic split
Slate Gray and Blush with a light tint of slate gray, a deep shade of blush and white for breathing room.
Dark mode
Both anchors survive on dark: Blush as the highlight, Slate Gray as the accent, and two intermediate surfaces for elevation.
Soft & light
Both anchors reduced to tints for airy sections, with the full-strength colors kept for buttons and links.
60 / 30 / 10 UI set
A practical interface split: neutral ~60%, slate gray ~30% for structure, blush ~10% for calls to action.
Gradient bridge
The direct perceptual path from slate gray to blush — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #708090 | #DE5D83 | 1.16:1 | ✗ | ✗ |
| #DE5D83 | #708090 | 1.16:1 | ✗ | ✗ |
| #708090 | #FFFFFF | 4.05:1 | ✗ | ✗ |
| #708090 | #000000 | 5.18:1 | ✓ | ✗ |
| #DE5D83 | #FFFFFF | 3.50:1 | ✗ | ✗ |
| #DE5D83 | #000000 | 6.00:1 | ✓ | ✗ |
| #16161D | #9677B5 | 4.80:1 | ✓ | ✗ |
Related combinations
FAQ
Do slate gray and blush go together?
Yes — cool gray discipline with a warm pink pulse — modern product UI. Their hues are 132° apart on the color wheel and the direct pair contrast is 1.16:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on slate gray and blush?
On slate gray use #000000 text (5.18:1); on blush use #000000 (6:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Slate Gray: #708090 — OKLCH oklch(59.25% 0.031 248.3). Blush: #DE5D83 — OKLCH oklch(65.11% 0.164 4.5).