Helping Hand
A complete five-role scheme. optimistic and trustworthy in character — tagged for nonprofit, education.
#0369a1 #7dd3fc #f59e0b #f7fbfd #0c2836 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 | #0369a1 | 3, 105, 161 | 201°, 96%, 32% |
| secondary | #7dd3fc | 125, 211, 252 | 199°, 95%, 74% |
| accent | #f59e0b | 245, 158, 11 | 38°, 92%, 50% |
| background | #f7fbfd | 247, 251, 253 | 200°, 60%, 98% |
| text | #0c2836 | 12, 40, 54 | 200°, 64%, 13% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 14.70 | AAA |
| primary on background | 5.70 | AA |
| secondary on background | 1.60 | fail |
| accent on background | 2.06 | fail |
| background on primary | 5.70 | AA |
| background on accent | 2.06 | fail |
CSS variables
:root {
--color-primary: #0369a1;
--color-secondary: #7dd3fc;
--color-accent: #f59e0b;
--color-bg: #f7fbfd;
--color-text: #0c2836;
}Tailwind
colors: {
primary: '#0369a1',
secondary: '#7dd3fc',
accent: '#f59e0b',
background: '#f7fbfd',
text: '#0c2836',
}Best text pairings
The strongest foreground/background combinations in Helping Hand, ranked by WCAG contrast. Darker color set as the text; ratios of 4.5:1+ suit body copy, 7:1+ meet AAA.
Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on background — clears AAA comfortably.
#0c2836 on #f7fbfd Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on secondary — clears AAA comfortably.
#0c2836 on #7dd3fc Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on accent — clears AAA comfortably.
#0c2836 on #f59e0b Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — primary on background — meets AA for body text.
#0369a1 on #f7fbfd