Red and Black
Why they work: maximum warm-energy contrast — the boldest pairing on the wheel.
Combination sets
The classic split
Red and Black with a light tint of red, a deep shade of black and white for breathing room.
Dark mode
Both anchors survive on dark: Black as the highlight, Red 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%, red ~30% for structure, black ~10% for calls to action.
Gradient bridge
The direct perceptual path from red to black — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #FF0000 | #000000 | 5.25:1 | ✓ | ✗ |
| #000000 | #FF0000 | 5.25:1 | ✓ | ✗ |
| #FF0000 | #FFFFFF | 4.00:1 | ✗ | ✗ |
| #FF0000 | #000000 | 5.25:1 | ✓ | ✗ |
| #000000 | #FFFFFF | 21.00:1 | ✓ | ✓ |
| #000000 | #000000 | 1.00:1 | ✗ | ✗ |
| #16161D | #62001C | 1.32:1 | ✗ | ✗ |
Related combinations
FAQ
Do red and black go together?
Yes — maximum warm-energy contrast — the boldest pairing on the wheel. Their hues are 0° apart on the color wheel and the direct pair contrast is 5.25:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on red and black?
On red use #000000 text (5.25:1); on black use #FFFFFF (21:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Red: #FF0000 — OKLCH oklch(62.8% 0.258 29.2). Black: #000000 — OKLCH oklch(0% 0 0).