Harbor Night
A complete five-role scheme. bold and confident in character — tagged for tech, finance.
#3a86ff #8ecae6 #ffb703 #0b132b #e0e7ff 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 | #3a86ff | 58, 134, 255 | 217°, 100%, 61% |
| secondary | #8ecae6 | 142, 202, 230 | 199°, 64%, 73% |
| accent | #ffb703 | 255, 183, 3 | 43°, 100%, 51% |
| background | #0b132b | 11, 19, 43 | 225°, 59%, 11% |
| text | #e0e7ff | 224, 231, 255 | 226°, 100%, 94% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 14.92 | AAA |
| primary on background | 5.28 | AA |
| secondary on background | 10.28 | AAA |
| accent on background | 10.53 | AAA |
| background on primary | 5.28 | AA |
| background on accent | 10.53 | AAA |
CSS variables
:root {
--color-primary: #3a86ff;
--color-secondary: #8ecae6;
--color-accent: #ffb703;
--color-bg: #0b132b;
--color-text: #e0e7ff;
}Tailwind
colors: {
primary: '#3a86ff',
secondary: '#8ecae6',
accent: '#ffb703',
background: '#0b132b',
text: '#e0e7ff',
}Best text pairings
The strongest foreground/background combinations in Harbor Night, 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 — background on text — clears AAA comfortably.
#0b132b on #e0e7ff Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — background on accent — clears AAA comfortably.
#0b132b on #ffb703 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — background on secondary — clears AAA comfortably.
#0b132b on #8ecae6 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — background on primary — meets AA for body text.
#0b132b on #3a86ff