Regatta
A complete five-role scheme. confident and fresh in character — tagged for travel, retail.
primary
#1e3a5f secondary
#6b93b8 accent
#e4572e background
#f7fafc text
#12233a 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 | #1e3a5f | 30, 58, 95 | 214°, 52%, 25% |
| secondary | #6b93b8 | 107, 147, 184 | 209°, 35%, 57% |
| accent | #e4572e | 228, 87, 46 | 14°, 77%, 54% |
| background | #f7fafc | 247, 250, 252 | 204°, 45%, 98% |
| text | #12233a | 18, 35, 58 | 215°, 53%, 15% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 15.10 | AAA |
| primary on background | 10.97 | AAA |
| secondary on background | 3.09 | AA-large |
| accent on background | 3.51 | AA-large |
| background on primary | 10.97 | AAA |
| background on accent | 3.51 | AA-large |
CSS variables
:root {
--color-primary: #1e3a5f;
--color-secondary: #6b93b8;
--color-accent: #e4572e;
--color-bg: #f7fafc;
--color-text: #12233a;
}Tailwind
colors: {
primary: '#1e3a5f',
secondary: '#6b93b8',
accent: '#e4572e',
background: '#f7fafc',
text: '#12233a',
}