← Back to Editor

#4D4F39 · #9F8621 · #C88917 · #DE8C1C · #DEC175

warm

A 5-color warm 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

#4D4F39

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#4D4F39
RGB
rgb(77, 79, 57)
HSL
hsl(65, 16%, 27%)
HSB
hsb(65, 28%, 31%)
CMYK
cmyk(3%, 0%, 28%, 69%)
Oklch
oklch(41.9% 0.035 112.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#9F8621

Ochre · DarkGoldenRod · Honey Gold

HEX
#9F8621
RGB
rgb(159, 134, 33)
HSL
hsl(48, 66%, 38%)
HSB
hsb(48, 79%, 62%)
CMYK
cmyk(0%, 16%, 79%, 38%)
Oklch
oklch(62.6% 0.117 94.2)

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

#C88917

Ochre · DarkGoldenRod · Amber Brown

HEX
#C88917
RGB
rgb(200, 137, 23)
HSL
hsl(39, 79%, 44%)
HSB
hsb(39, 89%, 78%)
CMYK
cmyk(0%, 32%, 89%, 22%)
Oklch
oklch(67.7% 0.137 74.9)

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

#DE8C1C

Ochre · GoldenRod · Amber Brown

HEX
#DE8C1C
RGB
rgb(222, 140, 28)
HSL
hsl(35, 78%, 49%)
HSB
hsb(35, 87%, 87%)
CMYK
cmyk(0%, 37%, 87%, 13%)
Oklch
oklch(70.9% 0.149 67.0)

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

#DEC175

Ginger · BurlyWood · Sunflower

HEX
#DEC175
RGB
rgb(222, 193, 117)
HSL
hsl(43, 61%, 66%)
HSB
hsb(43, 47%, 87%)
CMYK
cmyk(0%, 13%, 47%, 13%)
Oklch
oklch(81.9% 0.101 89.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D4F39
3C3A50

Analogous

50473A
4D4F39
43503A

Triadic

4D4F39
3A4E50
503A4E

Split-Comp.

4D4F39
3A4350
473A50

Tetradic

4D4F39
3A5047
3C3A50
503A43

Contrast Matrix WCAG 2.1 Contrast

4D4F39
9F8621
C88917
DE8C1C
DEC175
—
2.4
Fail
2.8
Fail
3.2
AA Large
4.8
AA
2.4
Fail
—
1.2
Fail
1.3
Fail
2.0
Fail
2.8
Fail
1.2
Fail
—
1.1
Fail
1.7
Fail
3.2
AA Large
1.3
Fail
1.1
Fail
—
1.5
Fail
4.8
AA
2.0
Fail
1.7
Fail
1.5
Fail
—
White BG
8.4AAA
3.6AA Large
3.0Fail
2.7Fail
1.8Fail
Black BG
2.5Fail
5.9AA
7.0AAA
7.9AAA
12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E3E
949439
ADAC33
BABA37
D1D187

Deuteranopia

4E4E40
96983F
B0B539
BFC53E
D3D58C

Tritanopia

4D4343
9E4D51
C5484D
DA4C51
DD9699

Achromatopsia

4C4C4C
828282
8F8F8F
989898
C1C1C1

Shades & Tints Shades & Tints

#4D4F39

Dark
Light

#9F8621

Dark
Light

#C88917

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d4f39;
  --color-2: #9f8621;
  --color-3: #c88917;
  --color-4: #de8c1c;
  --color-5: #dec175;
}

SCSS

$color-1: #4d4f39;
$color-2: #9f8621;
$color-3: #c88917;
$color-4: #de8c1c;
$color-5: #dec175;

TAILWIND

colors: {
  'brand-1': '#4d4f39',
  'brand-2': '#9f8621',
  'brand-3': '#c88917',
  'brand-4': '#de8c1c',
  'brand-5': '#dec175',
}

RGB Array

[77, 79, 57], [159, 134, 33], [200, 137, 23], [222, 140, 28], [222, 193, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #4D4F39, #9F8621, #C88917, #DE8C1C, #DEC175 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: #4d4f39; --color-2: #9f8621; --color-3: #c88917; --color-4: #de8c1c; --color-5: #dec175. 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 warm-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