← Back to Editor

#ECD379 · #C3B868 · #988662 · #7A584F · #D96450

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

#ECD379

Ginger · Khaki · Sunflower

HEX
#ECD379
RGB
rgb(236, 211, 121)
HSL
hsl(47, 75%, 70%)
HSB
hsb(47, 49%, 93%)
CMYK
cmyk(0%, 11%, 49%, 7%)
Oklch
oklch(86.9% 0.114 94.3)

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

#C3B868

Autumn Sage · Tan · Sunflower

HEX
#C3B868
RGB
rgb(195, 184, 104)
HSL
hsl(53, 43%, 59%)
HSB
hsb(53, 47%, 76%)
CMYK
cmyk(0%, 6%, 47%, 24%)
Oklch
oklch(77.4% 0.102 101.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#988662

Ochre · Gray · Honey Gold

HEX
#988662
RGB
rgb(152, 134, 98)
HSL
hsl(40, 22%, 49%)
HSB
hsb(40, 36%, 60%)
CMYK
cmyk(0%, 12%, 36%, 40%)
Oklch
oklch(62.7% 0.055 84.3)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#7A584F

Crimson · DimGray · Wine Red

HEX
#7A584F
RGB
rgb(122, 88, 79)
HSL
hsl(13, 21%, 39%)
HSB
hsb(13, 35%, 48%)
CMYK
cmyk(0%, 28%, 35%, 52%)
Oklch
oklch(49.4% 0.048 35.4)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#D96450

Vermilion · Tomato · Passion Red

HEX
#D96450
RGB
rgb(217, 100, 80)
HSL
hsl(9, 64%, 58%)
HSB
hsb(9, 63%, 85%)
CMYK
cmyk(0%, 54%, 63%, 15%)
Oklch
oklch(64.2% 0.151 31.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECD379
7992EC

Analogous

EC9A79
ECD379
CBEC79

Triadic

ECD379
79ECD3
D379EC

Split-Comp.

ECD379
79CBEC
9A79EC

Tetradic

ECD379
79EC9A
7992EC
EC79CB

Contrast Matrix WCAG 2.1 Contrast

ECD379
C3B868
988662
7A584F
D96450
—
1.4
Fail
2.4
Fail
4.2
AA Large
2.4
Fail
1.4
Fail
—
1.8
Fail
3.1
AA Large
1.8
Fail
2.4
Fail
1.8
Fail
—
1.8
Fail
1.0
Fail
4.2
AA Large
3.1
AA Large
1.8
Fail
—
1.8
Fail
2.4
Fail
1.8
Fail
1.0
Fail
1.8
Fail
—
White BG
1.5Fail
2.0Fail
3.5AA Large
6.3AA
3.6AA Large
Black BG
14.2AAA
10.4AAA
5.9AA
3.3AA Large
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E18F
BEBE7B
90906B
6B6B51
A6A555

Deuteranopia

E3E594
BFC080
91936D
6D7052
ADB656

Tritanopia

EBA0A4
C28B8E
977273
785353
D3595A

Achromatopsia

D0D0D0
B2B2B2
878787
616161
858585

Shades & Tints Shades & Tints

#ECD379

Dark
Light

#C3B868

Dark
Light

#988662

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecd379;
  --color-2: #c3b868;
  --color-3: #988662;
  --color-4: #7a584f;
  --color-5: #d96450;
}

SCSS

$color-1: #ecd379;
$color-2: #c3b868;
$color-3: #988662;
$color-4: #7a584f;
$color-5: #d96450;

TAILWIND

colors: {
  'brand-1': '#ecd379',
  'brand-2': '#c3b868',
  'brand-3': '#988662',
  'brand-4': '#7a584f',
  'brand-5': '#d96450',
}

RGB Array

[236, 211, 121], [195, 184, 104], [152, 134, 98], [122, 88, 79], [217, 100, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECD379, #C3B868, #988662, #7A584F, #D96450 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: #ecd379; --color-2: #c3b868; --color-3: #988662; --color-4: #7a584f; --color-5: #d96450. 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