Deep Pixel color palette
Most of the work here is done by blue. #0A0A23 is a navy so dark it reads as black, then three bright blues climb from dodger blue to pure cyan. Light gray #E0E0E0 is the only neutral, and it's what keeps long text readable. The palette looks technical and clear-headed, and it's at its best in dark mode. Cloud hosting dashboards and API documentation are where this palette earns its keep.
Deep Pixel palette in use
Use #0A0A23 as the background with #E0E0E0 for body text. #1E90FF suits primary buttons, #00BFFF links, and #00FFFF small accents like code highlights or status dots.
This pair measures 15.49:1, so it works for body text too. The button uses #1E90FF with black text.
ButtonGood for
- Cloud hosting dashboard
- API documentation site
- Data platform landing page
- Developer conference slides
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 |
|---|---|---|---|
#0A0A23 | #00FFFF | 15.49:1 | AAA |
#0A0A23 | #E0E0E0 | 14.72:1 | AAA |
#0A0A23 | #00BFFF | 9.15:1 | AAA |
#0A0A23 | #1E90FF | 6.00:1 | AA |
Deep Pixel palette as code
CSS variables
:root {
--deep-pixel-1: #0A0A23;
--deep-pixel-2: #1E90FF;
--deep-pixel-3: #00BFFF;
--deep-pixel-4: #00FFFF;
--deep-pixel-5: #E0E0E0;
}Tailwind v4
@theme {
--color-deep-pixel-1: #0A0A23;
--color-deep-pixel-2: #1E90FF;
--color-deep-pixel-3: #00BFFF;
--color-deep-pixel-4: #00FFFF;
--color-deep-pixel-5: #E0E0E0;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'deep-pixel': {
100: '#0A0A23',
200: '#1E90FF',
300: '#00BFFF',
400: '#00FFFF',
500: '#E0E0E0',
},SCSS
$deep-pixel-1: #0A0A23;
$deep-pixel-2: #1E90FF;
$deep-pixel-3: #00BFFF;
$deep-pixel-4: #00FFFF;
$deep-pixel-5: #E0E0E0;JSON
["#0A0A23","#1E90FF","#00BFFF","#00FFFF","#E0E0E0"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.