Gray and Yellow
Why they work: neutral discipline plus one optimistic signal color.
Combination sets
The classic split
Gray and Yellow with a light tint of gray, a deep shade of yellow and white for breathing room.
Dark mode
Both anchors survive on dark: Yellow as the highlight, 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%, gray ~30% for structure, yellow ~10% for calls to action.
Gradient bridge
The direct perceptual path from gray to yellow — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #808080 | #FFFF00 | 3.68:1 | ✗ | ✗ |
| #FFFF00 | #808080 | 3.68:1 | ✗ | ✗ |
| #808080 | #FFFFFF | 3.95:1 | ✗ | ✗ |
| #808080 | #000000 | 5.32:1 | ✓ | ✗ |
| #FFFF00 | #FFFFFF | 1.07:1 | ✗ | ✗ |
| #FFFF00 | #000000 | 19.56:1 | ✓ | ✓ |
| #16161D | #EDA676 | 8.84:1 | ✓ | ✓ |
Related combinations
FAQ
Do gray and yellow go together?
Yes — neutral discipline plus one optimistic signal color. Their hues are 60° apart on the color wheel and the direct pair contrast is 3.68:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on gray and yellow?
On gray use #000000 text (5.32:1); on yellow use #000000 (19.56:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Gray: #808080 — OKLCH oklch(59.99% 0 0). Yellow: #FFFF00 — OKLCH oklch(96.8% 0.211 109.8).