#E5E0DA
#CF63FF
#564733
#140E05
#F0F0F0Frost
#7454DDSlate Blue
#574F44Umber
#0E0E0EObsidian
Slate Blue & Umber Echo is a muted neutral-based color palette tagged luxury, dark, minimal. Slate Blue is the only saturated color here, so it does all the talking against a neutral base. Every color is softened, so it works well as a background system for text-heavy layouts.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Frost | #F0F0F0 | rgb(240, 240, 240) | hsl(0, 0%, 94%) | oklch(95.5% 0.000 0) | |
| Slate Blue | #7454DD | rgb(116, 84, 221) | hsl(254, 67%, 60%) | oklch(55.4% 0.199 289) | |
| Umber | #574F44 | rgb(87, 79, 68) | hsl(35, 12%, 30%) | oklch(43.2% 0.021 76) | |
| Obsidian | #0E0E0E | rgb(14, 14, 14) | hsl(0, 0%, 5%) | oklch(16.4% 0.000 0) |
Why it works and how to use it
It works because the lightness range is wide (5% to 94%), which gives clear hierarchy between background, content and accents. Try it for premium branding and packaging.
- Background: Frost (#F0F0F0) is the lightest color, so it belongs on large surfaces.
- Text: Obsidian (#0E0E0E) on #F0F0F0 gives 16.94:1, passing WCAG AAA.
- Primary: Slate Blue (#7454DD) is the most saturated mid-tone; use it for buttons and links (4.54:1 against the background, fine for UI elements).
- Accent: Umber (#574F44) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Frost on Obsidian at 16.94:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Slate Blue & Umber Echo
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
#F0F0F0
#7454DD
#574F44
#0E0E0E
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#F0F0F0 on #0E0E0E | Aa | 16.94:1 | AAA |
#F0F0F0 on #574F44 | Aa | 7.07:1 | AAA |
#F0F0F0 on #7454DD | Aa | 4.54:1 | AA |
#7454DD on #0E0E0E | Aa | 3.73:1 | AA large only |
#574F44 on #0E0E0E | Aa | 2.4:1 | Fail |
#7454DD on #574F44 | Aa | 1.56:1 | Fail |
Similar palettes 24 more in this mood
#EFEFEF
#A22DE0
#6A5F52
#222221
#13111A
#4B4659
#8B7ECC
#EDEBF7
#000000
#3A3A3A
#D4AF37
#F2F2F2
#14101F
#4D4365
#8E6BFF
#EEE9FF
#0F1419
#3E4C59
#D9B99B
#F3EFE9
#F2EEE8
#8064F0
#89795F
#2A241B
#180201
#514949
#208C00
#DEDEDE
#302D26
#776C54
#C448CD
#F6F4EF
#0B0B0B
#3F3F3F
#C9A961
#F7F4EC
#2C2B23
#676347
#7C7BFF
#F2F1EC
#EEEDF1
#E58600
#716C78
#200F28
#0E0E0E
#434343
#F5B7C4
#FFF7F9
#030303
#4A4A4A
#ECC753
#FAFAFA
#1E1B18
#6B5D4F
#C9B79C
#F4EFE6
#000000
#3B3B3B
#EEE4CF
#FFFDF8
#1C1509
#FFCA62
#E0D5C0
#F9F4EC
#E1E0DF
#2D67EC
#756D5D
#0D0C0A
#110722
#747A9D
#FFA42D
#DDDFEA
#1C1616
#8A6E6C
#24C43D
#F1ECEC
#ECE7E0
#3376E0
#5C513F
#181107
#1B1F2A
#6B7388
#2CB857
#EEF1F9
#E8E3DC
#0092BE
#716757
#140E05
#FCF0F2
#99717A
#008F4E
#302024