Campus Blue
A complete five-role scheme. optimistic and trustworthy in character — tagged for education, tech.
#2456a6 #7ca3d6 #f59e0b #f7f9fd #14243d 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 | #2456a6 | 36, 86, 166 | 217°, 64%, 40% |
| secondary | #7ca3d6 | 124, 163, 214 | 214°, 52%, 66% |
| accent | #f59e0b | 245, 158, 11 | 38°, 92%, 50% |
| background | #f7f9fd | 247, 249, 253 | 220°, 60%, 98% |
| text | #14243d | 20, 36, 61 | 217°, 51%, 16% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 14.76 | AAA |
| primary on background | 6.74 | AA |
| secondary on background | 2.47 | fail |
| accent on background | 2.04 | fail |
| background on primary | 6.74 | AA |
| background on accent | 2.04 | fail |
CSS variables
:root {
--color-primary: #2456a6;
--color-secondary: #7ca3d6;
--color-accent: #f59e0b;
--color-bg: #f7f9fd;
--color-text: #14243d;
}Tailwind
colors: {
primary: '#2456a6',
secondary: '#7ca3d6',
accent: '#f59e0b',
background: '#f7f9fd',
text: '#14243d',
}Best text pairings
The strongest foreground/background combinations in Campus Blue, 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.
#14243d on #f7f9fd Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on accent — clears AAA comfortably.
#14243d on #f59e0b Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — primary on background — meets AA for body text.
#2456a6 on #f7f9fd Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on secondary — meets AA for body text.
#14243d on #7ca3d6