← Back to Editor

#E2C955 · #E3B229 · #777A65 · #BDC7BC · #323A2B

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

#E2C955

Ginger · SandyBrown · Sunflower

HEX
#E2C955
RGB
rgb(226, 201, 85)
HSL
hsl(49, 71%, 61%)
HSB
hsb(49, 62%, 89%)
CMYK
cmyk(0%, 11%, 62%, 11%)
Oklch
oklch(83.5% 0.137 97.1)

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

#E3B229

Ginger · GoldenRod · Sunflower

HEX
#E3B229
RGB
rgb(227, 178, 41)
HSL
hsl(44, 77%, 53%)
HSB
hsb(44, 82%, 89%)
CMYK
cmyk(0%, 22%, 82%, 11%)
Oklch
oklch(78.7% 0.151 87.0)

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

#777A65

Autumn Sage · DimGray · Warm Gray

HEX
#777A65
RGB
rgb(119, 122, 101)
HSL
hsl(69, 9%, 44%)
HSB
hsb(69, 17%, 48%)
CMYK
cmyk(2%, 0%, 17%, 52%)
Oklch
oklch(57.1% 0.031 114.0)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

#BDC7BC

Celadon · Silver · Pearl Gray

HEX
#BDC7BC
RGB
rgb(189, 199, 188)
HSL
hsl(115, 9%, 76%)
HSB
hsb(115, 6%, 78%)
CMYK
cmyk(5%, 0%, 6%, 22%)
Oklch
oklch(81.9% 0.019 142.8)

Traditional「Celadon」· Paint「Pearl Gray」· Creative Silver Lining

#323A2B

Celadon · DarkSlateGray · Dark Green

HEX
#323A2B
RGB
rgb(50, 58, 43)
HSL
hsl(92, 15%, 20%)
HSB
hsb(92, 26%, 23%)
CMYK
cmyk(14%, 0%, 26%, 77%)
Oklch
oklch(33.6% 0.028 130.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2C955
556FE2

Analogous

E28255
E2C955
B5E255

Triadic

E2C955
55E2C8
C855E2

Split-Comp.

E2C955
55B5E2
8255E2

Tetradic

E2C955
55E282
556FE2
E255B5

Contrast Matrix WCAG 2.1 Contrast

E2C955
E3B229
777A65
BDC7BC
323A2B
—
1.2
Fail
2.7
Fail
1.1
Fail
7.2
AAA
1.2
Fail
—
2.2
Fail
1.1
Fail
6.0
AA
2.7
Fail
2.2
Fail
—
2.5
Fail
2.7
Fail
1.1
Fail
1.1
Fail
2.5
Fail
—
6.8
AA
7.2
AAA
6.0
AA
2.7
Fail
6.8
AA
—
White BG
1.7Fail
2.0Fail
4.4AA Large
1.7Fail
11.8AAA
Black BG
12.7AAA
10.7AAA
4.8AA
12.1AAA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D771
CECD4A
78786A
C1C1BF
35362F

Deuteranopia

D9DB78
D1D452
78786B
C1C0BF
353430

Tritanopia

E1878C
E1646A
776E6F
BDC1C1
323132

Achromatopsia

C3C3C3
B1B1B1
777777
C3C3C3
363636

Shades & Tints Shades & Tints

#E2C955

Dark
Light

#E3B229

Dark
Light

#777A65

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2c955;
  --color-2: #e3b229;
  --color-3: #777a65;
  --color-4: #bdc7bc;
  --color-5: #323a2b;
}

SCSS

$color-1: #e2c955;
$color-2: #e3b229;
$color-3: #777a65;
$color-4: #bdc7bc;
$color-5: #323a2b;

TAILWIND

colors: {
  'brand-1': '#e2c955',
  'brand-2': '#e3b229',
  'brand-3': '#777a65',
  'brand-4': '#bdc7bc',
  'brand-5': '#323a2b',
}

RGB Array

[226, 201, 85], [227, 178, 41], [119, 122, 101], [189, 199, 188], [50, 58, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2C955, #E3B229, #777A65, #BDC7BC, #323A2B 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: #e2c955; --color-2: #e3b229; --color-3: #777a65; --color-4: #bdc7bc; --color-5: #323a2b. 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