vibrant
Obsidian and Saffron
10.27:1 contrast ratio —
AAAVisual Preview
#1B1B2FObsidian
#F4C430Saffron
The quick brown fox
Body text — Obsidian on Saffron
Supporting text at reduced opacity
Badge
Reversed — Saffron on Obsidian
Inverted combination preview
Contrast Analysis
Contrast Ratio
10.27:1
AAAWCAG AA
✓ Pass
Requires 4.5:1
WCAG AA Large
✓ Pass
Requires 3:1
WCAG AAA
✓ Pass
Requires 7:1
Color Values
Obsidian
Foreground (Text)
- HEX
- #1B1B2F
- RGB
- rgb(27, 27, 47)
- HSL
- hsl(240, 27%, 15%)
Saffron
Background
- HEX
- #F4C430
- RGB
- rgb(244, 196, 48)
- HSL
- hsl(45, 90%, 57%)
Design Use Cases
- Accessibility-critical text
- Body copy
- Public sector services
- Medical content
Industry Recommendations
Luxury Retail
Hospitality
Jewelry
High Fashion
Premium Automotive
Color Psychology
The Obsidian tone evokes sophistication, power, and elegance, while Saffron brings optimism, warmth, and attention. Together, they create a balanced palette suited for compelling visual communication.
Palette Exports
:root {
--color-obsidian: #1B1B2F;
--color-saffron: #F4C430;
}
.combo-obsidian-saffron {
color: var(--color-obsidian);
background-color: var(--color-saffron);
}Quick Snippets
CSS Variables
:root {
--color-obsidian: #1B1B2F;
--color-saffron: #F4C430;
}Tailwind CSS
<div class="bg-yellow-400 text-slate-900"> Your content here </div>