Mustard Seed
A complete five-role scheme. warm and optimistic in character — tagged for education, nonprofit.
primary
#b1870f secondary
#e6c76a accent
#34506b background
#fdfaf1 text
#2b230d 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 | #b1870f | 177, 135, 15 | 44°, 84%, 38% |
| secondary | #e6c76a | 230, 199, 106 | 45°, 71%, 66% |
| accent | #34506b | 52, 80, 107 | 209°, 35%, 31% |
| background | #fdfaf1 | 253, 250, 241 | 45°, 75%, 97% |
| text | #2b230d | 43, 35, 13 | 44°, 54%, 11% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 14.92 | AAA |
| primary on background | 3.17 | AA-large |
| secondary on background | 1.58 | fail |
| accent on background | 8.03 | AAA |
| background on primary | 3.17 | AA-large |
| background on accent | 8.03 | AAA |
CSS variables
:root {
--color-primary: #b1870f;
--color-secondary: #e6c76a;
--color-accent: #34506b;
--color-bg: #fdfaf1;
--color-text: #2b230d;
}Tailwind
colors: {
primary: '#b1870f',
secondary: '#e6c76a',
accent: '#34506b',
background: '#fdfaf1',
text: '#2b230d',
}