#D4E3CE + #86B9B0 + #73A79D + #EAC59E + #DEBE9F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D4E3CE

Celadon · LightGray · Mint Green

HEX

#D4E3CE

RGB

rgb(212, 227, 206)

HSL

hsl(103, 27%, 85%)

HSB

hsb(103, 9%, 89%)

CMYK

cmyk(7%, 0%, 9%, 11%)

Oklch

oklch(89.9% 0.032 136.6)

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

#86B9B0

Jade · DarkSeaGreen · Lake Green

HEX

#86B9B0

RGB

rgb(134, 185, 176)

HSL

hsl(169, 27%, 63%)

HSB

hsb(169, 28%, 73%)

CMYK

cmyk(28%, 0%, 5%, 27%)

Oklch

oklch(74.7% 0.055 182.7)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#73A79D

Mineral Blue · CadetBlue · Lake Green

HEX

#73A79D

RGB

rgb(115, 167, 157)

HSL

hsl(168, 23%, 55%)

HSB

hsb(168, 31%, 65%)

CMYK

cmyk(31%, 0%, 6%, 35%)

Oklch

oklch(68.9% 0.057 181.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#EAC59E

Goose Yellow · BurlyWood · Peach Orange

HEX

#EAC59E

RGB

rgb(234, 197, 158)

HSL

hsl(31, 64%, 77%)

HSB

hsb(31, 32%, 92%)

CMYK

cmyk(0%, 16%, 32%, 8%)

Oklch

oklch(84.6% 0.067 68.2)

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

#DEBE9F

Goose Yellow · Tan · Warm Sun

HEX

#DEBE9F

RGB

rgb(222, 190, 159)

HSL

hsl(30, 49%, 75%)

HSB

hsb(30, 28%, 87%)

CMYK

cmyk(0%, 14%, 28%, 13%)

Oklch

oklch(82.1% 0.056 66.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4E3CE

DDCEE3

Analogous

DFE3CE

D4E3CE

CEE3D3

Triadic

D4E3CE

CED4E3

E3CED4

Split-Comp.

D4E3CE

D3CEE3

E3CEDF

Tetradic

D4E3CE

CEDFE3

DDCEE3

E3D3CE

Contrast Matrix WCAG 2.1 Contrast

D4E3CE	86B9B0	73A79D	EAC59E	DEBE9F
—	1.6 Fail	2.0 Fail	1.2 Fail	1.3 Fail
1.6 Fail	—	1.2 Fail	1.4 Fail	1.2 Fail
2.0 Fail	1.2 Fail	—	1.7 Fail	1.5 Fail
1.2 Fail	1.4 Fail	1.7 Fail	—	1.1 Fail
1.3 Fail	1.2 Fail	1.5 Fail	1.1 Fail	—

White BG

1.3Fail

2.2Fail

2.7Fail

1.6Fail

1.8Fail

Black BG

15.7AAA

9.6AAA

7.7AAA

13.0AAA

12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADBD3

9C9DB2

8A8A9F

DADAA7

D0D0A7

Deuteranopia

DAD8D4

9995B3

8783A0

DCDFAA

D2D4A8

Tritanopia

D5D7D8

89B4B4

76A1A2

E8AFB1

DCACAE

Achromatopsia

DCDCDC

A9A9A9

969696

CCCCCC

C4C4C4

Shades & Tints Shades & Tints

#D4E3CE

Dark

Light

#86B9B0

Dark

Light

#73A79D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4e3ce;
  --color-2: #86b9b0;
  --color-3: #73a79d;
  --color-4: #eac59e;
  --color-5: #debe9f;
}

SCSS

$color-1: #d4e3ce;
$color-2: #86b9b0;
$color-3: #73a79d;
$color-4: #eac59e;
$color-5: #debe9f;

TAILWIND

colors: {
  'brand-1': '#d4e3ce',
  'brand-2': '#86b9b0',
  'brand-3': '#73a79d',
  'brand-4': '#eac59e',
  'brand-5': '#debe9f',
}

RGB Array

[212, 227, 206], [134, 185, 176], [115, 167, 157], [234, 197, 158], [222, 190, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4E3CE, #86B9B0, #73A79D, #EAC59E, #DEBE9F 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: #d4e3ce; --color-2: #86b9b0; --color-3: #73a79d; --color-4: #eac59e; --color-5: #debe9f. 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