#4E3B37 + #7F641F + #AD660E + #DE4F01 + #B2B27C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4E3B37

Crimson · DarkSlateGray · Wine Red

HEX

#4E3B37

RGB

rgb(78, 59, 55)

HSL

hsl(10, 17%, 26%)

HSB

hsb(10, 29%, 31%)

CMYK

cmyk(0%, 24%, 29%, 69%)

Oklch

oklch(37.2% 0.028 32.0)

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

#7F641F

Ochre · Sienna · Honey Gold

HEX

#7F641F

RGB

rgb(127, 100, 31)

HSL

hsl(43, 61%, 31%)

HSB

hsb(43, 76%, 50%)

CMYK

cmyk(0%, 21%, 76%, 50%)

Oklch

oklch(51.7% 0.092 86.7)

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

#AD660E

Ochre · DarkGoldenRod · Amber Brown

HEX

#AD660E

RGB

rgb(173, 102, 14)

HSL

hsl(33, 85%, 37%)

HSB

hsb(33, 92%, 68%)

CMYK

cmyk(0%, 41%, 92%, 32%)

Oklch

oklch(57.7% 0.127 63.1)

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

#DE4F01

Tangerine · OrangeRed · Amber Brown

HEX

#DE4F01

RGB

rgb(222, 79, 1)

HSL

hsl(21, 99%, 44%)

HSB

hsb(21, 100%, 87%)

CMYK

cmyk(0%, 64%, 100%, 13%)

Oklch

oklch(61.6% 0.191 40.5)

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

#B2B27C

Autumn Sage · Tan · Sunflower

HEX

#B2B27C

RGB

rgb(178, 178, 124)

HSL

hsl(60, 26%, 59%)

HSB

hsb(60, 30%, 70%)

CMYK

cmyk(0%, 0%, 30%, 30%)

Oklch

oklch(75.0% 0.073 108.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4E3B37

374A4E

Analogous

4E373F

4E3B37

4E4637

Triadic

4E3B37

374E3B

3B374E

Split-Comp.

4E3B37

374E46

373F4E

Tetradic

4E3B37

3F4E37

374A4E

46374E

Contrast Matrix WCAG 2.1 Contrast

4E3B37	7F641F	AD660E	DE4F01	B2B27C
—	1.9 Fail	2.3 Fail	2.6 Fail	4.8 AA
1.9 Fail	—	1.3 Fail	1.4 Fail	2.6 Fail
2.3 Fail	1.3 Fail	—	1.1 Fail	2.0 Fail
2.6 Fail	1.4 Fail	1.1 Fail	—	1.8 Fail
4.8 AA	2.6 Fail	2.0 Fail	1.8 Fail	—

White BG

10.5AAA

5.6AA

4.5AA Large

4.0AA Large

2.2Fail

Black BG

2.0Fail

3.7AA Large

4.7AA

5.2AA

9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

464638

737330

8E8E23

A09F14

B2B289

Deuteranopia

474838

757734

929828

A8B318

B2B28C

Tritanopia

4D3939

7E3D40

A93438

D72326

B29396

Achromatopsia

404040

646464

717171

ACACAC

Shades & Tints Shades & Tints

#4E3B37

Dark

Light

#7F641F

Dark

Light

#AD660E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4e3b37;
  --color-2: #7f641f;
  --color-3: #ad660e;
  --color-4: #de4f01;
  --color-5: #b2b27c;
}

SCSS

$color-1: #4e3b37;
$color-2: #7f641f;
$color-3: #ad660e;
$color-4: #de4f01;
$color-5: #b2b27c;

TAILWIND

colors: {
  'brand-1': '#4e3b37',
  'brand-2': '#7f641f',
  'brand-3': '#ad660e',
  'brand-4': '#de4f01',
  'brand-5': '#b2b27c',
}

RGB Array

[78, 59, 55], [127, 100, 31], [173, 102, 14], [222, 79, 1], [178, 178, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4E3B37, #7F641F, #AD660E, #DE4F01, #B2B27C 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: #4e3b37; --color-2: #7f641f; --color-3: #ad660e; --color-4: #de4f01; --color-5: #b2b27c. 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