#0D1321
#34465E
#748CAB
#F0EBD8
#050915Obsidian
#314E53Charcoal
#5C9188Cadet
#D1F0ABVanilla
Fresh Vanilla & Cadet is a dark, split color palette tagged space, dark, muted. The hues span about 102°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Obsidian | #050915 | rgb(5, 9, 21) | hsl(225, 62%, 5%) | oklch(14.2% 0.028 266) | |
| Charcoal | #314E53 | rgb(49, 78, 83) | hsl(189, 26%, 26%) | oklch(40.3% 0.036 209) | |
| Cadet | #5C9188 | rgb(92, 145, 136) | hsl(170, 22%, 46%) | oklch(61.7% 0.058 182) | |
| Vanilla | #D1F0AB | rgb(209, 240, 171) | hsl(87, 70%, 81%) | oklch(91.6% 0.096 128) |
Why it works and how to use it
With 3 chromatic colors, Charcoal takes the lead while the rest support. Lightness runs from 5% to 81%. Well suited to dark-mode interfaces and gaming.
- Background: Vanilla (#D1F0AB) is the lightest color, so it belongs on large surfaces.
- Text: Obsidian (#050915) on #D1F0AB gives 15.87:1, passing WCAG AAA.
- Primary: Charcoal (#314E53) is the most saturated mid-tone; use it for buttons and links (7.15:1 against the background, fine for UI elements).
- Accent: Cadet (#5C9188) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Vanilla at 15.87:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Fresh Vanilla & Cadet
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
#050915
#314E53
#5C9188
#D1F0AB
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#050915 on #D1F0AB | Aa | 15.87:1 | AAA |
#314E53 on #D1F0AB | Aa | 7.15:1 | AAA |
#050915 on #5C9188 | Aa | 5.55:1 | AA |
#5C9188 on #D1F0AB | Aa | 2.86:1 | Fail |
#314E53 on #5C9188 | Aa | 2.5:1 | Fail |
#050915 on #314E53 | Aa | 2.22:1 | Fail |
Similar palettes 24 more in this mood
#0F1421
#424A66
#6A7B94
#AEF3E6
#010710
#435163
#FFBB59
#E7EBF1
#111823
#3F506C
#81BBFF
#FFFAE9
#03080E
#2B3B55
#425B7D
#E9C983
#03071E
#0B525B
#1B998B
#C2F970
#000814
#1B3A69
#2A5A99
#FFC300
#0B132B
#3B487A
#5C7BA8
#6FFFE9
#0A1024
#3A456B
#5C7CFA
#DDE3FF
#775249
#872870
#850039
#120115
#050A14
#264158
#00ACF4
#FFDEAA
#121016
#54149C
#693B79
#5B9FFF
#0B0620
#412676
#9D4EDD
#FFB3E6
#050A14
#2E3F5A
#4FA3FF
#FFE27A
#12041B
#551C66
#BD3DB7
#FFB8CA
#A882C7
#AE495D
#834470
#1A161F
#0E1427
#676E78
#C5BE00
#E6E7E9
#F1F4FF
#B3E100
#717A9E
#0D101E
#020B25
#27446D
#C2AE91
#E3E0DB
#05070B
#00576A
#576E84
#00B579
#08051D
#174F63
#04979E
#9DFFA1
#FFAEA7
#1E1913
#6E5A48
#EEEEEE
#006F5B
#F4EDE4
#D9C2AD
#1A1A1A
#D8D1C6
#BEB19C
#233E64
#000A1E