Terracotta Patio
A complete five-role scheme. warm and earthy in character — tagged for restaurants, interior.
primary
#c65d3b secondary
#e0a487 accent
#5b7553 background
#fdf6f0 text
#3c2a21 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 | #c65d3b | 198, 93, 59 | 15°, 55%, 50% |
| secondary | #e0a487 | 224, 164, 135 | 20°, 59%, 70% |
| accent | #5b7553 | 91, 117, 83 | 106°, 17%, 39% |
| background | #fdf6f0 | 253, 246, 240 | 28°, 76%, 97% |
| text | #3c2a21 | 60, 42, 33 | 20°, 29%, 18% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 12.69 | AAA |
| primary on background | 3.90 | AA-large |
| secondary on background | 2.00 | fail |
| accent on background | 4.77 | AA |
| background on primary | 3.90 | AA-large |
| background on accent | 4.77 | AA |
CSS variables
:root {
--color-primary: #c65d3b;
--color-secondary: #e0a487;
--color-accent: #5b7553;
--color-bg: #fdf6f0;
--color-text: #3c2a21;
}Tailwind
colors: {
primary: '#c65d3b',
secondary: '#e0a487',
accent: '#5b7553',
background: '#fdf6f0',
text: '#3c2a21',
}