← Back to Editor

#E5CB7E · #DAB567 · #A89972 · #7F8770 · #617C6D

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

#E5CB7E

Ginger · BurlyWood · Sunflower

HEX
#E5CB7E
RGB
rgb(229, 203, 126)
HSL
hsl(45, 66%, 70%)
HSB
hsb(45, 45%, 90%)
CMYK
cmyk(0%, 11%, 45%, 10%)
Oklch
oklch(84.7% 0.101 91.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#DAB567

Ginger · SandyBrown · Sunflower

HEX
#DAB567
RGB
rgb(218, 181, 103)
HSL
hsl(41, 61%, 63%)
HSB
hsb(41, 53%, 85%)
CMYK
cmyk(0%, 17%, 53%, 15%)
Oklch
oklch(78.9% 0.106 84.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#A89972

Ginger · Gray · Sunflower

HEX
#A89972
RGB
rgb(168, 153, 114)
HSL
hsl(43, 24%, 55%)
HSB
hsb(43, 32%, 66%)
CMYK
cmyk(0%, 9%, 32%, 34%)
Oklch
oklch(68.6% 0.057 89.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#7F8770

Grass Green · Gray · Warm Gray

HEX
#7F8770
RGB
rgb(127, 135, 112)
HSL
hsl(81, 9%, 48%)
HSB
hsb(81, 17%, 53%)
CMYK
cmyk(6%, 0%, 17%, 47%)
Oklch
oklch(61.0% 0.035 123.0)

Traditional「Grass Green」· Paint「Warm Gray」· Creative Urban Concrete

#617C6D

Celadon · DimGray · Olive Green

HEX
#617C6D
RGB
rgb(97, 124, 109)
HSL
hsl(147, 12%, 43%)
HSB
hsb(147, 22%, 49%)
CMYK
cmyk(22%, 0%, 12%, 51%)
Oklch
oklch(56.0% 0.039 160.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E5CB7E
8099E5

Analogous

E59980
E5CB7E
CCE580

Triadic

E5CB7E
80E5CC
CC80E5

Split-Comp.

E5CB7E
80CCE5
9980E5

Tetradic

E5CB7E
80E599
8099E5
E580CC

Contrast Matrix WCAG 2.1 Contrast

E5CB7E
DAB567
A89972
7F8770
617C6D
—
1.2
Fail
1.8
Fail
2.4
Fail
2.9
Fail
1.2
Fail
—
1.4
Fail
1.9
Fail
2.3
Fail
1.8
Fail
1.4
Fail
—
1.3
Fail
1.6
Fail
2.4
Fail
1.9
Fail
1.3
Fail
—
1.2
Fail
2.9
Fail
2.3
Fail
1.6
Fail
1.2
Fail
—
White BG
1.6Fail
1.9Fail
2.8Fail
3.7AA Large
4.6AA
Black BG
13.2AAA
10.8AAA
7.5AAA
5.6AA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADA91
CACA7A
A2A17B
828376
6D6D71

Deuteranopia

DBDD95
CCCF7E
A2A47E
828177
6B6972

Tritanopia

E49FA3
D8898C
A78385
7F7A7B
627374

Achromatopsia

CACACA
B7B7B7
999999
828282
727272

Shades & Tints Shades & Tints

#E5CB7E

Dark
Light

#DAB567

Dark
Light

#A89972

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e5cb7e;
  --color-2: #dab567;
  --color-3: #a89972;
  --color-4: #7f8770;
  --color-5: #617c6d;
}

SCSS

$color-1: #e5cb7e;
$color-2: #dab567;
$color-3: #a89972;
$color-4: #7f8770;
$color-5: #617c6d;

TAILWIND

colors: {
  'brand-1': '#e5cb7e',
  'brand-2': '#dab567',
  'brand-3': '#a89972',
  'brand-4': '#7f8770',
  'brand-5': '#617c6d',
}

RGB Array

[229, 203, 126], [218, 181, 103], [168, 153, 114], [127, 135, 112], [97, 124, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E5CB7E, #DAB567, #A89972, #7F8770, #617C6D is ideal for: corporate websites, product showcases, portfolios. 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: #e5cb7e; --color-2: #dab567; --color-3: #a89972; --color-4: #7f8770; --color-5: #617c6d. 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. 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