Brownstone
A complete five-role scheme. grounded and warm in character — tagged for real-estate, interior.
#7a4a2b #b98a5f #33556b #fbf7f2 #2b1d12 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 | #7a4a2b | 122, 74, 43 | 24°, 48%, 32% |
| secondary | #b98a5f | 185, 138, 95 | 29°, 39%, 55% |
| accent | #33556b | 51, 85, 107 | 204°, 35%, 31% |
| background | #fbf7f2 | 251, 247, 242 | 33°, 53%, 97% |
| text | #2b1d12 | 43, 29, 18 | 26°, 41%, 12% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 15.30 | AAA |
| primary on background | 6.93 | AA |
| secondary on background | 2.87 | fail |
| accent on background | 7.42 | AAA |
| background on primary | 6.93 | AA |
| background on accent | 7.42 | AAA |
CSS variables
:root {
--color-primary: #7a4a2b;
--color-secondary: #b98a5f;
--color-accent: #33556b;
--color-bg: #fbf7f2;
--color-text: #2b1d12;
}Tailwind
colors: {
primary: '#7a4a2b',
secondary: '#b98a5f',
accent: '#33556b',
background: '#fbf7f2',
text: '#2b1d12',
}Best text pairings
The strongest foreground/background combinations in Brownstone, 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.
#2b1d12 on #fbf7f2 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — accent on background — clears AAA comfortably.
#33556b on #fbf7f2 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — primary on background — meets AA for body text.
#7a4a2b on #fbf7f2 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on secondary — meets AA for body text.
#2b1d12 on #b98a5f