#EF8396 + #D0CEB1 + #DCE4A2 + #C5A1BC + #88788E · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#EF8396

Peach Pink · LightCoral · Coral Red

HEX

#EF8396

RGB

rgb(239, 131, 150)

HSL

hsl(349, 77%, 73%)

HSB

hsb(349, 45%, 94%)

CMYK

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

Oklch

oklch(73.3% 0.133 9.7)

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

#D0CEB1

Fresh Green · Silver · Sunflower

HEX

#D0CEB1

RGB

rgb(208, 206, 177)

HSL

hsl(56, 25%, 75%)

HSB

hsb(56, 15%, 82%)

CMYK

cmyk(0%, 1%, 15%, 18%)

Oklch

oklch(84.5% 0.039 104.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DCE4A2

Fresh Green · Khaki · Lemon Cream

HEX

#DCE4A2

RGB

rgb(220, 228, 162)

HSL

hsl(67, 55%, 76%)

HSB

hsb(67, 29%, 89%)

CMYK

cmyk(4%, 0%, 29%, 11%)

Oklch

oklch(89.7% 0.086 113.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#C5A1BC

Mauve · Silver · Lilac Purple

HEX

#C5A1BC

RGB

rgb(197, 161, 188)

HSL

hsl(315, 24%, 70%)

HSB

hsb(315, 18%, 77%)

CMYK

cmyk(0%, 18%, 5%, 23%)

Oklch

oklch(75.0% 0.056 335.1)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#88788E

Dark Plum · Gray · Warm Gray

HEX

#88788E

RGB

rgb(136, 120, 142)

HSL

hsl(284, 9%, 51%)

HSB

hsb(284, 15%, 56%)

CMYK

cmyk(4%, 15%, 0%, 44%)

Oklch

oklch(59.5% 0.038 316.8)

Traditional「Dark Plum」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EF8396

85EFDC

Analogous

EF85CE

EF8396

EFA785

Triadic

EF8396

99EF85

8599EF

Split-Comp.

EF8396

85EFA7

85CEEF

Tetradic

EF8396

CEEF85

85EFDC

A785EF

Contrast Matrix WCAG 2.1 Contrast

EF8396	D0CEB1	DCE4A2	C5A1BC	88788E
—	1.6 Fail	1.9 Fail	1.1 Fail	1.6 Fail
1.6 Fail	—	1.2 Fail	1.4 Fail	2.6 Fail
1.9 Fail	1.2 Fail	—	1.7 Fail	3.1 AA Large
1.1 Fail	1.4 Fail	1.7 Fail	—	1.8 Fail
1.6 Fail	2.6 Fail	3.1 AA Large	1.8 Fail	—

White BG

2.5Fail

1.6Fail

1.3Fail

2.3Fail

4.1AA Large

Black BG

8.4AAA

13.1AAA

15.7AAA

9.2AAA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0BF91

CFCFB8

DFE0B2

B5B5B5

818189

Deuteranopia

C7CF90

CFCFBA

DFDEB6

B8BAB4

828387

Tritanopia

EA8E8D

D0BEBF

DCBFC1

C3B0AF

878484

Achromatopsia

A5A5A5

CBCBCB

DADADA

AFAFAF

7F7F7F

Shades & Tints Shades & Tints

#EF8396

Dark

Light

#D0CEB1

Dark

Light

#DCE4A2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ef8396;
  --color-2: #d0ceb1;
  --color-3: #dce4a2;
  --color-4: #c5a1bc;
  --color-5: #88788e;
}

SCSS

$color-1: #ef8396;
$color-2: #d0ceb1;
$color-3: #dce4a2;
$color-4: #c5a1bc;
$color-5: #88788e;

TAILWIND

colors: {
  'brand-1': '#ef8396',
  'brand-2': '#d0ceb1',
  'brand-3': '#dce4a2',
  'brand-4': '#c5a1bc',
  'brand-5': '#88788e',
}

RGB Array

[239, 131, 150], [208, 206, 177], [220, 228, 162], [197, 161, 188], [136, 120, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #EF8396, #D0CEB1, #DCE4A2, #C5A1BC, #88788E 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: #ef8396; --color-2: #d0ceb1; --color-3: #dce4a2; --color-4: #c5a1bc; --color-5: #88788e. 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 nature-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