#116A7B
#CDC2AE
#ECE5C7
#C2DEDC
#7E8180Gray
#8FCCD4Sky Blue
#D0F7F9Ice
#FFEDC1Peach
Cheerful Sky Blue & Peach is a pastel light, complementary color palette tagged vintage, muted. Near-complementary hues (about 144° apart) make this a high-contrast, attention-grabbing combination. High lightness and gentle saturation put it firmly in pastel territory. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Gray | #7E8180 | rgb(126, 129, 128) | hsl(160, 1%, 50%) | oklch(60.0% 0.004 174) | |
| Sky Blue | #8FCCD4 | rgb(143, 204, 212) | hsl(187, 45%, 70%) | oklch(80.7% 0.063 206) | |
| Ice | #D0F7F9 | rgb(208, 247, 249) | hsl(183, 77%, 90%) | oklch(94.9% 0.040 200) | |
| Peach | #FFEDC1 | rgb(255, 237, 193) | hsl(43, 100%, 88%) | oklch(95.0% 0.060 88) |
Why it works and how to use it
It works because the lightness steps are gentle (50% to 90%), which keeps the mood consistent from edge to edge. Try it for social media templates and gentle interfaces.
- Background: Ice (#D0F7F9) is the lightest color, so it belongs on large surfaces.
- Text: Gray (#7E8180) on #D0F7F9 gives 3.44:1, enough for large headings only.
- Primary: Peach (#FFEDC1) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Sky Blue (#8FCCD4) 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 Cheerful Sky Blue & Peach
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
#7E8180
#8FCCD4
#D0F7F9
#FFEDC1
Color-blind check: under protanopia and deuteranopia, Ice and Peach 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 |
|---|---|---|---|
#7E8180 on #D0F7F9 | Aa | 3.44:1 | AA large only |
#7E8180 on #FFEDC1 | Aa | 3.4:1 | AA large only |
#7E8180 on #8FCCD4 | Aa | 2.2:1 | Fail |
#8FCCD4 on #D0F7F9 | Aa | 1.56:1 | Fail |
#8FCCD4 on #FFEDC1 | Aa | 1.54:1 | Fail |
#D0F7F9 on #FFEDC1 | Aa | 1.01:1 | Fail |
Similar palettes 24 more in this mood
#3D405B
#81B29A
#F2CC8F
#F4F1DE
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#22223B
#595D79
#9A8C98
#F2E9E4
#4B3832
#854442
#BE9B7B
#FFF4E6
#B76E79
#E8A0A6
#F4C8C8
#FDF2F0
#A88577
#E4C1AB
#FFEFD7
#719080
#4A5D7E
#7F92B0
#D8D2C4
#F1EDE4
#8C6A5D
#C6A48E
#E9D8C0
#5C7A6B
#6B6F4A
#9C9E74
#D9CFAF
#F3EEE2
#7A5C4A
#B08F73
#E3CDB0
#F8F1E6
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#5A5934
#776D5C
#BE957B
#DFACA6
#725352
#41676A
#B6787B
#8EC3CE
#A694D2
#BF768E
#6879A2
#724370
#5C302C
#AD9878
#86624B
#F5E7C6
#585881
#4F748D
#B69ED1
#8FB2F0
#A1CC93
#AAA9C7
#BA955A
#7C7A95
#645762
#777F9B
#888D72
#A0A793
#875659
#AD8A8C
#839AB9
#95A78C
#C898D0
#7DA693
#636144
#664C73
#A17669
#B1809F
#BE8A57
#EEA1AD
#626442
#57879F
#B5889C
#9BB2C2
#475C4E
#BEA5CC
#CCC49F
#CDC3D7