Harbor Night
A complete five-role scheme. bold and confident in character — tagged for tech, finance.
primary
#3a86ff secondary
#8ecae6 accent
#ffb703 background
#0b132b text
#e0e7ff 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 | #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',
}