#B76E79
#E8A0A6
#F4C8C8
#FDF2F0
#F5DCE8Petal
#E7BCD3Thistle
#D198B7Lilac
#AE7497Mocha
Mocha & Lilac Sky is a pastel light, monochromatic color palette tagged muted, warm, romantic. All four colors sit within 7° of hue, so the scheme reads as one color explored across light and dark. The colors are light and airy, which suits friendly, soft-spoken brands. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Petal | #F5DCE8 | rgb(245, 220, 232) | hsl(331, 56%, 91%) | oklch(91.8% 0.032 347) | |
| Thistle | #E7BCD3 | rgb(231, 188, 211) | hsl(328, 47%, 82%) | oklch(84.0% 0.058 345) | |
| Lilac | #D198B7 | rgb(209, 152, 183) | hsl(327, 38%, 71%) | oklch(74.3% 0.079 345) | |
| Mocha | #AE7497 | rgb(174, 116, 151) | hsl(324, 26%, 57%) | oklch(63.0% 0.086 343) |
Why it works and how to use it
The palette holds together thanks to its monochromatic hue relationship and a soft light-to-dark ladder (91% down to 57% lightness). A natural fit for social media templates and gentle interfaces.
- Background: Petal (#F5DCE8) is the lightest color, so it belongs on large surfaces.
- Text: Mocha (#AE7497) on #F5DCE8 gives 2.83:1, so pair it with a darker neutral for body copy.
- Primary: Thistle (#E7BCD3) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Lilac (#D198B7) 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 Mocha & Lilac Sky
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
#F5DCE8
#E7BCD3
#D198B7
#AE7497
Color-blind check: under deuteranopia, Petal and Thistle 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 |
|---|---|---|---|
#F5DCE8 on #AE7497 | Aa | 2.83:1 | Fail |
#E7BCD3 on #AE7497 | Aa | 2.18:1 | Fail |
#F5DCE8 on #D198B7 | Aa | 1.83:1 | Fail |
#D198B7 on #AE7497 | Aa | 1.55:1 | Fail |
#E7BCD3 on #D198B7 | Aa | 1.41:1 | Fail |
#F5DCE8 on #E7BCD3 | Aa | 1.3:1 | Fail |
Similar palettes 24 more in this mood
#F7E9DF
#FFC8D4
#E9AFD8
#C29991
#C5988F
#EEA4B6
#EAB287
#E4D2AA
#FDB2B2
#C0D9BA
#FFD0D0
#CCE0FF
#C2A167
#D292A5
#D9B2AD
#FFEDE2
#FFF8F7
#FFD6CD
#FAB9AB
#CD8A7D
#CC9CA3
#F4CAC7
#AD7D8A
#F7F1E8
#99535E
#CB858B
#D5AAAB
#E5DBD9
#F7C0D0
#E3A0B9
#C582A0
#9D637F
#9B837C
#CDA095
#FAB8AA
#FFDAD3
#FFF0F5
#FFB3D4
#D7919C
#9A8C91
#C6938B
#D8C99A
#FAB3CA
#FFE9D7
#EEAFE0
#FFD1CB
#FFF8F1
#FFEEAC
#A47864
#C9A58B
#E8D9CB
#F7F3EE
#F8C4B1
#E7A390
#CB8575
#A3655A
#CB9F99
#D5C4B9
#FFC6D9
#FFEABB
#B08968
#DDB892
#E6CCB2
#FFF6EA
#7F5539
#B08968
#DDB892
#EDE0D4
#F8DDD6
#EDBEB3
#D99A8C
#B77569
#4B3832
#854442
#BE9B7B
#FFF4E6
#A68A64
#C2B280
#E6DCC3
#FAF7F0
#C9A66B
#E4C590
#F1E3C8
#F9F5EC
#3F2E1E
#7C5E3C
#C8A97E
#F1E7D6
#FFF4F6
#FFC9D6
#FFE7A8
#7A5C6B