← Back to Editor

#E2D78E · #BDCD97 · #B79477 · #B1686D · #905968

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

#E2D78E

Fresh Green · Khaki · Sunflower

HEX
#E2D78E
RGB
rgb(226, 215, 142)
HSL
hsl(52, 59%, 72%)
HSB
hsb(52, 37%, 89%)
CMYK
cmyk(0%, 5%, 37%, 11%)
Oklch
oklch(87.2% 0.094 100.7)

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

#BDCD97

Willow Green · Tan · Apple Green

HEX
#BDCD97
RGB
rgb(189, 205, 151)
HSL
hsl(78, 35%, 70%)
HSB
hsb(78, 26%, 80%)
CMYK
cmyk(8%, 0%, 26%, 20%)
Oklch
oklch(82.3% 0.074 121.5)

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

#B79477

Tangerine · Tan · Warm Sun

HEX
#B79477
RGB
rgb(183, 148, 119)
HSL
hsl(27, 31%, 59%)
HSB
hsb(27, 35%, 72%)
CMYK
cmyk(0%, 19%, 35%, 28%)
Oklch
oklch(69.1% 0.059 61.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#B1686D

Crimson · Gray · Passion Red

HEX
#B1686D
RGB
rgb(177, 104, 109)
HSL
hsl(356, 32%, 55%)
HSB
hsb(356, 41%, 69%)
CMYK
cmyk(0%, 41%, 38%, 31%)
Oklch
oklch(60.0% 0.094 15.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#905968

Dark Violet · DimGray · Camellia

HEX
#905968
RGB
rgb(144, 89, 104)
HSL
hsl(344, 24%, 46%)
HSB
hsb(344, 38%, 56%)
CMYK
cmyk(0%, 38%, 28%, 44%)
Oklch
oklch(53.0% 0.075 2.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2D78E
8D99E2

Analogous

E2AC8D
E2D78E
C3E28D

Triadic

E2D78E
8DE2D6
D68DE2

Split-Comp.

E2D78E
8DC3E2
AC8DE2

Tetradic

E2D78E
8DE2AC
8D99E2
E28DC3

Contrast Matrix WCAG 2.1 Contrast

E2D78E
BDCD97
B79477
B1686D
905968
—
1.2
Fail
1.9
Fail
2.8
Fail
3.8
AA Large
1.2
Fail
—
1.6
Fail
2.4
Fail
3.2
AA Large
1.9
Fail
1.6
Fail
—
1.5
Fail
2.0
Fail
2.8
Fail
2.4
Fail
1.5
Fail
—
1.3
Fail
3.8
AA Large
3.2
AA Large
2.0
Fail
1.3
Fail
—
White BG
1.5Fail
1.7Fail
2.8Fail
4.1AA Large
5.5AA
Black BG
14.3AAA
12.3AAA
7.5AAA
5.1AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDA0
C4C4A4
A8A87E
91916C
787864

Deuteranopia

DEDFA4
C3C2A7
AAAD80
969B6C
7B8064

Tritanopia

E1AEB1
BEAEB1
B58485
AD6B6B
8D6261

Achromatopsia

D2D2D2
C2C2C2
9B9B9B
7E7E7E
6B6B6B

Shades & Tints Shades & Tints

#E2D78E

Dark
Light

#BDCD97

Dark
Light

#B79477

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2d78e;
  --color-2: #bdcd97;
  --color-3: #b79477;
  --color-4: #b1686d;
  --color-5: #905968;
}

SCSS

$color-1: #e2d78e;
$color-2: #bdcd97;
$color-3: #b79477;
$color-4: #b1686d;
$color-5: #905968;

TAILWIND

colors: {
  'brand-1': '#e2d78e',
  'brand-2': '#bdcd97',
  'brand-3': '#b79477',
  'brand-4': '#b1686d',
  'brand-5': '#905968',
}

RGB Array

[226, 215, 142], [189, 205, 151], [183, 148, 119], [177, 104, 109], [144, 89, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2D78E, #BDCD97, #B79477, #B1686D, #905968 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: #e2d78e; --color-2: #bdcd97; --color-3: #b79477; --color-4: #b1686d; --color-5: #905968. 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