#D9A48F
#EFC8B8
#F7E6DC
#FFFAF6
#D5F8EFIce
#E7BDB6Baby Pink
#FFCC7DApricot
#A49B91Pewter
Cloud Apricot & Baby Pink color palette
Cloud Apricot & Baby Pink is a pastel light, complementary color palette tagged pastel. Ice and Apricot sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. The colors are light and airy, which suits friendly, soft-spoken brands. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Ice | #D5F8EF | rgb(213, 248, 239) | hsl(165, 71%, 90%) | oklch(95.2% 0.038 178) | |
| Baby Pink | #E7BDB6 | rgb(231, 189, 182) | hsl(9, 51%, 81%) | oklch(83.3% 0.050 29) | |
| Apricot | #FFCC7D | rgb(255, 204, 125) | hsl(36, 100%, 75%) | oklch(87.4% 0.113 77) | |
| Pewter | #A49B91 | rgb(164, 155, 145) | hsl(32, 9%, 61%) | oklch(69.4% 0.018 70) |
Why it works and how to use it
With 3 chromatic colors, Apricot takes the lead while the rest support. Lightness runs from 61% to 90%. Well suited to social media templates and gentle interfaces.
- Background: Ice (#D5F8EF) is the lightest color, so it belongs on large surfaces.
- Text: Pewter (#A49B91) on #D5F8EF gives 2.41:1, so pair it with a darker neutral for body copy.
- Primary: Apricot (#FFCC7D) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Baby Pink (#E7BDB6) 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 Cloud Apricot & Baby Pink
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
#D5F8EF
#E7BDB6
#FFCC7D
#A49B91
Color-blind check: under tritanopia, Baby Pink and Apricot 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 |
|---|---|---|---|
#D5F8EF on #A49B91 | Aa | 2.41:1 | Fail |
#FFCC7D on #A49B91 | Aa | 1.85:1 | Fail |
#E7BDB6 on #A49B91 | Aa | 1.61:1 | Fail |
#D5F8EF on #E7BDB6 | Aa | 1.5:1 | Fail |
#D5F8EF on #FFCC7D | Aa | 1.3:1 | Fail |
#E7BDB6 on #FFCC7D | Aa | 1.15:1 | Fail |
Similar palettes 24 more in this mood
#FF9A8B
#FFB4A2
#FFCDB2
#FFF1E6
#CDB4DB
#FFC8DD
#FFAFCC
#BDE0FE
#FFADAD
#FFD6A5
#FDFFB6
#CAFFBF
#84A59D
#F5CAC3
#F6BD60
#F7EDE2
#9FA9FF
#C8AEFF
#F0BFEF
#FFE3EE
#FFBE98
#F9A98D
#F8D5C2
#FFF4EC
#FFAFCC
#FFC8DD
#BDE0FE
#A2D2FF
#FFA891
#F7C6B5
#FBEDE7
#F0BC7A
#C9A66B
#E4C590
#F1E3C8
#F9F5EC
#D98C6B
#EFC1A2
#B5A78F
#F8F2EA
#FFD6EB
#C2DCFF
#EDD0A7
#A3D0BC
#FFE9EC
#E9C5B9
#D4BFF1
#C293B7
#5AA2D9
#8BB1FF
#00CED9
#5ED8FF
#E2A7B5
#BACB92
#C9E7FF
#FFD9E2
#B8AA6D
#96C6AC
#CBD89D
#DDF5D8
#DFB8FA
#B1E7E9
#AEBEE7
#FDFDFD
#FFABA9
#CFCAF3
#E2E69B
#93F9FF
#DCABC0
#BCB5F1
#FFC0BD
#F7ECF9
#FFAFCC
#BDE0FE
#CDB4DB
#FFFFFF
#F7E9DF
#FFC8D4
#E9AFD8
#C29991
#FFE0F1
#FFE1BB
#B0D4FD
#96D9B8
#F4F1DE
#F2CC8F
#81B29A
#E07A5F
#FFFDF7
#FFDFDA
#DDAF7C
#AF93D7