Cobalt Dreams color palette
Four layered navies, from #0A192F to a mid cobalt #2E6DB4, finish with a light sky blue, #64B5F6, that pops off the dark like a hyperlink. The navies have a slight gray tint that keeps them from looking flat. The set has a calm, competent feel that suits developer portfolios and dark SaaS dashboards. Analytics tools and fintech apps can borrow it as well.
Cobalt Dreams palette in use
The page sits on #0A192F, with #172A45 or #1E3A5F for cards. #64B5F6 handles links, headings and buttons, and #2E6DB4 suits borders and selected states, with light gray body text.
This pair measures 7.94:1, so it works for body text too. The button uses #2E6DB4 with white text.
ButtonGood for
- Developer portfolio
- Dark SaaS dashboard
- Analytics tool
- Fintech 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 |
|---|---|---|---|
#0A192F | #64B5F6 | 7.94:1 | AAA |
#172A45 | #64B5F6 | 6.52:1 | AA |
#1E3A5F | #64B5F6 | 5.19:1 | AA |
#0A192F | #2E6DB4 | 3.32:1 | AA large |
Cobalt Dreams palette as code
CSS variables
:root {
--cobalt-dreams-1: #0A192F;
--cobalt-dreams-2: #172A45;
--cobalt-dreams-3: #1E3A5F;
--cobalt-dreams-4: #2E6DB4;
--cobalt-dreams-5: #64B5F6;
}Tailwind v4
@theme {
--color-cobalt-dreams-1: #0A192F;
--color-cobalt-dreams-2: #172A45;
--color-cobalt-dreams-3: #1E3A5F;
--color-cobalt-dreams-4: #2E6DB4;
--color-cobalt-dreams-5: #64B5F6;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'cobalt-dreams': {
100: '#0A192F',
200: '#172A45',
300: '#1E3A5F',
400: '#2E6DB4',
500: '#64B5F6',
},SCSS
$cobalt-dreams-1: #0A192F;
$cobalt-dreams-2: #172A45;
$cobalt-dreams-3: #1E3A5F;
$cobalt-dreams-4: #2E6DB4;
$cobalt-dreams-5: #64B5F6;JSON
["#0A192F","#172A45","#1E3A5F","#2E6DB4","#64B5F6"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.