← Back to Editor

#2F391E · #4B4F36 · #E1CAA8 · #B57E3B · #5D3F37

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2F391E

Grass Green · DarkSlateGray · Dark Green

HEX
#2F391E
RGB
rgb(47, 57, 30)
HSL
hsl(82, 31%, 17%)
HSB
hsb(82, 47%, 22%)
CMYK
cmyk(18%, 0%, 47%, 78%)
Oklch
oklch(32.8% 0.046 125.5)

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

#4B4F36

Grass Green · DarkOliveGreen · Forest Green

HEX
#4B4F36
RGB
rgb(75, 79, 54)
HSL
hsl(70, 19%, 26%)
HSB
hsb(70, 32%, 31%)
CMYK
cmyk(5%, 0%, 32%, 69%)
Oklch
oklch(41.7% 0.040 115.5)

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

#E1CAA8

Goose Yellow · Wheat · Peach Orange

HEX
#E1CAA8
RGB
rgb(225, 202, 168)
HSL
hsl(36, 49%, 77%)
HSB
hsb(36, 25%, 88%)
CMYK
cmyk(0%, 10%, 25%, 12%)
Oklch
oklch(85.0% 0.052 77.6)

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

#B57E3B

Ochre · Chocolate · Amber Brown

HEX
#B57E3B
RGB
rgb(181, 126, 59)
HSL
hsl(33, 51%, 47%)
HSB
hsb(33, 67%, 71%)
CMYK
cmyk(0%, 30%, 67%, 29%)
Oklch
oklch(63.6% 0.108 69.0)

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

#5D3F37

Crimson · DarkOliveGreen · Wine Red

HEX
#5D3F37
RGB
rgb(93, 63, 55)
HSL
hsl(13, 26%, 29%)
HSB
hsb(13, 41%, 36%)
CMYK
cmyk(0%, 32%, 41%, 64%)
Oklch
oklch(39.9% 0.045 35.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F391E
281E39

Analogous

39351E
2F391E
21391E

Triadic

2F391E
1E2F39
391E2F

Split-Comp.

2F391E
1E2139
351E39

Tetradic

2F391E
1E3935
281E39
391E21

Contrast Matrix WCAG 2.1 Contrast

2F391E
4B4F36
E1CAA8
B57E3B
5D3F37
—
1.4
Fail
7.7
AAA
3.5
AA Large
1.3
Fail
1.4
Fail
—
5.3
AA
2.4
Fail
1.1
Fail
7.7
AAA
5.3
AA
—
2.2
Fail
5.9
AA
3.5
AA Large
2.4
Fail
2.2
Fail
—
2.7
Fail
1.3
Fail
1.1
Fail
5.9
AA
2.7
Fail
—
White BG
12.2AAA
8.5AAA
1.6Fail
3.5AA Large
9.4AAA
Black BG
1.7Fail
2.5Fail
13.2AAA
6.0AA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

333325
4D4D3C
D7D7B0
9D9D4B
505039

Deuteranopia

333226
4D4C3E
D8DAB2
A0A54F
525439

Tritanopia

302A2B
4B4142
E0B7B8
B2585B
5C3A3B

Achromatopsia

333333
4B4B4B
CDCDCD
878787
474747

Shades & Tints Shades & Tints

#2F391E

Dark
Light

#4B4F36

Dark
Light

#E1CAA8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f391e;
  --color-2: #4b4f36;
  --color-3: #e1caa8;
  --color-4: #b57e3b;
  --color-5: #5d3f37;
}

SCSS

$color-1: #2f391e;
$color-2: #4b4f36;
$color-3: #e1caa8;
$color-4: #b57e3b;
$color-5: #5d3f37;

TAILWIND

colors: {
  'brand-1': '#2f391e',
  'brand-2': '#4b4f36',
  'brand-3': '#e1caa8',
  'brand-4': '#b57e3b',
  'brand-5': '#5d3f37',
}

RGB Array

[47, 57, 30], [75, 79, 54], [225, 202, 168], [181, 126, 59], [93, 63, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F391E, #4B4F36, #E1CAA8, #B57E3B, #5D3F37 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #2f391e; --color-2: #4b4f36; --color-3: #e1caa8; --color-4: #b57e3b; --color-5: #5d3f37. 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. 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. 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