← Back to Editor

#4D3E3B · #242D4A · #858758 · #746F76 · #E3D4BF

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 LibraryData Visualization

Color Details Color Details

#4D3E3B

Crimson · DarkSlateGray · Wine Red

HEX
#4D3E3B
RGB
rgb(77, 62, 59)
HSL
hsl(10, 13%, 27%)
HSB
hsb(10, 23%, 30%)
CMYK
cmyk(0%, 19%, 23%, 70%)
Oklch
oklch(37.9% 0.022 31.3)

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

#242D4A

Indigo · DarkSlateGray · Prussian Blue

HEX
#242D4A
RGB
rgb(36, 45, 74)
HSL
hsl(226, 35%, 22%)
HSB
hsb(226, 51%, 29%)
CMYK
cmyk(51%, 39%, 0%, 71%)
Oklch
oklch(30.4% 0.054 269.9)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#858758

Autumn Sage · Gray · Honey Gold

HEX
#858758
RGB
rgb(133, 135, 88)
HSL
hsl(63, 21%, 44%)
HSB
hsb(63, 35%, 53%)
CMYK
cmyk(1%, 0%, 35%, 47%)
Oklch
oklch(61.0% 0.066 110.3)

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

#746F76

Ink Gray · DimGray · Warm Gray

HEX
#746F76
RGB
rgb(116, 111, 118)
HSL
hsl(283, 3%, 45%)
HSB
hsb(283, 6%, 46%)
CMYK
cmyk(2%, 6%, 0%, 54%)
Oklch
oklch(54.9% 0.012 316.5)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#E3D4BF

Goose Yellow · Wheat · Peach Orange

HEX
#E3D4BF
RGB
rgb(227, 212, 191)
HSL
hsl(35, 39%, 82%)
HSB
hsb(35, 16%, 89%)
CMYK
cmyk(0%, 7%, 16%, 11%)
Oklch
oklch(87.7% 0.033 76.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D3E3B
3C4B4E

Analogous

4E3C42
4D3E3B
4E483C

Triadic

4D3E3B
3C4E3F
3F3C4E

Split-Comp.

4D3E3B
3C4E48
3C424E

Tetradic

4D3E3B
424E3C
3C4B4E
483C4E

Contrast Matrix WCAG 2.1 Contrast

4D3E3B
242D4A
858758
746F76
E3D4BF
—
1.3
Fail
2.7
Fail
2.1
Fail
7.0
AA
1.3
Fail
—
3.6
AA Large
2.8
Fail
9.3
AAA
2.7
Fail
3.6
AA Large
—
1.3
Fail
2.6
Fail
2.1
Fail
2.8
Fail
1.3
Fail
—
3.4
AA Large
7.0
AA
9.3
AAA
2.6
Fail
3.4
AA Large
—
White BG
10.2AAA
13.6AAA
3.7AA Large
4.9AA
1.5Fail
Black BG
2.1Fail
1.5Fail
5.6AA
4.3AA Large
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47463C
282843
868663
727274
DDDCC4

Deuteranopia

47493C
272741
868666
727274
DDDEC5

Tritanopia

4C3C3C
243D3C
856C6E
747373
E2C8C9

Achromatopsia

424242
2E2E2E
818181
717171
D6D6D6

Shades & Tints Shades & Tints

#4D3E3B

Dark
Light

#242D4A

Dark
Light

#858758

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d3e3b;
  --color-2: #242d4a;
  --color-3: #858758;
  --color-4: #746f76;
  --color-5: #e3d4bf;
}

SCSS

$color-1: #4d3e3b;
$color-2: #242d4a;
$color-3: #858758;
$color-4: #746f76;
$color-5: #e3d4bf;

TAILWIND

colors: {
  'brand-1': '#4d3e3b',
  'brand-2': '#242d4a',
  'brand-3': '#858758',
  'brand-4': '#746f76',
  'brand-5': '#e3d4bf',
}

RGB Array

[77, 62, 59], [36, 45, 74], [133, 135, 88], [116, 111, 118], [227, 212, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D3E3B, #242D4A, #858758, #746F76, #E3D4BF 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: #4d3e3b; --color-2: #242d4a; --color-3: #858758; --color-4: #746f76; --color-5: #e3d4bf. 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 general-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