Coral Reef
A complete five-role scheme. friendly and vibrant in character — tagged for travel, retail.
#e85d50 #ffb3ab #1b8a8f #fffaf8 #34201d Ship your next idea faster
Everything you need to launch, in one place.
Get started Learn moreOpen this scheme in the Studio →
Color values
| Role | Hex | RGB | HSL |
|---|---|---|---|
| primary | #e85d50 | 232, 93, 80 | 5°, 77%, 61% |
| secondary | #ffb3ab | 255, 179, 171 | 6°, 100%, 84% |
| accent | #1b8a8f | 27, 138, 143 | 183°, 68%, 33% |
| background | #fffaf8 | 255, 250, 248 | 17°, 100%, 99% |
| text | #34201d | 52, 32, 29 | 8°, 28%, 16% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 14.80 | AAA |
| primary on background | 3.32 | AA-large |
| secondary on background | 1.65 | fail |
| accent on background | 3.99 | AA-large |
| background on primary | 3.32 | AA-large |
| background on accent | 3.99 | AA-large |
CSS variables
:root {
--color-primary: #e85d50;
--color-secondary: #ffb3ab;
--color-accent: #1b8a8f;
--color-bg: #fffaf8;
--color-text: #34201d;
}Tailwind
colors: {
primary: '#e85d50',
secondary: '#ffb3ab',
accent: '#1b8a8f',
background: '#fffaf8',
text: '#34201d',
}Best text pairings
The strongest foreground/background combinations in Coral Reef, ranked by WCAG contrast. Darker color set as the text; ratios of 4.5:1+ suit body copy, 7:1+ meet AAA.
Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on background — clears AAA comfortably.
#34201d on #fffaf8 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on secondary — clears AAA comfortably.
#34201d on #ffb3ab Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on primary — suits large text and UI accents only.
#34201d on #e85d50 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — accent on background — suits large text and UI accents only.
#1b8a8f on #fffaf8