Shadow color palette
Black, navy, deep blue and a dusky purple, #533483, stack into a dark, slightly cool base, and then a hot red-pink, #E94560, cuts through. With just one bright color, every button and alert gets attention. The purple adds a little mystery that a navy-only set wouldn't have. Game studios and streamers can lean on that single red accent.
Shadow palette in use
Use #0D0D0D as the background, #1A1A2E and #0F3460 for cards and panels, and #E94560 for buttons and alerts. #533483 suits selected states and tags, with off-white body text.
This pair measures 5.07:1, so it works for body text too. The button uses #533483 with white text.
ButtonGood for
- Game studio website
- Streamer overlay
- Thriller book cover
- VPN app interface
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 |
|---|---|---|---|
#0D0D0D | #E94560 | 5.07:1 | AA |
#1A1A2E | #E94560 | 4.45:1 | AA large |
#0F3460 | #E94560 | 3.26:1 | AA large |
Shadow palette as code
CSS variables
:root {
--shadow-1: #0D0D0D;
--shadow-2: #1A1A2E;
--shadow-3: #0F3460;
--shadow-4: #533483;
--shadow-5: #E94560;
}Tailwind v4
@theme {
--color-shadow-1: #0D0D0D;
--color-shadow-2: #1A1A2E;
--color-shadow-3: #0F3460;
--color-shadow-4: #533483;
--color-shadow-5: #E94560;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'shadow': {
100: '#0D0D0D',
200: '#1A1A2E',
300: '#0F3460',
400: '#533483',
500: '#E94560',
},SCSS
$shadow-1: #0D0D0D;
$shadow-2: #1A1A2E;
$shadow-3: #0F3460;
$shadow-4: #533483;
$shadow-5: #E94560;JSON
["#0D0D0D","#1A1A2E","#0F3460","#533483","#E94560"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.