← Back to Editor

#E5BB6F · #DCD386 · #78B278 · #089F8E · #665855

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E5BB6F

Ginger · BurlyWood · Warm Sun

HEX
#E5BB6F
RGB
rgb(229, 187, 111)
HSL
hsl(39, 69%, 67%)
HSB
hsb(39, 52%, 90%)
CMYK
cmyk(0%, 18%, 52%, 10%)
Oklch
oklch(81.3% 0.106 81.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#DCD386

Fresh Green · BurlyWood · Sunflower

HEX
#DCD386
RGB
rgb(220, 211, 134)
HSL
hsl(54, 55%, 69%)
HSB
hsb(54, 39%, 86%)
CMYK
cmyk(0%, 4%, 39%, 14%)
Oklch
oklch(85.7% 0.098 102.5)

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

#78B278

Celadon · DarkSeaGreen · Olive Green

HEX
#78B278
RGB
rgb(120, 178, 120)
HSL
hsl(120, 27%, 58%)
HSB
hsb(120, 33%, 70%)
CMYK
cmyk(33%, 0%, 33%, 30%)
Oklch
oklch(70.8% 0.103 144.4)

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

#089F8E

Mineral Blue · Teal · Mint Ice

HEX
#089F8E
RGB
rgb(8, 159, 142)
HSL
hsl(173, 90%, 33%)
HSB
hsb(173, 95%, 62%)
CMYK
cmyk(95%, 0%, 11%, 38%)
Oklch
oklch(63.1% 0.112 181.7)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#665855

Crimson · DimGray · Charcoal

HEX
#665855
RGB
rgb(102, 88, 85)
HSL
hsl(11, 9%, 37%)
HSB
hsb(11, 17%, 40%)
CMYK
cmyk(0%, 14%, 17%, 60%)
Oklch
oklch(47.3% 0.019 32.1)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E5BB6F
7199E5

Analogous

E58271
E5BB6F
D3E571

Triadic

E5BB6F
71E5BC
BC71E5

Split-Comp.

E5BB6F
71D3E5
8271E5

Tetradic

E5BB6F
71E582
7199E5
E571D3

Contrast Matrix WCAG 2.1 Contrast

E5BB6F
DCD386
78B278
089F8E
665855
—
1.2
Fail
1.4
Fail
1.8
Fail
3.8
AA Large
1.2
Fail
—
1.6
Fail
2.2
Fail
4.4
AA Large
1.4
Fail
1.6
Fail
—
1.3
Fail
2.7
Fail
1.8
Fail
2.2
Fail
1.3
Fail
—
2.1
Fail
3.8
AA Large
4.4
AA Large
2.7
Fail
2.1
Fail
—
White BG
1.8Fail
1.5Fail
2.5Fail
3.3AA Large
6.8AA
Black BG
11.7AAA
13.7AAA
8.4AAA
6.4AA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D281
D8D899
919286
494B92
606056

Deuteranopia

D5D886
D9D99D
8E8989
413593
616256

Tritanopia

E39093
DCA7AB
7B9194
109596
655656

Achromatopsia

BFBFBF
CDCDCD
9A9A9A
707070
5C5C5C

Shades & Tints Shades & Tints

#E5BB6F

Dark
Light

#DCD386

Dark
Light

#78B278

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e5bb6f;
  --color-2: #dcd386;
  --color-3: #78b278;
  --color-4: #089f8e;
  --color-5: #665855;
}

SCSS

$color-1: #e5bb6f;
$color-2: #dcd386;
$color-3: #78b278;
$color-4: #089f8e;
$color-5: #665855;

TAILWIND

colors: {
  'brand-1': '#e5bb6f',
  'brand-2': '#dcd386',
  'brand-3': '#78b278',
  'brand-4': '#089f8e',
  'brand-5': '#665855',
}

RGB Array

[229, 187, 111], [220, 211, 134], [120, 178, 120], [8, 159, 142], [102, 88, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E5BB6F, #DCD386, #78B278, #089F8E, #665855 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: #e5bb6f; --color-2: #dcd386; --color-3: #78b278; --color-4: #089f8e; --color-5: #665855. 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