Aqua Code color palette
Three deep blues, #003B5C, #005F8A and #0F68A9, form a dark, focused base, and aqua #00CFCF and mint green #7EF29D give it bright signal colors. The mint reads like a passing test or a confirmed payment. It feels technical, though friendlier than a black-and-green terminal theme. It's a strong pick for developer tools and fintech dashboards.
Aqua Code palette in use
Build on #003B5C, with #005F8A panels and #7EF29D for text and success states. #00CFCF suits links and buttons, and #0F68A9 works for selected rows.
This pair measures 8.46:1, so it works for body text too. The button uses #00CFCF with black text.
ButtonGood for
- Developer tool interface
- Fintech dashboard
- Documentation site
- Health tech app
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#003B5C | #7EF29D | 8.46:1 | AAA |
#003B5C | #00CFCF | 6.08:1 | AA |
#005F8A | #7EF29D | 5.01:1 | AA |
#0F68A9 | #7EF29D | 4.21:1 | AA large |
#005F8A | #00CFCF | 3.60:1 | AA large |
#0F68A9 | #00CFCF | 3.02:1 | AA large |
Aqua Code palette as code
CSS variables
:root {
--aqua-code-1: #7EF29D;
--aqua-code-2: #0F68A9;
--aqua-code-3: #00CFCF;
--aqua-code-4: #005F8A;
--aqua-code-5: #003B5C;
}Tailwind v4
@theme {
--color-aqua-code-1: #7EF29D;
--color-aqua-code-2: #0F68A9;
--color-aqua-code-3: #00CFCF;
--color-aqua-code-4: #005F8A;
--color-aqua-code-5: #003B5C;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'aqua-code': {
100: '#7EF29D',
200: '#0F68A9',
300: '#00CFCF',
400: '#005F8A',
500: '#003B5C',
},SCSS
$aqua-code-1: #7EF29D;
$aqua-code-2: #0F68A9;
$aqua-code-3: #00CFCF;
$aqua-code-4: #005F8A;
$aqua-code-5: #003B5C;JSON
["#7EF29D","#0F68A9","#00CFCF","#005F8A","#003B5C"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.