Obsidian color palette
Three navies, #1A1A2E, #16213E and #0F3460, are nearly black and give a glassy dark base. On top sit two warm accents: a hot coral-red, #E94560, and amber #F5A623. Warm against cool pushes the accents forward, so buttons and alerts are hard to miss. It suits gaming platforms, fintech apps, event pages and SaaS landing pages with a dark hero.
Obsidian palette in use
Set #1A1A2E as the background and #16213E or #0F3460 for cards. #E94560 is the call-to-action color, and #F5A623 works for headings, ratings and warnings, with off-white body text.
This pair measures 8.41:1, so it works for body text too. The button uses #E94560 with black text.
ButtonGood for
- Gaming platform UI
- Fintech app dark theme
- SaaS hero section
- Event registration page
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 |
|---|---|---|---|
#1A1A2E | #F5A623 | 8.41:1 | AAA |
#16213E | #F5A623 | 7.84:1 | AAA |
#0F3460 | #F5A623 | 6.16:1 | AA |
#1A1A2E | #E94560 | 4.45:1 | AA large |
#16213E | #E94560 | 4.15:1 | AA large |
#0F3460 | #E94560 | 3.26:1 | AA large |
Obsidian palette as code
CSS variables
:root {
--obsidian-1: #1A1A2E;
--obsidian-2: #16213E;
--obsidian-3: #0F3460;
--obsidian-4: #E94560;
--obsidian-5: #F5A623;
}Tailwind v4
@theme {
--color-obsidian-1: #1A1A2E;
--color-obsidian-2: #16213E;
--color-obsidian-3: #0F3460;
--color-obsidian-4: #E94560;
--color-obsidian-5: #F5A623;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'obsidian': {
100: '#1A1A2E',
200: '#16213E',
300: '#0F3460',
400: '#E94560',
500: '#F5A623',
},SCSS
$obsidian-1: #1A1A2E;
$obsidian-2: #16213E;
$obsidian-3: #0F3460;
$obsidian-4: #E94560;
$obsidian-5: #F5A623;JSON
["#1A1A2E","#16213E","#0F3460","#E94560","#F5A623"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.