Abyss color palette
Pure black and four grays that barely rise above it. #000000, #0D0D0D and #1A1A1A are hard to tell apart on most screens, and #404040, the lightest, is still a deep graphite. It's a palette for layering darkness. Pair it with white text and a single accent color of your own. Film production companies and luxury fashion brands use darkness like this to make photos stand out.
Abyss palette in use
Use #000000 as the page, #1A1A1A and #262626 for cards and inputs, and #404040 for borders and dividers. Bring in white for text and one accent of your choice for buttons.
This pair measures 21.00:1, so it works for body text too. The button uses #404040 with white text.
ButtonGood for
- OLED app theme
- Film studio website
- Luxury fashion lookbook
- Photographer portfolio
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Abyss palette as code
CSS variables
:root {
--abyss-1: #000000;
--abyss-2: #0D0D0D;
--abyss-3: #1A1A1A;
--abyss-4: #262626;
--abyss-5: #404040;
}Tailwind v4
@theme {
--color-abyss-1: #000000;
--color-abyss-2: #0D0D0D;
--color-abyss-3: #1A1A1A;
--color-abyss-4: #262626;
--color-abyss-5: #404040;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'abyss': {
100: '#000000',
200: '#0D0D0D',
300: '#1A1A1A',
400: '#262626',
500: '#404040',
},SCSS
$abyss-1: #000000;
$abyss-2: #0D0D0D;
$abyss-3: #1A1A1A;
$abyss-4: #262626;
$abyss-5: #404040;JSON
["#000000","#0D0D0D","#1A1A1A","#262626","#404040"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.