Clinic Calm
A complete five-role scheme. calming and trustworthy in character — tagged for healthcare, wellness.
primary
#2f7fa3 secondary
#8fc3d9 accent
#58b09c background
#f6fafc text
#14303c 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 | #2f7fa3 | 47, 127, 163 | 199°, 55%, 41% |
| secondary | #8fc3d9 | 143, 195, 217 | 198°, 49%, 71% |
| accent | #58b09c | 88, 176, 156 | 166°, 36%, 52% |
| background | #f6fafc | 246, 250, 252 | 200°, 50%, 98% |
| text | #14303c | 20, 48, 60 | 198°, 50%, 16% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 13.18 | AAA |
| primary on background | 4.27 | AA-large |
| secondary on background | 1.82 | fail |
| accent on background | 2.47 | fail |
| background on primary | 4.27 | AA-large |
| background on accent | 2.47 | fail |
CSS variables
:root {
--color-primary: #2f7fa3;
--color-secondary: #8fc3d9;
--color-accent: #58b09c;
--color-bg: #f6fafc;
--color-text: #14303c;
}Tailwind
colors: {
primary: '#2f7fa3',
secondary: '#8fc3d9',
accent: '#58b09c',
background: '#f6fafc',
text: '#14303c',
}