← Back to Editor

#9DD3B0 · #D6E0B2 · #FCE1B0 · #FCC4A5 · #FC999D

summer

A 5-color summer palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#9DD3B0

Celadon · DarkSeaGreen · Apple Green

HEX
#9DD3B0
RGB
rgb(157, 211, 176)
HSL
hsl(141, 38%, 72%)
HSB
hsb(141, 26%, 83%)
CMYK
cmyk(26%, 0%, 17%, 17%)
Oklch
oklch(82.0% 0.074 156.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#D6E0B2

Willow Green · Wheat · Apple Green

HEX
#D6E0B2
RGB
rgb(214, 224, 178)
HSL
hsl(73, 43%, 79%)
HSB
hsb(73, 21%, 88%)
CMYK
cmyk(4%, 0%, 21%, 12%)
Oklch
oklch(88.7% 0.062 117.6)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#FCE1B0

Goose Yellow · Wheat · Peach Orange

HEX
#FCE1B0
RGB
rgb(252, 225, 176)
HSL
hsl(39, 93%, 84%)
HSB
hsb(39, 30%, 99%)
CMYK
cmyk(0%, 11%, 30%, 1%)
Oklch
oklch(92.0% 0.070 82.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FCC4A5

Apricot · Wheat · Peach Orange

HEX
#FCC4A5
RGB
rgb(252, 196, 165)
HSL
hsl(21, 94%, 82%)
HSB
hsb(21, 35%, 99%)
CMYK
cmyk(0%, 22%, 35%, 1%)
Oklch
oklch(86.3% 0.077 50.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FC999D

Peach Pink · LightSalmon · Coral Red

HEX
#FC999D
RGB
rgb(252, 153, 157)
HSL
hsl(358, 94%, 79%)
HSB
hsb(358, 39%, 99%)
CMYK
cmyk(0%, 39%, 38%, 1%)
Oklch
oklch(78.6% 0.119 17.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DD3B0
D39CC0

Analogous

A5D39C
9DD3B0
9CD3CB

Triadic

9DD3B0
AF9CD3
D3AF9C

Split-Comp.

9DD3B0
CB9CD3
D39CA5

Tetradic

9DD3B0
9CA5D3
D39CC0
D3CB9C

Contrast Matrix WCAG 2.1 Contrast

9DD3B0
D6E0B2
FCE1B0
FCC4A5
FC999D
—
1.2
Fail
1.3
Fail
1.1
Fail
1.2
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
1.3
Fail
1.2
Fail
1.5
Fail
1.6
Fail
1.3
Fail
—
White BG
1.7Fail
1.4Fail
1.3Fail
1.5Fail
2.1Fail
Black BG
12.4AAA
15.2AAA
16.5AAA
13.6AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B5B8
DADABD
F0F0BC
E4E3AD
D1D09C

Deuteranopia

B1ADBB
DAD9C0
F2F4BF
E7EBAE
D7DE9C

Tritanopia

A0BFC1
D6C6C8
FBC5C7
F9B2B4
F79B9B

Achromatopsia

BFBFBF
D8D8D8
E3E3E3
D1D1D1
B7B7B7

Shades & Tints Shades & Tints

#9DD3B0

Dark
Light

#D6E0B2

Dark
Light

#FCE1B0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9dd3b0;
  --color-2: #d6e0b2;
  --color-3: #fce1b0;
  --color-4: #fcc4a5;
  --color-5: #fc999d;
}

SCSS

$color-1: #9dd3b0;
$color-2: #d6e0b2;
$color-3: #fce1b0;
$color-4: #fcc4a5;
$color-5: #fc999d;

TAILWIND

colors: {
  'brand-1': '#9dd3b0',
  'brand-2': '#d6e0b2',
  'brand-3': '#fce1b0',
  'brand-4': '#fcc4a5',
  'brand-5': '#fc999d',
}

RGB Array

[157, 211, 176], [214, 224, 178], [252, 225, 176], [252, 196, 165], [252, 153, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #9DD3B0, #D6E0B2, #FCE1B0, #FCC4A5, #FC999D is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9dd3b0; --color-2: #d6e0b2; --color-3: #fce1b0; --color-4: #fcc4a5; --color-5: #fc999d. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This summer-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color