Campus Blue
A complete five-role scheme. optimistic and trustworthy in character — tagged for education, tech.
primary
#2456a6 secondary
#7ca3d6 accent
#f59e0b background
#f7f9fd text
#14243d 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 | #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',
}