Olive Course
A complete five-role scheme. natural and earthy in character — tagged for food, wellness.
primary
#606c38 secondary
#a3b18a accent
#bc6c25 background
#fefae0 text
#283618 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 | #606c38 | 96, 108, 56 | 74°, 32%, 32% |
| secondary | #a3b18a | 163, 177, 138 | 82°, 20%, 62% |
| accent | #bc6c25 | 188, 108, 37 | 28°, 67%, 44% |
| background | #fefae0 | 254, 250, 224 | 52°, 94%, 94% |
| text | #283618 | 40, 54, 24 | 88°, 38%, 15% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 12.24 | AAA |
| primary on background | 5.40 | AA |
| secondary on background | 2.17 | fail |
| accent on background | 3.76 | AA-large |
| background on primary | 5.40 | AA |
| background on accent | 3.76 | AA-large |
CSS variables
:root {
--color-primary: #606c38;
--color-secondary: #a3b18a;
--color-accent: #bc6c25;
--color-bg: #fefae0;
--color-text: #283618;
}Tailwind
colors: {
primary: '#606c38',
secondary: '#a3b18a',
accent: '#bc6c25',
background: '#fefae0',
text: '#283618',
}