Matrix color palette
Black and green, and nothing else. The greens step up evenly from #003B00, barely visible against black, to the pure screen green #00FF00, all at full saturation. That gives you a built-in scale for depth, with dim greens for background code rain and bright green for whatever you want read. It's made for terminal themes, CTF competitions, coding bootcamps and anything with a hacker-movie nod.
Matrix palette in use
Black #000000 is the background, and #00FF00 carries text and the cursor. #00AC00 works for buttons and links, while #003B00 and #007300 suit borders, grid lines and dimmed text.
This pair measures 15.30:1, so it works for body text too. The button uses #00AC00 with black text.
ButtonGood for
- Terminal color theme
- CTF competition site
- Coding bootcamp promo
- Hacker-themed party invite
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 |
|---|---|---|---|
#000000 | #00FF00 | 15.30:1 | AAA |
#003B00 | #00FF00 | 9.41:1 | AAA |
#000000 | #00AC00 | 6.90:1 | AA |
#007300 | #00FF00 | 4.43:1 | AA large |
#003B00 | #00AC00 | 4.24:1 | AA large |
#000000 | #007300 | 3.45:1 | AA large |
Matrix palette as code
CSS variables
:root {
--matrix-1: #000000;
--matrix-2: #003B00;
--matrix-3: #007300;
--matrix-4: #00AC00;
--matrix-5: #00FF00;
}Tailwind v4
@theme {
--color-matrix-1: #000000;
--color-matrix-2: #003B00;
--color-matrix-3: #007300;
--color-matrix-4: #00AC00;
--color-matrix-5: #00FF00;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'matrix': {
100: '#000000',
200: '#003B00',
300: '#007300',
400: '#00AC00',
500: '#00FF00',
},SCSS
$matrix-1: #000000;
$matrix-2: #003B00;
$matrix-3: #007300;
$matrix-4: #00AC00;
$matrix-5: #00FF00;JSON
["#000000","#003B00","#007300","#00AC00","#00FF00"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.