#2E1D1D + #662020 + #874C1B + #909422 + #58784E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2E1D1D

Crimson · Black · Deep Berry

HEX

#2E1D1D

RGB

rgb(46, 29, 29)

HSL

hsl(0, 23%, 15%)

HSB

hsb(0, 37%, 18%)

CMYK

cmyk(0%, 37%, 37%, 82%)

Oklch

oklch(25.2% 0.027 19.1)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#662020

Crimson · Maroon · Wine Red

HEX

#662020

RGB

rgb(102, 32, 32)

HSL

hsl(0, 52%, 26%)

HSB

hsb(0, 69%, 40%)

CMYK

cmyk(0%, 69%, 69%, 60%)

Oklch

oklch(35.3% 0.101 23.9)

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

#874C1B

Tangerine · Sienna · Amber Brown

HEX

#874C1B

RGB

rgb(135, 76, 27)

HSL

hsl(27, 67%, 32%)

HSB

hsb(27, 80%, 53%)

CMYK

cmyk(0%, 44%, 80%, 47%)

Oklch

oklch(47.8% 0.101 56.2)

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

#909422

Autumn Sage · Olive · Honey Gold

HEX

#909422

RGB

rgb(144, 148, 34)

HSL

hsl(62, 63%, 36%)

HSB

hsb(62, 77%, 58%)

CMYK

cmyk(3%, 0%, 77%, 42%)

Oklch

oklch(64.3% 0.130 111.6)

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

#58784E

Celadon · DarkOliveGreen · Forest Green

HEX

#58784E

RGB

rgb(88, 120, 78)

HSL

hsl(106, 21%, 39%)

HSB

hsb(106, 35%, 47%)

CMYK

cmyk(27%, 0%, 35%, 53%)

Oklch

oklch(53.6% 0.073 138.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E1D1D

1D2F2F

Analogous

2F1D26

2E1D1D

2F261D

Triadic

2E1D1D

1D2F1D

1D1D2F

Split-Comp.

2E1D1D

1D2F26

1D262F

Tetradic

2E1D1D

262F1D

1D2F2F

261D2F

Contrast Matrix WCAG 2.1 Contrast

2E1D1D	662020	874C1B	909422	58784E
—	1.4 Fail	2.4 Fail	4.9 AA	3.2 AA Large
1.4 Fail	—	1.7 Fail	3.6 AA Large	2.3 Fail
2.4 Fail	1.7 Fail	—	2.1 Fail	1.4 Fail
4.9 AA	3.6 AA Large	2.1 Fail	—	1.5 Fail
3.2 AA Large	2.3 Fail	1.4 Fail	1.5 Fail	—

White BG

16.0AAA

11.7AAA

6.8AA

3.3AA Large

5.0AA

Black BG

1.3Fail

1.8Fail

3.1AA Large

6.4AA

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

27261D

484720

6D6D27

92923E

666658

Deuteranopia

28291D

4C5120

71752A

929144

64625B

Tritanopia

2D1D1D

622020

843032

905358

5A6062

Achromatopsia

222222

353535

585858

868686

6A6A6A

Shades & Tints Shades & Tints

#2E1D1D

Dark

Light

#662020

Dark

Light

#874C1B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e1d1d;
  --color-2: #662020;
  --color-3: #874c1b;
  --color-4: #909422;
  --color-5: #58784e;
}

SCSS

$color-1: #2e1d1d;
$color-2: #662020;
$color-3: #874c1b;
$color-4: #909422;
$color-5: #58784e;

TAILWIND

colors: {
  'brand-1': '#2e1d1d',
  'brand-2': '#662020',
  'brand-3': '#874c1b',
  'brand-4': '#909422',
  'brand-5': '#58784e',
}

RGB Array

[46, 29, 29], [102, 32, 32], [135, 76, 27], [144, 148, 34], [88, 120, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2E1D1D, #662020, #874C1B, #909422, #58784E 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: #2e1d1d; --color-2: #662020; --color-3: #874c1b; --color-4: #909422; --color-5: #58784e. 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