← Back to Editor

#DFFBC8 · #CBEBB0 · #9BE68E · #94B868 · #574634

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

#DFFBC8

Emerald · Beige · Mint Green

HEX
#DFFBC8
RGB
rgb(223, 251, 200)
HSL
hsl(93, 86%, 88%)
HSB
hsb(93, 20%, 98%)
CMYK
cmyk(11%, 0%, 20%, 2%)
Oklch
oklch(95.5% 0.073 131.2)

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

#CBEBB0

Emerald · LightGray · Mint Green

HEX
#CBEBB0
RGB
rgb(203, 235, 176)
HSL
hsl(93, 60%, 81%)
HSB
hsb(93, 25%, 92%)
CMYK
cmyk(14%, 0%, 25%, 8%)
Oklch
oklch(90.2% 0.085 131.1)

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

#9BE68E

Emerald · LightGreen · Apple Green

HEX
#9BE68E
RGB
rgb(155, 230, 142)
HSL
hsl(111, 64%, 73%)
HSB
hsb(111, 38%, 90%)
CMYK
cmyk(33%, 0%, 38%, 10%)
Oklch
oklch(85.5% 0.140 140.8)

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

#94B868

Grass Green · DarkSeaGreen · Olive Green

HEX
#94B868
RGB
rgb(148, 184, 104)
HSL
hsl(87, 36%, 56%)
HSB
hsb(87, 43%, 72%)
CMYK
cmyk(20%, 0%, 43%, 28%)
Oklch
oklch(73.7% 0.114 128.7)

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

#574634

Ochre · DarkOliveGreen · Amber Brown

HEX
#574634
RGB
rgb(87, 70, 52)
HSL
hsl(31, 25%, 27%)
HSB
hsb(31, 40%, 34%)
CMYK
cmyk(0%, 20%, 40%, 66%)
Oklch
oklch(40.7% 0.037 68.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFFBC8
E3C6FB

Analogous

F8FBC6
DFFBC8
C6FBC9

Triadic

DFFBC8
C6DEFB
FBC6DE

Split-Comp.

DFFBC8
C9C6FB
FBC6F8

Tetradic

DFFBC8
C6F8FB
E3C6FB
FBC9C6

Contrast Matrix WCAG 2.1 Contrast

DFFBC8
CBEBB0
9BE68E
94B868
574634
—
1.2
Fail
1.3
Fail
2.0
Fail
8.1
AAA
1.2
Fail
—
1.1
Fail
1.7
Fail
6.9
AA
1.3
Fail
1.1
Fail
—
1.5
Fail
6.1
AA
2.0
Fail
1.7
Fail
1.5
Fail
—
4.0
AA Large
8.1
AAA
6.9
AA
6.1
AA
4.0
AA Large
—
White BG
1.1Fail
1.3Fail
1.5Fail
2.3Fail
9.0AAA
Black BG
18.8AAA
16.0AAA
14.1AAA
9.3AAA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBD4
D9D9BE
BBBCA3
A4A47B
504F38

Deuteranopia

EAE7D7
D7D5C2
B7B2A8
A29F80
515239

Tritanopia

E0DEE0
CDCACC
9FB4B8
968B8E
563C3D

Achromatopsia

EDEDED
DBDBDB
C6C6C6
A4A4A4
494949

Shades & Tints Shades & Tints

#DFFBC8

Dark
Light

#CBEBB0

Dark
Light

#9BE68E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dffbc8;
  --color-2: #cbebb0;
  --color-3: #9be68e;
  --color-4: #94b868;
  --color-5: #574634;
}

SCSS

$color-1: #dffbc8;
$color-2: #cbebb0;
$color-3: #9be68e;
$color-4: #94b868;
$color-5: #574634;

TAILWIND

colors: {
  'brand-1': '#dffbc8',
  'brand-2': '#cbebb0',
  'brand-3': '#9be68e',
  'brand-4': '#94b868',
  'brand-5': '#574634',
}

RGB Array

[223, 251, 200], [203, 235, 176], [155, 230, 142], [148, 184, 104], [87, 70, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFFBC8, #CBEBB0, #9BE68E, #94B868, #574634 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: #dffbc8; --color-2: #cbebb0; --color-3: #9be68e; --color-4: #94b868; --color-5: #574634. 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