Brownstone
A complete five-role scheme. grounded and warm in character — tagged for real-estate, interior.
primary
#7a4a2b secondary
#b98a5f accent
#33556b background
#fbf7f2 text
#2b1d12 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 | #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',
}