#DCE8CA + #DFC78E + #CC9D9D + #B38193 + #8A8080 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DCE8CA

Willow Green · LightGray · Mint Green

HEX

#DCE8CA

RGB

rgb(220, 232, 202)

HSL

hsl(84, 39%, 85%)

HSB

hsb(84, 13%, 91%)

CMYK

cmyk(5%, 0%, 13%, 9%)

Oklch

oklch(91.4% 0.042 125.0)

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

#DFC78E

Goose Yellow · BurlyWood · Sunflower

HEX

#DFC78E

RGB

rgb(223, 199, 142)

HSL

hsl(42, 56%, 72%)

HSB

hsb(42, 36%, 87%)

CMYK

cmyk(0%, 11%, 36%, 13%)

Oklch

oklch(83.7% 0.079 87.7)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#CC9D9D

Peach Pink · Tan · Coral Red

HEX

#CC9D9D

RGB

rgb(204, 157, 157)

HSL

hsl(0, 32%, 71%)

HSB

hsb(0, 23%, 80%)

CMYK

cmyk(0%, 23%, 23%, 20%)

Oklch

oklch(74.0% 0.056 18.5)

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

#B38193

Dark Violet · DarkGray · Rose Pink

HEX

#B38193

RGB

rgb(179, 129, 147)

HSL

hsl(338, 25%, 60%)

HSB

hsb(338, 28%, 70%)

CMYK

cmyk(0%, 28%, 18%, 30%)

Oklch

oklch(65.8% 0.066 355.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#8A8080

Ash · Gray · Warm Gray

HEX

#8A8080

RGB

rgb(138, 128, 128)

HSL

hsl(0, 4%, 52%)

HSB

hsb(0, 7%, 54%)

CMYK

cmyk(0%, 7%, 7%, 46%)

Oklch

oklch(60.9% 0.012 17.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCE8CA

D6CAE8

Analogous

E8E5CA

DCE8CA

CDE8CA

Triadic

DCE8CA

CADCE8

E8CADC

Split-Comp.

DCE8CA

CACDE8

E5CAE8

Tetradic

DCE8CA

CAE8E5

D6CAE8

E8CACD

Contrast Matrix WCAG 2.1 Contrast

DCE8CA	DFC78E	CC9D9D	B38193	8A8080
—	1.3 Fail	1.9 Fail	2.5 Fail	3.0 Fail
1.3 Fail	—	1.4 Fail	2.0 Fail	2.3 Fail
1.9 Fail	1.4 Fail	—	1.4 Fail	1.6 Fail
2.5 Fail	2.0 Fail	1.4 Fail	—	1.2 Fail
3.0 Fail	2.3 Fail	1.6 Fail	1.2 Fail	—

White BG

1.3Fail

1.7Fail

2.4Fail

3.2AA Large

3.8AA Large

Black BG

16.4AAA

12.7AAA

8.9AAA

6.5AA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E1D1

D5D49C

B8B79D

9D9D8F

868680

Deuteranopia

E1E0D3

D6D89F

BABE9D

A0A48E

868780

Tritanopia

DDD7D8

DEA7A9

CA9D9D

B08B8A

8A8080

Achromatopsia

E1E1E1

C8C8C8

ABABAB

929292

838383

Shades & Tints Shades & Tints

#DCE8CA

Dark

Light

#DFC78E

Dark

Light

#CC9D9D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dce8ca;
  --color-2: #dfc78e;
  --color-3: #cc9d9d;
  --color-4: #b38193;
  --color-5: #8a8080;
}

SCSS

$color-1: #dce8ca;
$color-2: #dfc78e;
$color-3: #cc9d9d;
$color-4: #b38193;
$color-5: #8a8080;

TAILWIND

colors: {
  'brand-1': '#dce8ca',
  'brand-2': '#dfc78e',
  'brand-3': '#cc9d9d',
  'brand-4': '#b38193',
  'brand-5': '#8a8080',
}

RGB Array

[220, 232, 202], [223, 199, 142], [204, 157, 157], [179, 129, 147], [138, 128, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DCE8CA, #DFC78E, #CC9D9D, #B38193, #8A8080 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: #dce8ca; --color-2: #dfc78e; --color-3: #cc9d9d; --color-4: #b38193; --color-5: #8a8080. 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