#9E2E2A + #B08342 + #6F663D + #4F3438 + #2E2225 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9E2E2A

Crimson · Brown · Wine Red

HEX

#9E2E2A

RGB

rgb(158, 46, 42)

HSL

hsl(2, 58%, 39%)

HSB

hsb(2, 73%, 62%)

CMYK

cmyk(0%, 71%, 73%, 38%)

Oklch

oklch(47.2% 0.149 26.6)

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

#B08342

Ochre · DarkGoldenRod · Amber Brown

HEX

#B08342

RGB

rgb(176, 131, 66)

HSL

hsl(35, 45%, 47%)

HSB

hsb(35, 63%, 69%)

CMYK

cmyk(0%, 26%, 63%, 31%)

Oklch

oklch(64.1% 0.099 74.4)

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

#6F663D

Ochre · DarkOliveGreen · Honey Gold

HEX

#6F663D

RGB

rgb(111, 102, 61)

HSL

hsl(49, 29%, 34%)

HSB

hsb(49, 45%, 44%)

CMYK

cmyk(0%, 8%, 45%, 56%)

Oklch

oklch(50.8% 0.060 97.3)

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

#4F3438

Crimson · DarkSlateGray · Wine Red

HEX

#4F3438

RGB

rgb(79, 52, 56)

HSL

hsl(351, 21%, 26%)

HSB

hsb(351, 34%, 31%)

CMYK

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

Oklch

oklch(35.8% 0.039 9.5)

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

#2E2225

Crimson · DarkSlateGray · Deep Berry

HEX

#2E2225

RGB

rgb(46, 34, 37)

HSL

hsl(345, 15%, 16%)

HSB

hsb(345, 26%, 18%)

CMYK

cmyk(0%, 26%, 20%, 82%)

Oklch

oklch(26.7% 0.019 1.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9E2E2A

2A999D

Analogous

9D2A60

9E2E2A

9D672A

Triadic

9E2E2A

2A9D2E

2E2A9D

Split-Comp.

9E2E2A

2A9D67

2A609D

Tetradic

9E2E2A

609D2A

2A999D

672A9D

Contrast Matrix WCAG 2.1 Contrast

9E2E2A	B08342	6F663D	4F3438	2E2225
—	2.1 Fail	1.3 Fail	1.5 Fail	2.1 Fail
2.1 Fail	—	1.7 Fail	3.3 AA Large	4.5 AA Large
1.3 Fail	1.7 Fail	—	1.9 Fail	2.7 Fail
1.5 Fail	3.3 AA Large	1.9 Fail	—	1.4 Fail
2.1 Fail	4.5 AA Large	2.7 Fail	1.4 Fail	—

White BG

7.3AAA

3.4AA Large

5.8AA

11.2AAA

15.3AAA

Black BG

2.9Fail

6.2AA

3.6AA Large

1.9Fail

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6C2B

9D9C52

6B6B47

434337

292924

Deuteranopia

747C2B

9FA356

6C6C49

454737

2A2A24

Tritanopia

982C2C

AE5E61

6F4F50

4E3636

2D2424

Achromatopsia

4F4F4F

898989

646464

3D3D3D

262626

Shades & Tints Shades & Tints

#9E2E2A

Dark

Light

#B08342

Dark

Light

#6F663D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9e2e2a;
  --color-2: #b08342;
  --color-3: #6f663d;
  --color-4: #4f3438;
  --color-5: #2e2225;
}

SCSS

$color-1: #9e2e2a;
$color-2: #b08342;
$color-3: #6f663d;
$color-4: #4f3438;
$color-5: #2e2225;

TAILWIND

colors: {
  'brand-1': '#9e2e2a',
  'brand-2': '#b08342',
  'brand-3': '#6f663d',
  'brand-4': '#4f3438',
  'brand-5': '#2e2225',
}

RGB Array

[158, 46, 42], [176, 131, 66], [111, 102, 61], [79, 52, 56], [46, 34, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9E2E2A, #B08342, #6F663D, #4F3438, #2E2225 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: #9e2e2a; --color-2: #b08342; --color-3: #6f663d; --color-4: #4f3438; --color-5: #2e2225. 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