#FF9A8B
#FFB4A2
#FFCDB2
#FFF1E6
#D88189Terracotta
#E09FA6Dusty Rose
#D4EAD8Ice
#5A7C69Dove Gray
Terracotta & Dusty Rose Tale is a complementary color palette tagged summer, warm, romantic. Terracotta and Ice sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Terracotta | #D88189 | rgb(216, 129, 137) | hsl(354, 53%, 68%) | oklch(69.8% 0.108 14) | |
| Dusty Rose | #E09FA6 | rgb(224, 159, 166) | hsl(354, 51%, 75%) | oklch(76.7% 0.078 12) | |
| Ice | #D4EAD8 | rgb(212, 234, 216) | hsl(131, 34%, 87%) | oklch(91.6% 0.034 151) | |
| Dove Gray | #5A7C69 | rgb(90, 124, 105) | hsl(146, 16%, 42%) | oklch(55.5% 0.049 160) |
Why it works and how to use it
It works because the lightness range is wide (42% to 87%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Ice (#D4EAD8) is the lightest color, so it belongs on large surfaces.
- Text: Dove Gray (#5A7C69) on #D4EAD8 gives 3.66:1, enough for large headings only.
- Primary: Terracotta (#D88189) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Dusty Rose (#E09FA6) 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 Terracotta & Dusty Rose Tale
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
#D88189
#E09FA6
#D4EAD8
#5A7C69
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#D4EAD8 on #5A7C69 | Aa | 3.66:1 | AA large only |
#D88189 on #D4EAD8 | Aa | 2.23:1 | Fail |
#E09FA6 on #5A7C69 | Aa | 2.14:1 | Fail |
#E09FA6 on #D4EAD8 | Aa | 1.71:1 | Fail |
#D88189 on #5A7C69 | Aa | 1.64:1 | Fail |
#D88189 on #E09FA6 | Aa | 1.3:1 | Fail |
Similar palettes 24 more in this mood
#F1215C
#E0684D
#D29000
#FFD2B5
#F8BDFF
#FF9792
#FF9952
#FC6FB2
#F23F86
#F8676A
#FFC088
#B3B453
#F0562F
#FF8397
#FFB67C
#FFD88E
#F1DF65
#FFC5C5
#F2A100
#D15800
#F95E99
#FA8AB3
#D1EDC6
#4F8153
#FFB8B2
#FF8931
#F66BA7
#B68300
#F94144
#F3722C
#F9C74F
#90BE6D
#FF5E78
#FF8A9B
#C7EFCF
#3D8361
#FF8C42
#FFB347
#FFD166
#FFF1CC
#E16700
#D98900
#D5D65B
#67C48E
#DA8331
#FF9F86
#FFD278
#FFD0D5
#A24002
#CD6635
#00B474
#DCF1E4
#FF4D6D
#FFB3C1
#7BC96F
#2D6A4F
#B9A718
#FF8F59
#B2DC82
#FFC87F
#B96D00
#D39E00
#FF864F
#D2C600
#F19808
#EABF3D
#E6DC6B
#F5F5CE
#FFBCC0
#FFE8EB
#CDFCC5
#789A88
#FF8C98
#FFABB5
#EFFFF2
#599F7B
#FF8969
#FFB074
#FFCE92
#FFEFDA
#F54D00
#E77E00
#E7D052
#7AC27F
#FF7B8A
#FFD5DC
#95E589
#468266
#0077B6
#00B4D8
#90E0EF
#CAF0F8