Regatta
A complete five-role scheme. confident and fresh in character — tagged for travel, retail.
#1e3a5f #6b93b8 #e4572e #f7fafc #12233a 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',
}Best text pairings
The strongest foreground/background combinations in Regatta, 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.
#12233a on #f7fafc Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — primary on background — clears AAA comfortably.
#1e3a5f on #f7fafc Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on secondary — meets AA for body text.
#12233a on #6b93b8 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on accent — suits large text and UI accents only.
#12233a on #e4572e