← Back to Editor

#EDB75A · #998667 · #C2B684 · #5A545E · #8FB3A4

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

#EDB75A

Ginger · SandyBrown · Warm Sun

HEX
#EDB75A
RGB
rgb(237, 183, 90)
HSL
hsl(38, 80%, 64%)
HSB
hsb(38, 62%, 93%)
CMYK
cmyk(0%, 23%, 62%, 7%)
Oklch
oklch(81.1% 0.126 78.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#998667

Ochre · Gray · Amber Brown

HEX
#998667
RGB
rgb(153, 134, 103)
HSL
hsl(37, 20%, 50%)
HSB
hsb(37, 33%, 60%)
CMYK
cmyk(0%, 12%, 33%, 40%)
Oklch
oklch(62.9% 0.050 79.8)

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

#C2B684

Ginger · Tan · Sunflower

HEX
#C2B684
RGB
rgb(194, 182, 132)
HSL
hsl(48, 34%, 64%)
HSB
hsb(48, 32%, 76%)
CMYK
cmyk(0%, 6%, 32%, 24%)
Oklch
oklch(77.4% 0.068 96.2)

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

#5A545E

Ink Gray · DimGray · Charcoal

HEX
#5A545E
RGB
rgb(90, 84, 94)
HSL
hsl(276, 6%, 35%)
HSB
hsb(276, 11%, 37%)
CMYK
cmyk(4%, 11%, 0%, 63%)
Oklch
oklch(45.5% 0.018 312.1)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#8FB3A4

Jade · DarkSeaGreen · Apple Green

HEX
#8FB3A4
RGB
rgb(143, 179, 164)
HSL
hsl(155, 19%, 63%)
HSB
hsb(155, 20%, 70%)
CMYK
cmyk(20%, 0%, 8%, 30%)
Oklch
oklch(73.6% 0.045 167.8)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EDB75A
5A90ED

Analogous

ED6D5A
EDB75A
D9ED5A

Triadic

EDB75A
5AEDB7
B75AED

Split-Comp.

EDB75A
5AD9ED
6D5AED

Tetradic

EDB75A
5AED6D
5A90ED
ED5AD9

Contrast Matrix WCAG 2.1 Contrast

EDB75A
998667
C2B684
5A545E
8FB3A4
—
1.9
Fail
1.1
Fail
4.0
AA Large
1.3
Fail
1.9
Fail
—
1.7
Fail
2.1
Fail
1.5
Fail
1.1
Fail
1.7
Fail
—
3.6
AA Large
1.1
Fail
4.0
AA Large
2.1
Fail
3.6
AA Large
—
3.2
AA Large
1.3
Fail
1.5
Fail
1.1
Fail
3.2
AA Large
—
White BG
1.8Fail
3.5AA Large
2.0Fail
7.3AAA
2.3Fail
Black BG
11.5AAA
6.0AA
10.3AAA
2.9Fail
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D571
91916F
BDBD90
57575C
9F9FA8

Deuteranopia

D9DD76
929370
BEBE93
58585B
9D9AA9

Tritanopia

EA8286
987476
C19A9C
5A5A59
91AAAB

Achromatopsia

BDBDBD
888888
B4B4B4
575757
A7A7A7

Shades & Tints Shades & Tints

#EDB75A

Dark
Light

#998667

Dark
Light

#C2B684

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #edb75a;
  --color-2: #998667;
  --color-3: #c2b684;
  --color-4: #5a545e;
  --color-5: #8fb3a4;
}

SCSS

$color-1: #edb75a;
$color-2: #998667;
$color-3: #c2b684;
$color-4: #5a545e;
$color-5: #8fb3a4;

TAILWIND

colors: {
  'brand-1': '#edb75a',
  'brand-2': '#998667',
  'brand-3': '#c2b684',
  'brand-4': '#5a545e',
  'brand-5': '#8fb3a4',
}

RGB Array

[237, 183, 90], [153, 134, 103], [194, 182, 132], [90, 84, 94], [143, 179, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EDB75A, #998667, #C2B684, #5A545E, #8FB3A4 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: #edb75a; --color-2: #998667; --color-3: #c2b684; --color-4: #5a545e; --color-5: #8fb3a4. 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