#4D3E29 + #3D371F + #6A7C54 + #8B8139 + #DF8402 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4D3E29

Ochre · DarkOliveGreen · Cinnamon

HEX

#4D3E29

RGB

rgb(77, 62, 41)

HSL

hsl(35, 31%, 23%)

HSB

hsb(35, 47%, 30%)

CMYK

cmyk(0%, 19%, 47%, 70%)

Oklch

oklch(37.4% 0.039 75.4)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#3D371F

Ochre · DarkSlateGray · Amber Gold

HEX

#3D371F

RGB

rgb(61, 55, 31)

HSL

hsl(48, 33%, 18%)

HSB

hsb(48, 49%, 24%)

CMYK

cmyk(0%, 10%, 49%, 76%)

Oklch

oklch(33.6% 0.039 95.8)

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

#6A7C54

Grass Green · DimGray · Olive Green

HEX

#6A7C54

RGB

rgb(106, 124, 84)

HSL

hsl(87, 19%, 41%)

HSB

hsb(87, 32%, 49%)

CMYK

cmyk(15%, 0%, 32%, 51%)

Oklch

oklch(56.1% 0.063 128.0)

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

#8B8139

Autumn Sage · Sienna · Honey Gold

HEX

#8B8139

RGB

rgb(139, 129, 57)

HSL

hsl(53, 42%, 38%)

HSB

hsb(53, 59%, 55%)

CMYK

cmyk(0%, 7%, 59%, 45%)

Oklch

oklch(59.7% 0.094 101.5)

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

#DF8402

Ochre · DarkGoldenRod · Amber Brown

HEX

#DF8402

RGB

rgb(223, 132, 2)

HSL

hsl(35, 98%, 44%)

HSB

hsb(35, 99%, 87%)

CMYK

cmyk(0%, 41%, 99%, 13%)

Oklch

oklch(69.6% 0.157 63.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D3E29

28384D

Analogous

4D2B28

4D3E29

4A4D28

Triadic

4D3E29

284D3E

3E284D

Split-Comp.

4D3E29

284A4D

2B284D

Tetradic

4D3E29

284D2B

28384D

4D284A

Contrast Matrix WCAG 2.1 Contrast

4D3E29	3D371F	6A7C54	8B8139	DF8402
—	1.2 Fail	2.3 Fail	2.6 Fail	3.7 AA Large
1.2 Fail	—	2.6 Fail	3.0 AA Large	4.2 AA Large
2.3 Fail	2.6 Fail	—	1.1 Fail	1.6 Fail
2.6 Fail	3.0 AA Large	1.1 Fail	—	1.4 Fail
3.7 AA Large	4.2 AA Large	1.6 Fail	1.4 Fail	—

White BG

10.3AAA

11.9AAA

4.5AA

4.0AA Large

2.8Fail

Black BG

2.0Fail

1.8Fail

4.6AA

5.3AA

7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47462E

3A3A25

72725E

87874A

B8B721

Deuteranopia

47492F

3B3B26

716F60

87884F

BDC429

Tritanopia

4C3233

3D292A

6B6567

8A585B

DA3A40

Achromatopsia

404040

363636

727272

7C7C7C

909090

Shades & Tints Shades & Tints

#4D3E29

Dark

Light

#3D371F

Dark

Light

#6A7C54

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d3e29;
  --color-2: #3d371f;
  --color-3: #6a7c54;
  --color-4: #8b8139;
  --color-5: #df8402;
}

SCSS

$color-1: #4d3e29;
$color-2: #3d371f;
$color-3: #6a7c54;
$color-4: #8b8139;
$color-5: #df8402;

TAILWIND

colors: {
  'brand-1': '#4d3e29',
  'brand-2': '#3d371f',
  'brand-3': '#6a7c54',
  'brand-4': '#8b8139',
  'brand-5': '#df8402',
}

RGB Array

[77, 62, 41], [61, 55, 31], [106, 124, 84], [139, 129, 57], [223, 132, 2]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D3E29, #3D371F, #6A7C54, #8B8139, #DF8402 is ideal for: tech websites, dark mode UIs, game UIs. 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: #4d3e29; --color-2: #3d371f; --color-3: #6a7c54; --color-4: #8b8139; --color-5: #df8402. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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