Coral Reef
A complete five-role scheme. friendly and vibrant in character — tagged for travel, retail.
primary
#e85d50 secondary
#ffb3ab accent
#1b8a8f background
#fffaf8 text
#34201d AcmeSign up
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',
}