Turquoise and Coral
Why they work: the beach umbrella pairing — bright blue-green and warm coral.
Combination sets
The classic split
Turquoise and Coral with a light tint of turquoise, a deep shade of coral and white for breathing room.
Dark mode
Both anchors survive on dark: Coral as the highlight, Turquoise 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%, turquoise ~30% for structure, coral ~10% for calls to action.
Gradient bridge
The direct perceptual path from turquoise to coral — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #40E0D0 | #FF7F50 | 1.52:1 | ✗ | ✗ |
| #FF7F50 | #40E0D0 | 1.52:1 | ✗ | ✗ |
| #40E0D0 | #FFFFFF | 1.64:1 | ✗ | ✗ |
| #40E0D0 | #000000 | 12.79:1 | ✓ | ✓ |
| #FF7F50 | #FFFFFF | 2.50:1 | ✗ | ✗ |
| #FF7F50 | #000000 | 8.40:1 | ✓ | ✓ |
| #16161D | #B9C03F | 9.15:1 | ✓ | ✓ |
Related combinations
FAQ
Do turquoise and coral go together?
Yes — the beach umbrella pairing — bright blue-green and warm coral. Their hues are 158° apart on the color wheel and the direct pair contrast is 1.52:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on turquoise and coral?
On turquoise use #000000 text (12.79:1); on coral use #000000 (8.4:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Turquoise: #40E0D0 — OKLCH oklch(82.23% 0.131 185.1). Coral: #FF7F50 — OKLCH oklch(73.51% 0.168 40.2).