Sky Blue and Coral
Why they work: a summer postcard — airy blue with warm coral illumination.
Combination sets
The classic split
Sky Blue and Coral with a light tint of sky blue, a deep shade of coral and white for breathing room.
Dark mode
Both anchors survive on dark: Coral as the highlight, Sky Blue 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%, sky blue ~30% for structure, coral ~10% for calls to action.
Gradient bridge
The direct perceptual path from sky blue to coral — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #87CEEB | #FF7F50 | 1.43:1 | ✗ | ✗ |
| #FF7F50 | #87CEEB | 1.43:1 | ✗ | ✗ |
| #87CEEB | #FFFFFF | 1.74:1 | ✗ | ✗ |
| #87CEEB | #000000 | 12.06:1 | ✓ | ✓ |
| #FF7F50 | #FFFFFF | 2.50:1 | ✗ | ✗ |
| #FF7F50 | #000000 | 8.40:1 | ✓ | ✓ |
| #16161D | #D29EEF | 8.47:1 | ✓ | ✓ |
Related combinations
FAQ
Do sky blue and coral go together?
Yes — a summer postcard — airy blue with warm coral illumination. Their hues are 179° apart on the color wheel and the direct pair contrast is 1.43:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on sky blue and coral?
On sky blue use #000000 text (12.06:1); on coral use #000000 (8.4:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Sky Blue: #87CEEB — OKLCH oklch(81.48% 0.082 225.8). Coral: #FF7F50 — OKLCH oklch(73.51% 0.168 40.2).