← Back to Editor

#8E8A79 · #CEDFB3 · #EA2709 · #F5B53A · #D09843

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

#8E8A79

Ginger · Gray · Warm Gray

HEX
#8E8A79
RGB
rgb(142, 138, 121)
HSL
hsl(49, 9%, 52%)
HSB
hsb(49, 15%, 56%)
CMYK
cmyk(0%, 3%, 15%, 44%)
Oklch
oklch(63.2% 0.025 96.1)

Traditional「Ginger」· Paint「Warm Gray」· Creative Urban Concrete

#CEDFB3

Willow Green · LightGray · Apple Green

HEX
#CEDFB3
RGB
rgb(206, 223, 179)
HSL
hsl(83, 41%, 79%)
HSB
hsb(83, 20%, 87%)
CMYK
cmyk(8%, 0%, 20%, 13%)
Oklch
oklch(88.0% 0.061 124.8)

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

#EA2709

Vermilion · OrangeRed · Passion Red

HEX
#EA2709
RGB
rgb(234, 39, 9)
HSL
hsl(8, 93%, 48%)
HSB
hsb(8, 96%, 92%)
CMYK
cmyk(0%, 83%, 96%, 8%)
Oklch
oklch(60.2% 0.229 31.1)

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

#F5B53A

Ginger · GoldenRod · Warm Sun

HEX
#F5B53A
RGB
rgb(245, 181, 58)
HSL
hsl(39, 90%, 59%)
HSB
hsb(39, 76%, 96%)
CMYK
cmyk(0%, 26%, 76%, 4%)
Oklch
oklch(81.3% 0.150 79.3)

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

#D09843

Ginger · GoldenRod · Warm Sun

HEX
#D09843
RGB
rgb(208, 152, 67)
HSL
hsl(36, 60%, 54%)
HSB
hsb(36, 68%, 82%)
CMYK
cmyk(0%, 27%, 68%, 18%)
Oklch
oklch(71.8% 0.121 74.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8E8A79
7A7E90

Analogous

90817A
8E8A79
89907A

Triadic

8E8A79
7A908C
8C7A90

Split-Comp.

8E8A79
7A8990
817A90

Tetradic

8E8A79
7A9081
7A7E90
907A89

Contrast Matrix WCAG 2.1 Contrast

8E8A79
CEDFB3
EA2709
F5B53A
D09843
—
2.4
Fail
1.3
Fail
1.9
Fail
1.4
Fail
2.4
Fail
—
3.1
AA Large
1.3
Fail
1.8
Fail
1.3
Fail
3.1
AA Large
—
2.4
Fail
1.7
Fail
1.9
Fail
1.3
Fail
2.4
Fail
—
1.4
Fail
1.4
Fail
1.8
Fail
1.7
Fail
1.4
Fail
—
White BG
3.5AA Large
1.4Fail
4.4AA Large
1.8Fail
2.5Fail
Black BG
6.1AA
14.8AAA
4.8AA
11.6AAA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C7D
D5D6BE
969410
D9D958
B8B758

Deuteranopia

8D8D7E
D4D3C0
A1AF12
DDE25F
BBBF5D

Tritanopia

8E8081
CFC6C8
E01617
F26F74
CD686B

Achromatopsia

898989
D5D5D5
5E5E5E
BABABA
9F9F9F

Shades & Tints Shades & Tints

#8E8A79

Dark
Light

#CEDFB3

Dark
Light

#EA2709

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8e8a79;
  --color-2: #cedfb3;
  --color-3: #ea2709;
  --color-4: #f5b53a;
  --color-5: #d09843;
}

SCSS

$color-1: #8e8a79;
$color-2: #cedfb3;
$color-3: #ea2709;
$color-4: #f5b53a;
$color-5: #d09843;

TAILWIND

colors: {
  'brand-1': '#8e8a79',
  'brand-2': '#cedfb3',
  'brand-3': '#ea2709',
  'brand-4': '#f5b53a',
  'brand-5': '#d09843',
}

RGB Array

[142, 138, 121], [206, 223, 179], [234, 39, 9], [245, 181, 58], [208, 152, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8E8A79, #CEDFB3, #EA2709, #F5B53A, #D09843 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: #8e8a79; --color-2: #cedfb3; --color-3: #ea2709; --color-4: #f5b53a; --color-5: #d09843. 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