Driftwood
A complete five-role scheme. serene and natural in character — tagged for interior, travel.
primary
#8c7a63 secondary
#c8b8a2 accent
#3e7c94 background
#fbf9f5 text
#2c251b 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 | #8c7a63 | 140, 122, 99 | 34°, 17%, 47% |
| secondary | #c8b8a2 | 200, 184, 162 | 35°, 26%, 71% |
| accent | #3e7c94 | 62, 124, 148 | 197°, 41%, 41% |
| background | #fbf9f5 | 251, 249, 245 | 40°, 43%, 97% |
| text | #2c251b | 44, 37, 27 | 35°, 24%, 14% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 14.39 | AAA |
| primary on background | 3.93 | AA-large |
| secondary on background | 1.84 | fail |
| accent on background | 4.42 | AA-large |
| background on primary | 3.93 | AA-large |
| background on accent | 4.42 | AA-large |
CSS variables
:root {
--color-primary: #8c7a63;
--color-secondary: #c8b8a2;
--color-accent: #3e7c94;
--color-bg: #fbf9f5;
--color-text: #2c251b;
}Tailwind
colors: {
primary: '#8c7a63',
secondary: '#c8b8a2',
accent: '#3e7c94',
background: '#fbf9f5',
text: '#2c251b',
}