Mint Clinic
A complete five-role scheme. fresh and optimistic in character — tagged for healthcare, wellness.
primary
#2e9c82 secondary
#a8e6d5 accent
#f4845f background
#f4fbf8 text
#123229 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 | #2e9c82 | 46, 156, 130 | 166°, 54%, 40% |
| secondary | #a8e6d5 | 168, 230, 213 | 164°, 55%, 78% |
| accent | #f4845f | 244, 132, 95 | 15°, 87%, 66% |
| background | #f4fbf8 | 244, 251, 248 | 154°, 47%, 97% |
| text | #123229 | 18, 50, 41 | 163°, 47%, 13% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 13.21 | AAA |
| primary on background | 3.23 | AA-large |
| secondary on background | 1.34 | fail |
| accent on background | 2.41 | fail |
| background on primary | 3.23 | AA-large |
| background on accent | 2.41 | fail |
CSS variables
:root {
--color-primary: #2e9c82;
--color-secondary: #a8e6d5;
--color-accent: #f4845f;
--color-bg: #f4fbf8;
--color-text: #123229;
}Tailwind
colors: {
primary: '#2e9c82',
secondary: '#a8e6d5',
accent: '#f4845f',
background: '#f4fbf8',
text: '#123229',
}