← Back to Editor

#D94E31 · #59464A · #6E9C80 · #B8BD87 · #EFD46D

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

#D94E31

Vermilion · Chocolate · Passion Red

HEX
#D94E31
RGB
rgb(217, 78, 49)
HSL
hsl(10, 69%, 52%)
HSB
hsb(10, 77%, 85%)
CMYK
cmyk(0%, 64%, 77%, 15%)
Oklch
oklch(60.9% 0.180 33.5)

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

#59464A

Crimson · DarkSlateGray · Wine Red

HEX
#59464A
RGB
rgb(89, 70, 74)
HSL
hsl(347, 12%, 31%)
HSB
hsb(347, 21%, 35%)
CMYK
cmyk(0%, 21%, 17%, 65%)
Oklch
oklch(41.5% 0.027 4.2)

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

#6E9C80

Celadon · SlateGray · Olive Green

HEX
#6E9C80
RGB
rgb(110, 156, 128)
HSL
hsl(143, 19%, 52%)
HSB
hsb(143, 29%, 61%)
CMYK
cmyk(29%, 0%, 18%, 39%)
Oklch
oklch(65.1% 0.065 157.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B8BD87

Fresh Green · Tan · Sunflower

HEX
#B8BD87
RGB
rgb(184, 189, 135)
HSL
hsl(66, 29%, 64%)
HSB
hsb(66, 29%, 74%)
CMYK
cmyk(3%, 0%, 29%, 26%)
Oklch
oklch(78.1% 0.073 112.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#EFD46D

Ginger · Khaki · Sunflower

HEX
#EFD46D
RGB
rgb(239, 212, 109)
HSL
hsl(48, 80%, 68%)
HSB
hsb(48, 54%, 94%)
CMYK
cmyk(0%, 11%, 54%, 6%)
Oklch
oklch(87.2% 0.127 94.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D94E31
30BDD9

Analogous

D93068
D94E31
D9A130

Triadic

D94E31
30D94C
4C30D9

Split-Comp.

D94E31
30D9A1
3068D9

Tetradic

D94E31
68D930
30BDD9
A130D9

Contrast Matrix WCAG 2.1 Contrast

D94E31
59464A
6E9C80
B8BD87
EFD46D
—
2.1
Fail
1.3
Fail
2.1
Fail
2.8
Fail
2.1
Fail
—
2.8
Fail
4.4
AA Large
6.0
AA
1.3
Fail
2.8
Fail
—
1.6
Fail
2.1
Fail
2.1
Fail
4.4
AA Large
1.6
Fail
—
1.3
Fail
2.8
Fail
6.0
AA
2.1
Fail
1.3
Fail
—
White BG
4.1AA Large
8.8AAA
3.1AA Large
2.0Fail
1.5Fail
Black BG
5.1AA
2.4Fail
6.7AA
10.7AAA
14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9C38
515149
828287
BABA94
E3E386

Deuteranopia

A5AF3A
525349
7F7C88
BAB997
E5E78C

Tritanopia

D23E3F
584848
708C8D
B89EA1
EE9A9E

Achromatopsia

747474
4C4C4C
8B8B8B
B5B5B5
D0D0D0

Shades & Tints Shades & Tints

#D94E31

Dark
Light

#59464A

Dark
Light

#6E9C80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d94e31;
  --color-2: #59464a;
  --color-3: #6e9c80;
  --color-4: #b8bd87;
  --color-5: #efd46d;
}

SCSS

$color-1: #d94e31;
$color-2: #59464a;
$color-3: #6e9c80;
$color-4: #b8bd87;
$color-5: #efd46d;

TAILWIND

colors: {
  'brand-1': '#d94e31',
  'brand-2': '#59464a',
  'brand-3': '#6e9c80',
  'brand-4': '#b8bd87',
  'brand-5': '#efd46d',
}

RGB Array

[217, 78, 49], [89, 70, 74], [110, 156, 128], [184, 189, 135], [239, 212, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D94E31, #59464A, #6E9C80, #B8BD87, #EFD46D 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: #d94e31; --color-2: #59464a; --color-3: #6e9c80; --color-4: #b8bd87; --color-5: #efd46d. 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