#121128
#464A64
#837581
#D4CBC6
#01030EObsidian
#203148Prussian Blue
#5A718FSlate
#DAD5C3Oat
Slate & Prussian Blue Hour is a dark, complementary color palette tagged dark, muted, minimal. Near-complementary hues (about 168° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Obsidian | #01030E | rgb(1, 3, 14) | hsl(231, 87%, 3%) | oklch(10.3% 0.033 265) | |
| Prussian Blue | #203148 | rgb(32, 49, 72) | hsl(215, 38%, 20%) | oklch(31.0% 0.047 256) | |
| Slate | #5A718F | rgb(90, 113, 143) | hsl(214, 23%, 46%) | oklch(54.2% 0.055 255) | |
| Oat | #DAD5C3 | rgb(218, 213, 195) | hsl(47, 24%, 81%) | oklch(87.2% 0.025 94) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (81% down to 3% lightness). A natural fit for dark-mode interfaces and gaming.
- Background: Oat (#DAD5C3) is the lightest color, so it belongs on large surfaces.
- Text: Obsidian (#01030E) on #DAD5C3 gives 14:1, passing WCAG AAA.
- Primary: Prussian Blue (#203148) is the most saturated mid-tone; use it for buttons and links (8.96:1 against the background, fine for UI elements).
- Accent: Slate (#5A718F) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Oat at 14:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Slate & Prussian Blue Hour
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#01030E
#203148
#5A718F
#DAD5C3
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#01030E on #DAD5C3 | Aa | 14:1 | AAA |
#203148 on #DAD5C3 | Aa | 8.96:1 | AAA |
#01030E on #5A718F | Aa | 4.11:1 | AA large only |
#5A718F on #DAD5C3 | Aa | 3.41:1 | AA large only |
#203148 on #5A718F | Aa | 2.63:1 | Fail |
#01030E on #203148 | Aa | 1.56:1 | Fail |
Similar palettes 24 more in this mood
#0D1321
#34465E
#748CAB
#F0EBD8
#1E1410
#5B4235
#A57C5B
#E8DCCF
#020B25
#27446D
#C2AE91
#E3E0DB
#F5FBF9
#D4E3DE
#374B00
#0A1100
#EBDED9
#846C60
#634531
#1B140B
#D3E7F1
#7996A6
#00515E
#01151A
#DEF5F9
#7798AC
#37583B
#171F0C
#EAEAEA
#C6CBD0
#213F62
#010A18
#1C1310
#5D473C
#8A6A55
#EADFD3
#D8D1C6
#BEB19C
#233E64
#000A1E
#180A06
#563B2E
#8C6243
#D0C6BB
#24150D
#654635
#7ABDAA
#D7D3CE
#0B0F0E
#3A4642
#BEF62F
#F3FFE0
#0F1421
#424A66
#6A7B94
#AEF3E6
#000000
#3A3A3A
#D4AF37
#F2F2F2
#3E2723
#6D4C41
#A1887F
#EFEBE9
#0A0A0A
#3D3D3D
#CCFF00
#FFFFFF
#111111
#424242
#FF3B3B
#FAFAFA
#0B0F14
#3C4552
#2EE6A6
#E6EDF3
#1A1A1D
#4C4C54
#E8788A
#F4F4F6
#111318
#454A54
#F4A7B9
#FBFBFC
#0F1419
#3E4C59
#D9B99B
#F3EFE9
#18191A
#4F5052
#B8F53F
#F7F7F5