Driftwood
A complete five-role scheme. serene and natural in character — tagged for interior, travel.
#8c7a63 #c8b8a2 #3e7c94 #fbf9f5 #2c251b 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',
}Best text pairings
The strongest foreground/background combinations in Driftwood, 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.
#2c251b on #fbf9f5 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on secondary — clears AAA comfortably.
#2c251b on #c8b8a2 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — accent on background — suits large text and UI accents only.
#3e7c94 on #fbf9f5 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — primary on background — suits large text and UI accents only.
#8c7a63 on #fbf9f5