#DDE0D1 + #E9BDA3 + #F08484 + #CC5A71 + #AB4162 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DDE0D1

Willow Green · LightGray · Mint Green

HEX

#DDE0D1

RGB

rgb(221, 224, 209)

HSL

hsl(72, 19%, 85%)

HSB

hsb(72, 7%, 88%)

CMYK

cmyk(1%, 0%, 7%, 12%)

Oklch

oklch(90.0% 0.020 116.0)

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

#E9BDA3

Apricot · BurlyWood · Peach Orange

HEX

#E9BDA3

RGB

rgb(233, 189, 163)

HSL

hsl(22, 61%, 78%)

HSB

hsb(22, 30%, 91%)

CMYK

cmyk(0%, 19%, 30%, 9%)

Oklch

oklch(83.1% 0.062 52.2)

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

#F08484

Peach Pink · LightCoral · Coral Red

HEX

#F08484

RGB

rgb(240, 132, 132)

HSL

hsl(0, 78%, 73%)

HSB

hsb(0, 45%, 94%)

CMYK

cmyk(0%, 45%, 45%, 6%)

Oklch

oklch(73.2% 0.132 20.8)

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

#CC5A71

Crimson · LightCoral · Passion Red

HEX

#CC5A71

RGB

rgb(204, 90, 113)

HSL

hsl(348, 53%, 58%)

HSB

hsb(348, 56%, 80%)

CMYK

cmyk(0%, 56%, 45%, 20%)

Oklch

oklch(61.6% 0.146 9.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#AB4162

Dark Violet · Sienna · Camellia

HEX

#AB4162

RGB

rgb(171, 65, 98)

HSL

hsl(341, 45%, 46%)

HSB

hsb(341, 62%, 67%)

CMYK

cmyk(0%, 62%, 43%, 33%)

Oklch

oklch(52.9% 0.142 4.0)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDE0D1

D4D1E0

Analogous

E0DCD1

DDE0D1

D6E0D1

Triadic

DDE0D1

D1DDE0

E0D1DD

Split-Comp.

DDE0D1

D1D6E0

DCD1E0

Tetradic

DDE0D1

D1E0DC

D4D1E0

E0D1D6

Contrast Matrix WCAG 2.1 Contrast

DDE0D1	E9BDA3	F08484	CC5A71	AB4162
—	1.3 Fail	1.9 Fail	3.0 Fail	4.3 AA Large
1.3 Fail	—	1.5 Fail	2.3 Fail	3.3 AA Large
1.9 Fail	1.5 Fail	—	1.6 Fail	2.3 Fail
3.0 Fail	2.3 Fail	1.6 Fail	—	1.4 Fail
4.3 AA Large	3.3 AA Large	2.3 Fail	1.4 Fail	—

White BG

1.3Fail

1.7Fail

2.5Fail

4.0AA Large

5.7AA

Black BG

15.7AAA

12.3AAA

8.3AAA

5.3AA

3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDED5

D6D6A9

C1C084

9B9A6B

7D7C5A

Deuteranopia

DEDED6

D9DCAB

C8D084

A1AA6A

838B58

Tritanopia

DDD7D8

E7AEAF

EB8484

C66766

A65452

Achromatopsia

DDDDDD

C7C7C7

A4A4A4

7F7F7F

646464

Shades & Tints Shades & Tints

#DDE0D1

Dark

Light

#E9BDA3

Dark

Light

#F08484

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dde0d1;
  --color-2: #e9bda3;
  --color-3: #f08484;
  --color-4: #cc5a71;
  --color-5: #ab4162;
}

SCSS

$color-1: #dde0d1;
$color-2: #e9bda3;
$color-3: #f08484;
$color-4: #cc5a71;
$color-5: #ab4162;

TAILWIND

colors: {
  'brand-1': '#dde0d1',
  'brand-2': '#e9bda3',
  'brand-3': '#f08484',
  'brand-4': '#cc5a71',
  'brand-5': '#ab4162',
}

RGB Array

[221, 224, 209], [233, 189, 163], [240, 132, 132], [204, 90, 113], [171, 65, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDE0D1, #E9BDA3, #F08484, #CC5A71, #AB4162 is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dde0d1; --color-2: #e9bda3; --color-3: #f08484; --color-4: #cc5a71; --color-5: #ab4162. 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 general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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