#F1EFE7
#D9D4C7
#8C8A82
#2F2F2F
#ECE8F1Lavender
#C6BDD8Lavender Gray
#8B83AASlate
#2F2C3BGunmetal
Slate & Lavender Gray Drift color palette
Slate & Lavender Gray Drift is a muted monochromatic color palette tagged 2026 trends, muted, minimal. A monochromatic set: the same hue family from Gunmetal down to Lavender. Saturation stays low across the board, giving it a calm, editorial feel. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Lavender | #ECE8F1 | rgb(236, 232, 241) | hsl(267, 24%, 93%) | oklch(93.7% 0.013 306) | |
| Lavender Gray | #C6BDD8 | rgb(198, 189, 216) | hsl(260, 26%, 79%) | oklch(81.4% 0.039 301) | |
| Slate | #8B83AA | rgb(139, 131, 170) | hsl(252, 19%, 59%) | oklch(63.1% 0.059 294) | |
| Gunmetal | #2F2C3B | rgb(47, 44, 59) | hsl(252, 15%, 20%) | oklch(30.3% 0.027 294) |
Why it works and how to use it
It works because the lightness range is wide (20% to 93%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Lavender (#ECE8F1) is the lightest color, so it belongs on large surfaces.
- Text: Gunmetal (#2F2C3B) on #ECE8F1 gives 11.25:1, passing WCAG AAA.
- Primary: Lavender Gray (#C6BDD8) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Slate (#8B83AA) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Lavender on Gunmetal at 11.25:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Slate & Lavender Gray Drift
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
#ECE8F1
#C6BDD8
#8B83AA
#2F2C3B
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#ECE8F1 on #2F2C3B | Aa | 11.25:1 | AAA |
#C6BDD8 on #2F2C3B | Aa | 7.56:1 | AAA |
#8B83AA on #2F2C3B | Aa | 3.84:1 | AA large only |
#ECE8F1 on #8B83AA | Aa | 2.93:1 | Fail |
#C6BDD8 on #8B83AA | Aa | 1.97:1 | Fail |
#ECE8F1 on #C6BDD8 | Aa | 1.49:1 | Fail |
Similar palettes 24 more in this mood
#A47864
#C9A58B
#E8D9CB
#F7F3EE
#FFEDD9
#FFCE9E
#927B66
#3B3A36
#1E1B18
#6B5D4F
#C9B79C
#F4EFE6
#0B0F0E
#3A4642
#BEF62F
#F3FFE0
#2B2A28
#8D8780
#D8D2C8
#F5F2ED
#ECE7E4
#00A0AE
#5F4F44
#302823
#2C2230
#836D8A
#FFC872
#F4EDF6
#211F23
#646067
#FFA410
#DFDEE0
#E5E2FF
#ADA8D2
#6A6C87
#3D3C5E
#F3F5F4
#AD6FDD
#4E5A58
#0F1212
#292830
#6F6D83
#DBDB00
#E0DFE5
#0C0F0E
#3E4542
#CDED95
#F6FDEC
#F1EFE7
#DAD7CD
#0F6E6B
#2B2B2B
#A47864
#E9D8C6
#FFE9A8
#3E322B
#373A39
#6F7774
#DAFE9C
#EBF2DF
#92433E
#F1EDE9
#D1C4B9
#1A1A1A
#363330
#7F7163
#E0CDB2
#FFF9F0
#0F5C63
#2A8A8C
#9FD3CF
#F2F1EA
#FFF1B8
#F5D67A
#8A7F63
#3B3A36
#7E9A8B
#B7C9BC
#D2DDD4
#F4F2EA
#D9A48F
#EFC8B8
#F7E6DC
#FFFAF6
#7D93A8
#B3C3D1
#E3E9EE
#FBF8F3
#456A6B
#C38B7B
#E4CFAF
#F2F1E6