← Back to Editor

#4D5C45 · #8B9B6D · #DFDE79 · #EBF2C1 · #C4507F

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

#4D5C45

Celadon · DarkOliveGreen · Forest Green

HEX
#4D5C45
RGB
rgb(77, 92, 69)
HSL
hsl(99, 14%, 32%)
HSB
hsb(99, 25%, 36%)
CMYK
cmyk(16%, 0%, 25%, 64%)
Oklch
oklch(45.5% 0.041 134.8)

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

#8B9B6D

Grass Green · Gray · Olive Green

HEX
#8B9B6D
RGB
rgb(139, 155, 109)
HSL
hsl(81, 19%, 52%)
HSB
hsb(81, 30%, 61%)
CMYK
cmyk(10%, 0%, 30%, 39%)
Oklch
oklch(66.5% 0.067 123.8)

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

#DFDE79

Fresh Green · Khaki · Sunflower

HEX
#DFDE79
RGB
rgb(223, 222, 121)
HSL
hsl(59, 61%, 67%)
HSB
hsb(59, 46%, 87%)
CMYK
cmyk(0%, 0%, 46%, 13%)
Oklch
oklch(88.0% 0.124 108.2)

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

#EBF2C1

Fresh Green · Bisque · Lemon Cream

HEX
#EBF2C1
RGB
rgb(235, 242, 193)
HSL
hsl(69, 65%, 85%)
HSB
hsb(69, 20%, 95%)
CMYK
cmyk(3%, 0%, 20%, 5%)
Oklch
oklch(94.4% 0.064 114.2)

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

#C4507F

Dark Violet · MediumVioletRed · Rose Pink

HEX
#C4507F
RGB
rgb(196, 80, 127)
HSL
hsl(336, 50%, 54%)
HSB
hsb(336, 59%, 77%)
CMYK
cmyk(0%, 59%, 35%, 23%)
Oklch
oklch(59.5% 0.155 357.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D5C45
55465D

Analogous

5A5D46
4D5C45
465D4A

Triadic

4D5C45
464E5D
5D464E

Split-Comp.

4D5C45
4A465D
5D465A

Tetradic

4D5C45
465A5D
55465D
5D4A46

Contrast Matrix WCAG 2.1 Contrast

4D5C45
8B9B6D
DFDE79
EBF2C1
C4507F
—
2.4
Fail
5.1
AA
6.1
AA
1.6
Fail
2.4
Fail
—
2.1
Fail
2.6
Fail
1.5
Fail
5.1
AA
2.1
Fail
—
1.2
Fail
3.1
AA Large
6.1
AA
2.6
Fail
1.2
Fail
—
3.7
AA Large
1.6
Fail
1.5
Fail
3.1
AA Large
3.7
AA Large
—
White BG
7.2AAA
3.0Fail
1.4Fail
1.2Fail
4.4AA Large
Black BG
2.9Fail
7.0AAA
14.9AAA
18.0AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

53544B
929278
DFDF91
EEEECD
929174

Deuteranopia

53524C
91907B
DFDF97
EEEDD0
99A171

Tritanopia

4E4F50
8C8183
DFA5A9
EBD6D8
BE6B69

Achromatopsia

555555
919191
D3D3D3
EAEAEA
787878

Shades & Tints Shades & Tints

#4D5C45

Dark
Light

#8B9B6D

Dark
Light

#DFDE79

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d5c45;
  --color-2: #8b9b6d;
  --color-3: #dfde79;
  --color-4: #ebf2c1;
  --color-5: #c4507f;
}

SCSS

$color-1: #4d5c45;
$color-2: #8b9b6d;
$color-3: #dfde79;
$color-4: #ebf2c1;
$color-5: #c4507f;

TAILWIND

colors: {
  'brand-1': '#4d5c45',
  'brand-2': '#8b9b6d',
  'brand-3': '#dfde79',
  'brand-4': '#ebf2c1',
  'brand-5': '#c4507f',
}

RGB Array

[77, 92, 69], [139, 155, 109], [223, 222, 121], [235, 242, 193], [196, 80, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D5C45, #8B9B6D, #DFDE79, #EBF2C1, #C4507F 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: #4d5c45; --color-2: #8b9b6d; --color-3: #dfde79; --color-4: #ebf2c1; --color-5: #c4507f. 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