← Back to Editor

#4D4D4F · #817461 · #D0B077 · #DCD0BA · #B3A38C

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#4D4D4F

Ink Gray · DarkSlateGray · Charcoal

HEX
#4D4D4F
RGB
rgb(77, 77, 79)
HSL
hsl(240, 1%, 31%)
HSB
hsb(240, 3%, 31%)
CMYK
cmyk(3%, 3%, 0%, 69%)
Oklch
oklch(42.1% 0.003 286.3)

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

#817461

Ochre · DimGray · Amber Brown

HEX
#817461
RGB
rgb(129, 116, 97)
HSL
hsl(36, 14%, 44%)
HSB
hsb(36, 25%, 51%)
CMYK
cmyk(0%, 10%, 25%, 49%)
Oklch
oklch(56.6% 0.032 77.3)

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

#D0B077

Ginger · Tan · Warm Sun

HEX
#D0B077
RGB
rgb(208, 176, 119)
HSL
hsl(38, 49%, 64%)
HSB
hsb(38, 43%, 82%)
CMYK
cmyk(0%, 15%, 43%, 18%)
Oklch
oklch(77.2% 0.083 81.4)

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

#DCD0BA

Goose Yellow · LightGray · Peach Orange

HEX
#DCD0BA
RGB
rgb(220, 208, 186)
HSL
hsl(39, 33%, 80%)
HSB
hsb(39, 15%, 86%)
CMYK
cmyk(0%, 5%, 15%, 14%)
Oklch
oklch(86.1% 0.033 82.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#B3A38C

Ginger · DarkGray · Warm Sun

HEX
#B3A38C
RGB
rgb(179, 163, 140)
HSL
hsl(35, 20%, 63%)
HSB
hsb(35, 22%, 70%)
CMYK
cmyk(0%, 9%, 22%, 30%)
Oklch
oklch(72.3% 0.037 77.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D4D4F
50504E

Analogous

4E4F50
4D4D4F
4F4E50

Triadic

4D4D4F
504E4E
4E504E

Split-Comp.

4D4D4F
504F4E
4F504E

Tetradic

4D4D4F
504E4F
50504E
4E504F

Contrast Matrix WCAG 2.1 Contrast

4D4D4F
817461
D0B077
DCD0BA
B3A38C
—
1.8
Fail
4.1
AA Large
5.5
AA
3.4
AA Large
1.8
Fail
—
2.2
Fail
3.0
Fail
1.9
Fail
4.1
AA Large
2.2
Fail
—
1.4
Fail
1.2
Fail
5.5
AA
3.0
Fail
1.4
Fail
—
1.6
Fail
3.4
AA Large
1.9
Fail
1.2
Fail
1.6
Fail
—
White BG
8.4AAA
4.6AA
2.1Fail
1.5Fail
2.5Fail
Black BG
2.5Fail
4.6AA
10.2AAA
13.8AAA
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4D4F
7B7B66
C2C285
D7D7BF
ACAC92

Deuteranopia

4D4D4E
7C7D67
C4C688
D8D8C1
ADAE93

Tritanopia

4D4E4E
80696A
CE9092
DBC4C4
B29697

Achromatopsia

4D4D4D
767676
B3B3B3
D1D1D1
A5A5A5

Shades & Tints Shades & Tints

#4D4D4F

Dark
Light

#817461

Dark
Light

#D0B077

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d4d4f;
  --color-2: #817461;
  --color-3: #d0b077;
  --color-4: #dcd0ba;
  --color-5: #b3a38c;
}

SCSS

$color-1: #4d4d4f;
$color-2: #817461;
$color-3: #d0b077;
$color-4: #dcd0ba;
$color-5: #b3a38c;

TAILWIND

colors: {
  'brand-1': '#4d4d4f',
  'brand-2': '#817461',
  'brand-3': '#d0b077',
  'brand-4': '#dcd0ba',
  'brand-5': '#b3a38c',
}

RGB Array

[77, 77, 79], [129, 116, 97], [208, 176, 119], [220, 208, 186], [179, 163, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #4D4D4F, #817461, #D0B077, #DCD0BA, #B3A38C is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4d4d4f; --color-2: #817461; --color-3: #d0b077; --color-4: #dcd0ba; --color-5: #b3a38c. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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