#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#393A55Charcoal
#6C708DSlate
#B9ABB7Heather
#FFF9F5Snow
Nostalgic Charcoal & Slate is a neutral-based color palette tagged muted, vintage, minimal. Snow is the only saturated color here, so it does all the talking against a neutral base. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Charcoal | #393A55 | rgb(57, 58, 85) | hsl(238, 20%, 28%) | oklch(36.0% 0.047 282) | |
| Slate | #6C708D | rgb(108, 112, 141) | hsl(233, 13%, 49%) | oklch(55.3% 0.045 279) | |
| Heather | #B9ABB7 | rgb(185, 171, 183) | hsl(309, 9%, 70%) | oklch(75.7% 0.023 330) | |
| Snow | #FFF9F5 | rgb(255, 249, 245) | hsl(24, 100%, 98%) | oklch(98.6% 0.008 56) |
Why it works and how to use it
It works because the lightness range is wide (28% to 98%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Snow (#FFF9F5) is the lightest color, so it belongs on large surfaces.
- Text: Charcoal (#393A55) on #FFF9F5 gives 10.53:1, passing WCAG AAA.
- Primary: Slate (#6C708D) is the most saturated mid-tone; use it for buttons and links (4.64:1 against the background, fine for UI elements).
- Accent: Heather (#B9ABB7) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Snow at 10.53:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Nostalgic Charcoal & Slate
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
#393A55
#6C708D
#B9ABB7
#FFF9F5
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#393A55 on #FFF9F5 | Aa | 10.53:1 | AAA |
#393A55 on #B9ABB7 | Aa | 5.01:1 | AA |
#6C708D on #FFF9F5 | Aa | 4.64:1 | AA |
#393A55 on #6C708D | Aa | 2.27:1 | Fail |
#6C708D on #B9ABB7 | Aa | 2.21:1 | Fail |
#B9ABB7 on #FFF9F5 | Aa | 2.1:1 | Fail |
Similar palettes 24 more in this mood
#3C5148
#7A9B76
#C8D5B9
#F6F5EE
#3E2723
#6D4C41
#A1887F
#EFEBE9
#F7F1F1
#E5CFCF
#C48B8B
#4A3535
#4B3832
#854442
#BE9B7B
#FFF4E6
#F7FBFF
#D5E2ED
#ADCAE3
#2C4A66
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#5B4B5E
#8A7A8C
#C9BEC6
#F2EEF0
#2C3A2F
#5B7553
#B7C4A8
#F3F1EA
#FBF7EF
#EAD9B8
#C9A961
#3A3226
#142532
#528494
#DE9D89
#FAF4E9
#F9EDEA
#E8C4B8
#B76E79
#4A3F3C
#1D1900
#B0BEB3
#D5EBBA
#FFF2E0
#0F3D3E
#1E6F6F
#C8B89A
#F3EFE7
#3E4551
#677287
#EDF3FE
#FFE2A8
#1E3033
#456578
#98BD9B
#F4FFE6
#3B4A3E
#728C69
#D3E0C3
#FCFAF3
#624E4E
#9A7977
#E8BFBA
#FFF8F7
#524037
#8E6C5A
#ADF2DF
#FDF9F4
#433D37
#AE9E8D
#FFD0C3
#FFEEE7
#F5FBF9
#D4E3DE
#374B00
#0A1100
#4E5856
#9FC9C2
#A3EDE3
#DBFFFA
#F0F6FF
#A7C9FA
#6C5A3F
#262320
#BBA77C
#CFC2A5
#898A78
#F0EEE6