← Back to Editor

#DEE3BF · #CEC19E · #9AB587 · #8C8F74 · #78B082

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DEE3BF

Fresh Green · Wheat · Lemon Cream

HEX
#DEE3BF
RGB
rgb(222, 227, 191)
HSL
hsl(68, 39%, 82%)
HSB
hsb(68, 16%, 89%)
CMYK
cmyk(2%, 0%, 16%, 11%)
Oklch
oklch(90.3% 0.048 113.8)

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

#CEC19E

Goose Yellow · Tan · Sunflower

HEX
#CEC19E
RGB
rgb(206, 193, 158)
HSL
hsl(44, 33%, 71%)
HSB
hsb(44, 23%, 81%)
CMYK
cmyk(0%, 6%, 23%, 19%)
Oklch
oklch(81.3% 0.049 90.1)

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

#9AB587

Celadon · DarkSeaGreen · Apple Green

HEX
#9AB587
RGB
rgb(154, 181, 135)
HSL
hsl(95, 24%, 62%)
HSB
hsb(95, 25%, 71%)
CMYK
cmyk(15%, 0%, 25%, 29%)
Oklch
oklch(74.1% 0.071 132.7)

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

#8C8F74

Autumn Sage · Gray · Sunflower

HEX
#8C8F74
RGB
rgb(140, 143, 116)
HSL
hsl(67, 11%, 51%)
HSB
hsb(67, 19%, 56%)
CMYK
cmyk(2%, 0%, 19%, 44%)
Oklch
oklch(64.0% 0.039 112.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#78B082

Celadon · DarkSeaGreen · Olive Green

HEX
#78B082
RGB
rgb(120, 176, 130)
HSL
hsl(131, 26%, 58%)
HSB
hsb(131, 32%, 69%)
CMYK
cmyk(32%, 0%, 26%, 31%)
Oklch
oklch(70.6% 0.089 149.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEE3BF
C4BFE3

Analogous

E3D6BF
DEE3BF
CCE3BF

Triadic

DEE3BF
BFDEE3
E3BFDE

Split-Comp.

DEE3BF
BFCCE3
D6BFE3

Tetradic

DEE3BF
BFE3D6
C4BFE3
E3BFCC

Contrast Matrix WCAG 2.1 Contrast

DEE3BF
CEC19E
9AB587
8C8F74
78B082
—
1.3
Fail
1.7
Fail
2.5
Fail
1.9
Fail
1.3
Fail
—
1.3
Fail
1.9
Fail
1.4
Fail
1.7
Fail
1.3
Fail
—
1.5
Fail
1.1
Fail
2.5
Fail
1.9
Fail
1.5
Fail
—
1.3
Fail
1.9
Fail
1.4
Fail
1.1
Fail
1.3
Fail
—
White BG
1.3Fail
1.8Fail
2.2Fail
3.3AA Large
2.5Fail
Black BG
15.8AAA
11.7AAA
9.3AAA
6.3AA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0C8
C8C8A6
A6A692
8D8D7B
90918D

Deuteranopia

E0DFCA
C9CAA9
A4A295
8D8D7C
8D8990

Tritanopia

DECFD0
CDADAF
9B9B9D
8C8081
7B9698

Achromatopsia

DDDDDD
C1C1C1
A8A8A8
8B8B8B
9A9A9A

Shades & Tints Shades & Tints

#DEE3BF

Dark
Light

#CEC19E

Dark
Light

#9AB587

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dee3bf;
  --color-2: #cec19e;
  --color-3: #9ab587;
  --color-4: #8c8f74;
  --color-5: #78b082;
}

SCSS

$color-1: #dee3bf;
$color-2: #cec19e;
$color-3: #9ab587;
$color-4: #8c8f74;
$color-5: #78b082;

TAILWIND

colors: {
  'brand-1': '#dee3bf',
  'brand-2': '#cec19e',
  'brand-3': '#9ab587',
  'brand-4': '#8c8f74',
  'brand-5': '#78b082',
}

RGB Array

[222, 227, 191], [206, 193, 158], [154, 181, 135], [140, 143, 116], [120, 176, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEE3BF, #CEC19E, #9AB587, #8C8F74, #78B082 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dee3bf; --color-2: #cec19e; --color-3: #9ab587; --color-4: #8c8f74; --color-5: #78b082. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. Restrained colors convey professionalism and trust. 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