#D2A9C7
#90C7F5
#D8C5EE
#EDF0FF
#DFB8FAMauve
#B1E7E9Powder Blue
#AEBEE7Lavender Gray
#FDFDFDWhite
Mauve & Lavender Gray Mist is a pastel light, split color palette tagged pastel, light, muted. The hues span about 93°, enough contrast to create a focal point without the harshness of true complements. The colors are light and airy, which suits friendly, soft-spoken brands. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Mauve | #DFB8FA | rgb(223, 184, 250) | hsl(275, 87%, 85%) | oklch(83.9% 0.099 311) | |
| Powder Blue | #B1E7E9 | rgb(177, 231, 233) | hsl(182, 56%, 80%) | oklch(89.2% 0.055 199) | |
| Lavender Gray | #AEBEE7 | rgb(174, 190, 231) | hsl(223, 54%, 79%) | oklch(80.3% 0.061 268) | |
| White | #FDFDFD | rgb(253, 253, 253) | hsl(0, 0%, 99%) | oklch(99.4% 0.000 0) |
Why it works and how to use it
With 3 chromatic colors, Mauve takes the lead while the rest support. Lightness runs from 79% to 99%. Well suited to social media templates and gentle interfaces.
- Background: White (#FDFDFD) is the lightest color, so it belongs on large surfaces.
- Text: Lavender Gray (#AEBEE7) on #FDFDFD gives 1.82:1, so pair it with a darker neutral for body copy.
- Primary: Mauve (#DFB8FA) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Powder Blue (#B1E7E9) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Mauve & Lavender Gray Mist
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
#DFB8FA
#B1E7E9
#AEBEE7
#FDFDFD
Color-blind check: under deuteranopia, Mauve and Powder Blue become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#AEBEE7 on #FDFDFD | Aa | 1.82:1 | Fail |
#DFB8FA on #FDFDFD | Aa | 1.67:1 | Fail |
#B1E7E9 on #AEBEE7 | Aa | 1.37:1 | Fail |
#B1E7E9 on #FDFDFD | Aa | 1.33:1 | Fail |
#DFB8FA on #B1E7E9 | Aa | 1.25:1 | Fail |
#DFB8FA on #AEBEE7 | Aa | 1.09:1 | Fail |
Similar palettes 24 more in this mood
#A0DCA3
#BDE0FE
#CDB4DB
#FDFDFD
#DCABC0
#BCB5F1
#FFC0BD
#F7ECF9
#FFAFCC
#BDE0FE
#CDB4DB
#FFFFFF
#E7EAFF
#D8C7FF
#DCACDB
#C3A9B3
#D9A48F
#EFC8B8
#F7E6DC
#FFFAF6
#CDB4DB
#FFC8DD
#FFAFCC
#BDE0FE
#9FA9FF
#C8AEFF
#F0BFEF
#FFE3EE
#F7E9DF
#FFC8D4
#E9AFD8
#C29991
#FFDAD8
#CFD39A
#97D3D7
#C4BCF6
#CEBCEE
#94E5DD
#EFDEFF
#FFE1C1
#AABBF3
#D4B9CE
#DFCBFF
#CEE8FC
#C8A9B3
#C5B6EC
#FECDFC
#E2EBFF
#FF9AC0
#91C4EE
#D2ADE6
#FDFDFD
#C1D7C4
#BBF0F9
#E5F1BF
#F0FBF8
#DBE1FF
#A1D0FC
#EAAFDB
#B9A0D5
#D2C6AC
#FFC6DB
#FFCFAF
#FFE5E2
#EEEFFF
#FFD0E9
#B4D8FF
#D1BEDB
#A19DB1
#E2A5CD
#E8C6F3
#E6EBFF
#B7ABC3
#F4BDE1
#CDD4FC
#E1F0FF
#97A4C6
#BEB3F2
#DBBBCF
#F6DFFF
#DD9F6E
#EDD693
#9DBE7C
#FDFDFD
#E79EE3
#FFC9CF
#D5D491
#FFF9F2
#EEAFE0
#FFD1CB
#FFF8F1
#FFEEAC