← Back to Editor

#DDFFC9 · #F2D4B1 · #F2B2A5 · #D96A8A · #383838

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#DDFFC9

Emerald · Beige · Mint Green

HEX
#DDFFC9
RGB
rgb(221, 255, 201)
HSL
hsl(98, 100%, 89%)
HSB
hsb(98, 21%, 100%)
CMYK
cmyk(13%, 0%, 21%, 0%)
Oklch
oklch(96.2% 0.079 134.0)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#F2D4B1

Goose Yellow · Wheat · Peach Orange

HEX
#F2D4B1
RGB
rgb(242, 212, 177)
HSL
hsl(32, 71%, 82%)
HSB
hsb(32, 27%, 95%)
CMYK
cmyk(0%, 12%, 27%, 5%)
Oklch
oklch(88.6% 0.057 71.3)

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

#F2B2A5

Peach Pink · LightPink · Coral Red

HEX
#F2B2A5
RGB
rgb(242, 178, 165)
HSL
hsl(10, 75%, 80%)
HSB
hsb(10, 32%, 95%)
CMYK
cmyk(0%, 26%, 32%, 5%)
Oklch
oklch(82.0% 0.078 31.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D96A8A

Rouge · LightCoral · Rose Pink

HEX
#D96A8A
RGB
rgb(217, 106, 138)
HSL
hsl(343, 59%, 63%)
HSB
hsb(343, 51%, 85%)
CMYK
cmyk(0%, 51%, 36%, 15%)
Oklch
oklch(66.4% 0.142 3.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#383838

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#383838
RGB
rgb(56, 56, 56)
HSL
hsl(0, 0%, 22%)
HSB
hsb(0, 0%, 22%)
CMYK
cmyk(0%, 0%, 0%, 78%)
Oklch
oklch(34.1% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDFFC9
EAC7FF

Analogous

F8FFC7
DDFFC9
C7FFCE

Triadic

DDFFC9
C7DBFF
FFC7DB

Split-Comp.

DDFFC9
CEC7FF
FFC7F8

Tetradic

DDFFC9
C7F8FF
EAC7FF
FFCEC7

Contrast Matrix WCAG 2.1 Contrast

DDFFC9
F2D4B1
F2B2A5
D96A8A
383838
—
1.3
Fail
1.6
Fail
3.0
AA Large
10.7
AAA
1.3
Fail
—
1.3
Fail
2.3
Fail
8.3
AAA
1.6
Fail
1.3
Fail
—
1.8
Fail
6.5
AA
3.0
AA Large
2.3
Fail
1.8
Fail
—
3.6
AA Large
10.7
AAA
8.3
AAA
6.5
AA
3.6
AA Large
—
White BG
1.1Fail
1.4Fail
1.8Fail
3.3AA Large
11.7AAA
Black BG
19.2AAA
14.8AAA
11.7AAA
6.4AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECD6
E5E5B9
D6D6A8
A9A882
383838

Deuteranopia

EAE7D9
E7E9BC
DADFA9
AFB880
383838

Tritanopia

DFE0E3
F0C0C2
EFABAB
D37C7B
383838

Achromatopsia

EFEFEF
D9D9D9
C4C4C4
8F8F8F
383838

Shades & Tints Shades & Tints

#DDFFC9

Dark
Light

#F2D4B1

Dark
Light

#F2B2A5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ddffc9;
  --color-2: #f2d4b1;
  --color-3: #f2b2a5;
  --color-4: #d96a8a;
  --color-5: #383838;
}

SCSS

$color-1: #ddffc9;
$color-2: #f2d4b1;
$color-3: #f2b2a5;
$color-4: #d96a8a;
$color-5: #383838;

TAILWIND

colors: {
  'brand-1': '#ddffc9',
  'brand-2': '#f2d4b1',
  'brand-3': '#f2b2a5',
  'brand-4': '#d96a8a',
  'brand-5': '#383838',
}

RGB Array

[221, 255, 201], [242, 212, 177], [242, 178, 165], [217, 106, 138], [56, 56, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDFFC9, #F2D4B1, #F2B2A5, #D96A8A, #383838 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #ddffc9; --color-2: #f2d4b1; --color-3: #f2b2a5; --color-4: #d96a8a; --color-5: #383838. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 general-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