← Back to Editor

#B4C35C · #DCDF9A · #E2C991 · #BC7966 · #A46E52

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

#B4C35C

Autumn Sage · Tan · Sunflower

HEX
#B4C35C
RGB
rgb(180, 195, 92)
HSL
hsl(69, 46%, 56%)
HSB
hsb(69, 53%, 76%)
CMYK
cmyk(8%, 0%, 53%, 24%)
Oklch
oklch(78.4% 0.129 116.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#DCDF9A

Fresh Green · Khaki · Sunflower

HEX
#DCDF9A
RGB
rgb(220, 223, 154)
HSL
hsl(63, 52%, 74%)
HSB
hsb(63, 31%, 87%)
CMYK
cmyk(1%, 0%, 31%, 13%)
Oklch
oklch(88.5% 0.089 110.2)

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

#E2C991

Goose Yellow · BurlyWood · Sunflower

HEX
#E2C991
RGB
rgb(226, 201, 145)
HSL
hsl(41, 58%, 73%)
HSB
hsb(41, 36%, 89%)
CMYK
cmyk(0%, 11%, 36%, 11%)
Oklch
oklch(84.4% 0.078 86.6)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#BC7966

Crimson · DarkSalmon · Passion Red

HEX
#BC7966
RGB
rgb(188, 121, 102)
HSL
hsl(13, 39%, 57%)
HSB
hsb(13, 46%, 74%)
CMYK
cmyk(0%, 36%, 46%, 26%)
Oklch
oklch(64.2% 0.089 36.6)

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

#A46E52

Tangerine · Sienna · Amber Brown

HEX
#A46E52
RGB
rgb(164, 110, 82)
HSL
hsl(20, 33%, 48%)
HSB
hsb(20, 50%, 64%)
CMYK
cmyk(0%, 33%, 50%, 36%)
Oklch
oklch(58.8% 0.080 48.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4C35C
6B5BC2

Analogous

C29E5B
B4C35C
7FC25B

Triadic

B4C35C
5BB3C2
C25BB3

Split-Comp.

B4C35C
5B7FC2
9E5BC2

Tetradic

B4C35C
5BC29E
6B5BC2
C25B7F

Contrast Matrix WCAG 2.1 Contrast

B4C35C
DCDF9A
E2C991
BC7966
A46E52
—
1.4
Fail
1.2
Fail
1.8
Fail
2.2
Fail
1.4
Fail
—
1.2
Fail
2.5
Fail
3.1
AA Large
1.2
Fail
1.2
Fail
—
2.1
Fail
2.6
Fail
1.8
Fail
2.5
Fail
2.1
Fail
—
1.2
Fail
2.2
Fail
3.1
AA Large
2.6
Fail
1.2
Fail
—
White BG
1.9Fail
1.4Fail
1.6Fail
3.5AA Large
4.3AA Large
Black BG
10.9AAA
15.1AAA
13.0AAA
6.1AA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABB75
DDDDAB
D7D79F
9F9E6B
8D8C59

Deuteranopia

BAB97B
DDDDAF
D9DBA2
A3A86C
90945A

Tritanopia

B5898D
DCB8BB
E1A9AC
B96E6F
A15E5F

Achromatopsia

B3B3B3
D6D6D6
CACACA
8B8B8B
7B7B7B

Shades & Tints Shades & Tints

#B4C35C

Dark
Light

#DCDF9A

Dark
Light

#E2C991

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4c35c;
  --color-2: #dcdf9a;
  --color-3: #e2c991;
  --color-4: #bc7966;
  --color-5: #a46e52;
}

SCSS

$color-1: #b4c35c;
$color-2: #dcdf9a;
$color-3: #e2c991;
$color-4: #bc7966;
$color-5: #a46e52;

TAILWIND

colors: {
  'brand-1': '#b4c35c',
  'brand-2': '#dcdf9a',
  'brand-3': '#e2c991',
  'brand-4': '#bc7966',
  'brand-5': '#a46e52',
}

RGB Array

[180, 195, 92], [220, 223, 154], [226, 201, 145], [188, 121, 102], [164, 110, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4C35C, #DCDF9A, #E2C991, #BC7966, #A46E52 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: #b4c35c; --color-2: #dcdf9a; --color-3: #e2c991; --color-4: #bc7966; --color-5: #a46e52. 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