Terracotta Patio
A complete five-role scheme. warm and earthy in character — tagged for restaurants, interior.
#c65d3b #e0a487 #5b7553 #fdf6f0 #3c2a21 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',
}Best text pairings
The strongest foreground/background combinations in Terracotta Patio, 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.
#3c2a21 on #fdf6f0 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on secondary — meets AA for body text.
#3c2a21 on #e0a487 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — accent on background — meets AA for body text.
#5b7553 on #fdf6f0 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — primary on background — suits large text and UI accents only.
#c65d3b on #fdf6f0