← Back to Editor

#DEE2BC · #BCD7C7 · #A4BD78 · #8F9EAB · #737950

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#DEE2BC

Fresh Green · Wheat · Lemon Cream

HEX
#DEE2BC
RGB
rgb(222, 226, 188)
HSL
hsl(66, 40%, 81%)
HSB
hsb(66, 17%, 89%)
CMYK
cmyk(2%, 0%, 17%, 11%)
Oklch
oklch(90.0% 0.050 112.3)

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

#BCD7C7

Celadon · Silver · Apple Green

HEX
#BCD7C7
RGB
rgb(188, 215, 199)
HSL
hsl(144, 25%, 79%)
HSB
hsb(144, 13%, 84%)
CMYK
cmyk(13%, 0%, 7%, 16%)
Oklch
oklch(85.5% 0.036 159.6)

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

#A4BD78

Willow Green · DarkSeaGreen · Apple Green

HEX
#A4BD78
RGB
rgb(164, 189, 120)
HSL
hsl(82, 34%, 61%)
HSB
hsb(82, 37%, 74%)
CMYK
cmyk(13%, 0%, 37%, 26%)
Oklch
oklch(76.3% 0.097 124.8)

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

#8F9EAB

Sky Blue · DarkGray · Cobalt Blue

HEX
#8F9EAB
RGB
rgb(143, 158, 171)
HSL
hsl(208, 14%, 62%)
HSB
hsb(208, 16%, 67%)
CMYK
cmyk(16%, 8%, 0%, 33%)
Oklch
oklch(69.2% 0.026 244.3)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#737950

Autumn Sage · DimGray · Honey Gold

HEX
#737950
RGB
rgb(115, 121, 80)
HSL
hsl(69, 20%, 39%)
HSB
hsb(69, 34%, 47%)
CMYK
cmyk(5%, 0%, 34%, 53%)
Oklch
oklch(56.0% 0.060 115.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEE2BC
BFBBE2

Analogous

E2D2BB
DEE2BC
CBE2BB

Triadic

DEE2BC
BBDEE2
E2BBDE

Split-Comp.

DEE2BC
BBCBE2
D2BBE2

Tetradic

DEE2BC
BBE2D2
BFBBE2
E2BBCB

Contrast Matrix WCAG 2.1 Contrast

DEE2BC
BCD7C7
A4BD78
8F9EAB
737950
—
1.1
Fail
1.6
Fail
2.1
Fail
3.4
AA Large
1.1
Fail
—
1.4
Fail
1.8
Fail
3.0
Fail
1.6
Fail
1.4
Fail
—
1.3
Fail
2.2
Fail
2.1
Fail
1.8
Fail
1.3
Fail
—
1.7
Fail
3.4
AA Large
3.0
Fail
2.2
Fail
1.7
Fail
—
White BG
1.3Fail
1.5Fail
2.1Fail
2.7Fail
4.6AA
Black BG
15.7AAA
13.7AAA
10.1AAA
7.6AAA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0C5
C8C8CB
AFAF89
9596A8
76765A

Deuteranopia

E0DFC7
C6C4CC
ADAC8D
9594A7
75755C

Tritanopia

DECCCE
BDCECF
A59699
90A5A5
736263

Achromatopsia

DCDCDC
CDCDCD
AEAEAE
9B9B9B
737373

Shades & Tints Shades & Tints

#DEE2BC

Dark
Light

#BCD7C7

Dark
Light

#A4BD78

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dee2bc;
  --color-2: #bcd7c7;
  --color-3: #a4bd78;
  --color-4: #8f9eab;
  --color-5: #737950;
}

SCSS

$color-1: #dee2bc;
$color-2: #bcd7c7;
$color-3: #a4bd78;
$color-4: #8f9eab;
$color-5: #737950;

TAILWIND

colors: {
  'brand-1': '#dee2bc',
  'brand-2': '#bcd7c7',
  'brand-3': '#a4bd78',
  'brand-4': '#8f9eab',
  'brand-5': '#737950',
}

RGB Array

[222, 226, 188], [188, 215, 199], [164, 189, 120], [143, 158, 171], [115, 121, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEE2BC, #BCD7C7, #A4BD78, #8F9EAB, #737950 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #dee2bc; --color-2: #bcd7c7; --color-3: #a4bd78; --color-4: #8f9eab; --color-5: #737950. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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