← Back to Editor

#D8E4BC · #AFBE97 · #7E7647 · #B8B13F · #CED176

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 LibraryData Visualization

Color Details Color Details

#D8E4BC

Willow Green · LightGray · Mint Green

HEX
#D8E4BC
RGB
rgb(216, 228, 188)
HSL
hsl(78, 43%, 82%)
HSB
hsb(78, 18%, 89%)
CMYK
cmyk(5%, 0%, 18%, 11%)
Oklch
oklch(89.9% 0.055 121.1)

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

#AFBE97

Willow Green · DarkGray · Apple Green

HEX
#AFBE97
RGB
rgb(175, 190, 151)
HSL
hsl(83, 23%, 67%)
HSB
hsb(83, 21%, 75%)
CMYK
cmyk(8%, 0%, 21%, 25%)
Oklch
oklch(78.0% 0.056 124.8)

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

#7E7647

Autumn Sage · DimGray · Honey Gold

HEX
#7E7647
RGB
rgb(126, 118, 71)
HSL
hsl(51, 28%, 39%)
HSB
hsb(51, 44%, 49%)
CMYK
cmyk(0%, 6%, 44%, 51%)
Oklch
oklch(56.2% 0.067 99.8)

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

#B8B13F

Autumn Sage · GoldenRod · Honey Gold

HEX
#B8B13F
RGB
rgb(184, 177, 63)
HSL
hsl(57, 49%, 48%)
HSB
hsb(57, 66%, 72%)
CMYK
cmyk(0%, 4%, 66%, 28%)
Oklch
oklch(74.5% 0.133 105.8)

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

#CED176

Fresh Green · BurlyWood · Sunflower

HEX
#CED176
RGB
rgb(206, 209, 118)
HSL
hsl(62, 50%, 64%)
HSB
hsb(62, 44%, 82%)
CMYK
cmyk(1%, 0%, 44%, 18%)
Oklch
oklch(83.9% 0.114 110.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8E4BC
C9BDE5

Analogous

E5DDBD
D8E4BC
C5E5BD

Triadic

D8E4BC
BDD9E5
E5BDD9

Split-Comp.

D8E4BC
BDC5E5
DDBDE5

Tetradic

D8E4BC
BDE5DD
C9BDE5
E5BDC5

Contrast Matrix WCAG 2.1 Contrast

D8E4BC
AFBE97
7E7647
B8B13F
CED176
—
1.5
Fail
3.4
AA Large
1.7
Fail
1.2
Fail
1.5
Fail
—
2.3
Fail
1.1
Fail
1.2
Fail
3.4
AA Large
2.3
Fail
—
2.1
Fail
2.8
Fail
1.7
Fail
1.1
Fail
2.1
Fail
—
1.4
Fail
1.2
Fail
1.2
Fail
2.8
Fail
1.4
Fail
—
White BG
1.3Fail
2.0Fail
4.6AA
2.2Fail
1.6Fail
Black BG
15.7AAA
10.6AAA
4.6AA
9.4AAA
13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDC6
B5B6A0
7B7A52
B5B55B
CFCF8C

Deuteranopia

DDDCC8
B5B4A3
7B7C55
B5B661
CFCF91

Tritanopia

D9CDCF
B0A8AA
7E5B5D
B87075
CE9DA1

Achromatopsia

DCDCDC
B5B5B5
737373
A6A6A6
C6C6C6

Shades & Tints Shades & Tints

#D8E4BC

Dark
Light

#AFBE97

Dark
Light

#7E7647

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8e4bc;
  --color-2: #afbe97;
  --color-3: #7e7647;
  --color-4: #b8b13f;
  --color-5: #ced176;
}

SCSS

$color-1: #d8e4bc;
$color-2: #afbe97;
$color-3: #7e7647;
$color-4: #b8b13f;
$color-5: #ced176;

TAILWIND

colors: {
  'brand-1': '#d8e4bc',
  'brand-2': '#afbe97',
  'brand-3': '#7e7647',
  'brand-4': '#b8b13f',
  'brand-5': '#ced176',
}

RGB Array

[216, 228, 188], [175, 190, 151], [126, 118, 71], [184, 177, 63], [206, 209, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8E4BC, #AFBE97, #7E7647, #B8B13F, #CED176 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #d8e4bc; --color-2: #afbe97; --color-3: #7e7647; --color-4: #b8b13f; --color-5: #ced176. 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. 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