← Back to Editor

#E6CD68 · #CD8742 · #BB552F · #8F8955 · #544D45

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

#E6CD68

Ginger · BurlyWood · Sunflower

HEX
#E6CD68
RGB
rgb(230, 205, 104)
HSL
hsl(48, 72%, 65%)
HSB
hsb(48, 55%, 90%)
CMYK
cmyk(0%, 11%, 55%, 10%)
Oklch
oklch(84.9% 0.124 95.7)

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

#CD8742

Ginger · Chocolate · Warm Sun

HEX
#CD8742
RGB
rgb(205, 135, 66)
HSL
hsl(30, 58%, 53%)
HSB
hsb(30, 68%, 80%)
CMYK
cmyk(0%, 34%, 68%, 20%)
Oklch
oklch(68.2% 0.120 62.8)

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

#BB552F

Tangerine · Sienna · Amber Brown

HEX
#BB552F
RGB
rgb(187, 85, 47)
HSL
hsl(16, 60%, 46%)
HSB
hsb(16, 75%, 73%)
CMYK
cmyk(0%, 55%, 75%, 27%)
Oklch
oklch(57.1% 0.142 40.1)

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

#8F8955

Autumn Sage · Gray · Honey Gold

HEX
#8F8955
RGB
rgb(143, 137, 85)
HSL
hsl(54, 25%, 45%)
HSB
hsb(54, 41%, 56%)
CMYK
cmyk(0%, 4%, 41%, 44%)
Oklch
oklch(62.3% 0.072 102.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#544D45

Ochre · DarkOliveGreen · Amber Brown

HEX
#544D45
RGB
rgb(84, 77, 69)
HSL
hsl(32, 10%, 30%)
HSB
hsb(32, 18%, 33%)
CMYK
cmyk(0%, 8%, 18%, 67%)
Oklch
oklch(42.5% 0.016 71.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E6CD68
657FE6

Analogous

E68C65
E6CD68
BFE665

Triadic

E6CD68
65E6CC
CC65E6

Split-Comp.

E6CD68
65BFE6
8C65E6

Tetradic

E6CD68
65E68C
657FE6
E665BF

Contrast Matrix WCAG 2.1 Contrast

E6CD68
CD8742
BB552F
8F8955
544D45
—
1.9
Fail
3.0
Fail
2.3
Fail
5.3
AA
1.9
Fail
—
1.6
Fail
1.2
Fail
2.8
Fail
3.0
Fail
1.6
Fail
—
1.3
Fail
1.8
Fail
2.3
Fail
1.2
Fail
1.3
Fail
—
2.3
Fail
5.3
AA
2.8
Fail
1.8
Fail
2.3
Fail
—
White BG
1.6Fail
2.9Fail
4.7AA
3.6AA Large
8.3AAA
Black BG
13.3AAA
7.1AAA
4.5AA Large
5.9AA
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDB80
AFAE53
8F8E38
8C8C62
515147

Deuteranopia

DDDF86
B3B857
959C3A
8D8D65
515247

Tritanopia

E59498
CA6063
B63F41
8F6C6E
544849

Achromatopsia

C9C9C9
949494
6F6F6F
858585
4E4E4E

Shades & Tints Shades & Tints

#E6CD68

Dark
Light

#CD8742

Dark
Light

#BB552F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e6cd68;
  --color-2: #cd8742;
  --color-3: #bb552f;
  --color-4: #8f8955;
  --color-5: #544d45;
}

SCSS

$color-1: #e6cd68;
$color-2: #cd8742;
$color-3: #bb552f;
$color-4: #8f8955;
$color-5: #544d45;

TAILWIND

colors: {
  'brand-1': '#e6cd68',
  'brand-2': '#cd8742',
  'brand-3': '#bb552f',
  'brand-4': '#8f8955',
  'brand-5': '#544d45',
}

RGB Array

[230, 205, 104], [205, 135, 66], [187, 85, 47], [143, 137, 85], [84, 77, 69]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E6CD68, #CD8742, #BB552F, #8F8955, #544D45 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: #e6cd68; --color-2: #cd8742; --color-3: #bb552f; --color-4: #8f8955; --color-5: #544d45. 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