Checkout Fresh
A complete five-role scheme. fresh and friendly in character — tagged for ecommerce, retail.
primary
#0e9f6e secondary
#84e1bc accent
#ff5a1f background
#f9fdfb text
#0f2e22 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 | #0e9f6e | 14, 159, 110 | 160°, 84%, 34% |
| secondary | #84e1bc | 132, 225, 188 | 156°, 61%, 70% |
| accent | #ff5a1f | 255, 90, 31 | 16°, 100%, 56% |
| background | #f9fdfb | 249, 253, 251 | 150°, 50%, 98% |
| text | #0f2e22 | 15, 46, 34 | 157°, 51%, 12% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 14.27 | AAA |
| primary on background | 3.30 | AA-large |
| secondary on background | 1.52 | fail |
| accent on background | 3.04 | AA-large |
| background on primary | 3.30 | AA-large |
| background on accent | 3.04 | AA-large |
CSS variables
:root {
--color-primary: #0e9f6e;
--color-secondary: #84e1bc;
--color-accent: #ff5a1f;
--color-bg: #f9fdfb;
--color-text: #0f2e22;
}Tailwind
colors: {
primary: '#0e9f6e',
secondary: '#84e1bc',
accent: '#ff5a1f',
background: '#f9fdfb',
text: '#0f2e22',
}