Yellow and Charcoal
Why they work: hazard-stripe clarity with an urban edge.
Combination sets
The classic split
Yellow and Charcoal with a light tint of yellow, a deep shade of charcoal and white for breathing room.
Dark mode
Both anchors survive on dark: Charcoal as the highlight, Yellow 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%, yellow ~30% for structure, charcoal ~10% for calls to action.
Gradient bridge
The direct perceptual path from yellow to charcoal — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #FFFF00 | #36454F | 9.22:1 | ✓ | ✓ |
| #36454F | #FFFF00 | 9.22:1 | ✓ | ✓ |
| #FFFF00 | #FFFFFF | 1.07:1 | ✗ | ✗ |
| #FFFF00 | #000000 | 19.56:1 | ✓ | ✓ |
| #36454F | #FFFFFF | 9.90:1 | ✓ | ✓ |
| #36454F | #000000 | 2.12:1 | ✗ | ✗ |
| #16161D | #2AAE91 | 6.48:1 | ✓ | ✗ |
Related combinations
FAQ
Do yellow and charcoal go together?
Yes — hazard-stripe clarity with an urban edge. Their hues are 144° apart on the color wheel and the direct pair contrast is 9.22:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on yellow and charcoal?
On yellow use #000000 text (19.56:1); on charcoal use #FFFFFF (9.9:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Yellow: #FFFF00 — OKLCH oklch(96.8% 0.211 109.8). Charcoal: #36454F — OKLCH oklch(38.14% 0.026 237.5).