Beige and Teal
Why they work: the coastline pairing — pale sand meeting deep water.
Combination sets
The classic split
Beige and Teal with a light tint of beige, a deep shade of teal and white for breathing room.
Dark mode
Both anchors survive on dark: Teal as the highlight, Beige 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%, beige ~30% for structure, teal ~10% for calls to action.
Gradient bridge
The direct perceptual path from beige to teal — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #F5F5DC | #008080 | 4.31:1 | ✗ | ✗ |
| #008080 | #F5F5DC | 4.31:1 | ✗ | ✗ |
| #F5F5DC | #FFFFFF | 1.11:1 | ✗ | ✗ |
| #F5F5DC | #000000 | 18.98:1 | ✓ | ✓ |
| #008080 | #FFFFFF | 4.77:1 | ✓ | ✗ |
| #008080 | #000000 | 4.40:1 | ✗ | ✗ |
| #16161D | #93BB9B | 8.42:1 | ✓ | ✓ |
Related combinations
FAQ
Do beige and teal go together?
Yes — the coastline pairing — pale sand meeting deep water. Their hues are 120° apart on the color wheel and the direct pair contrast is 4.31:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on beige and teal?
On beige use #000000 text (18.98:1); on teal use #FFFFFF (4.77:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Beige: #F5F5DC — OKLCH oklch(96.36% 0.033 107). Teal: #008080 — OKLCH oklch(54.31% 0.093 194.8).