← Back to Editor

#8E8D6E · #BDB390 · #F9884E · #CB6C4E · #455258

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

#8E8D6E

Autumn Sage · Gray · Honey Gold

HEX
#8E8D6E
RGB
rgb(142, 141, 110)
HSL
hsl(58, 13%, 49%)
HSB
hsb(58, 23%, 56%)
CMYK
cmyk(0%, 1%, 23%, 44%)
Oklch
oklch(63.6% 0.044 106.1)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#BDB390

Ginger · Tan · Sunflower

HEX
#BDB390
RGB
rgb(189, 179, 144)
HSL
hsl(47, 25%, 65%)
HSB
hsb(47, 24%, 74%)
CMYK
cmyk(0%, 5%, 24%, 26%)
Oklch
oklch(76.6% 0.049 94.0)

TraditionalGinger」· PaintSunflower」· Creative Lemon Fizz

#F9884E

Apricot · Coral · Warm Sun

HEX
#F9884E
RGB
rgb(249, 136, 78)
HSL
hsl(20, 93%, 64%)
HSB
hsb(20, 69%, 98%)
CMYK
cmyk(0%, 45%, 69%, 2%)
Oklch
oklch(74.1% 0.156 46.3)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#CB6C4E

Crimson · Chocolate · Passion Red

HEX
#CB6C4E
RGB
rgb(203, 108, 78)
HSL
hsl(14, 55%, 55%)
HSB
hsb(14, 62%, 80%)
CMYK
cmyk(0%, 47%, 62%, 20%)
Oklch
oklch(63.4% 0.128 38.2)

TraditionalCrimson」· PaintPassion Red」· Creative Blush Sunrise

#455258

Slate Blue · DarkSlateGray · Mint Ice

HEX
#455258
RGB
rgb(69, 82, 88)
HSL
hsl(199, 12%, 31%)
HSB
hsb(199, 22%, 35%)
CMYK
cmyk(22%, 7%, 0%, 65%)
Oklch
oklch(43.0% 0.019 227.4)

TraditionalSlate Blue」· PaintMint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8E8D6E
6D6E8D

Analogous

8D7C6D
8E8D6E
7E8D6D

Triadic

8E8D6E
6D8D8C
8C6D8D

Split-Comp.

8E8D6E
6D7E8D
7C6D8D

Tetradic

8E8D6E
6D8D7C
6D6E8D
8D6D7E

Contrast Matrix WCAG 2.1 Contrast

8E8D6E
BDB390
F9884E
CB6C4E
455258
1.6
Fail
1.4
Fail
1.1
Fail
2.4
Fail
1.6
Fail
1.2
Fail
1.7
Fail
3.9
AA Large
1.4
Fail
1.2
Fail
1.5
Fail
3.3
AA Large
1.1
Fail
1.7
Fail
1.5
Fail
2.2
Fail
2.4
Fail
3.9
AA Large
3.3
AA Large
2.2
Fail
White BG
3.4AA Large
2.1Fail
2.4Fail
3.6AA Large
8.1AAA
Black BG
6.2AA
10.0AAA
8.7AAA
5.8AA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8E76
B9B998
C8C75C
A2A155
4B4B57

Deuteranopia

8E8E77
B9BA9B
CFD75F
A7AF57
4A4956

Tritanopia

8E7B7D
BC9FA1
F3676A
C65B5C
465555

Achromatopsia

8A8A8A
B2B2B2
A3A3A3
858585
4F4F4F

Shades & Tints Shades & Tints

#8E8D6E

Dark
Light

#BDB390

Dark
Light

#F9884E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8e8d6e;
  --color-2: #bdb390;
  --color-3: #f9884e;
  --color-4: #cb6c4e;
  --color-5: #455258;
}

SCSS

$color-1: #8e8d6e;
$color-2: #bdb390;
$color-3: #f9884e;
$color-4: #cb6c4e;
$color-5: #455258;

TAILWIND

colors: {
  'brand-1': '#8e8d6e',
  'brand-2': '#bdb390',
  'brand-3': '#f9884e',
  'brand-4': '#cb6c4e',
  'brand-5': '#455258',
}

RGB Array

[142, 141, 110], [189, 179, 144], [249, 136, 78], [203, 108, 78], [69, 82, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8E8D6E, #BDB390, #F9884E, #CB6C4E, #455258 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: #8e8d6e; --color-2: #bdb390; --color-3: #f9884e; --color-4: #cb6c4e; --color-5: #455258. 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