#2B2520 + #5E3A20 + #665533 + #B65B3F + #B58E3F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2B2520

Tangerine · DarkSlateGray · Cinnamon

HEX

#2B2520

RGB

rgb(43, 37, 32)

HSL

hsl(27, 15%, 15%)

HSB

hsb(27, 26%, 17%)

CMYK

cmyk(0%, 14%, 26%, 83%)

Oklch

oklch(26.9% 0.013 62.1)

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

#5E3A20

Tangerine · DarkOliveGreen · Cinnamon

HEX

#5E3A20

RGB

rgb(94, 58, 32)

HSL

hsl(25, 49%, 25%)

HSB

hsb(25, 66%, 37%)

CMYK

cmyk(0%, 38%, 66%, 63%)

Oklch

oklch(38.5% 0.064 55.3)

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

#665533

Ochre · DarkOliveGreen · Honey Gold

HEX

#665533

RGB

rgb(102, 85, 51)

HSL

hsl(40, 33%, 30%)

HSB

hsb(40, 50%, 40%)

CMYK

cmyk(0%, 17%, 50%, 60%)

Oklch

oklch(45.8% 0.055 83.8)

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

#B65B3F

Crimson · Sienna · Passion Red

HEX

#B65B3F

RGB

rgb(182, 91, 63)

HSL

hsl(14, 49%, 48%)

HSB

hsb(14, 65%, 71%)

CMYK

cmyk(0%, 50%, 65%, 29%)

Oklch

oklch(57.5% 0.125 37.8)

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

#B58E3F

Ochre · DarkGoldenRod · Honey Gold

HEX

#B58E3F

RGB

rgb(181, 142, 63)

HSL

hsl(40, 48%, 48%)

HSB

hsb(40, 65%, 71%)

CMYK

cmyk(0%, 22%, 65%, 29%)

Oklch

oklch(66.8% 0.107 82.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B2520

21272C

Analogous

2C2121

2B2520

2C2B21

Triadic

2B2520

212C26

26212C

Split-Comp.

2B2520

212C2B

21212C

Tetradic

2B2520

212C21

21272C

2B212C

Contrast Matrix WCAG 2.1 Contrast

2B2520	5E3A20	665533	B65B3F	B58E3F
—	1.5 Fail	2.1 Fail	3.3 AA Large	5.0 AA
1.5 Fail	—	1.4 Fail	2.2 Fail	3.3 AA Large
2.1 Fail	1.4 Fail	—	1.6 Fail	2.4 Fail
3.3 AA Large	2.2 Fail	1.6 Fail	—	1.5 Fail
5.0 AA	3.3 AA Large	2.4 Fail	1.5 Fail	—

White BG

15.1AAA

10.0AAA

7.2AAA

4.6AA

3.0AA Large

Black BG

1.4Fail

2.1Fail

2.9Fail

4.6AA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

282821

4E4E26

5F5E3B

8F8E46

A4A452

Deuteranopia

292922

515328

60613D

949B47

A6A957

Tritanopia

2B2222

5C2B2C

654243

B14B4C

B36165

Achromatopsia

262626

424242

565656

737373

919191

Shades & Tints Shades & Tints

#2B2520

Dark

Light

#5E3A20

Dark

Light

#665533

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b2520;
  --color-2: #5e3a20;
  --color-3: #665533;
  --color-4: #b65b3f;
  --color-5: #b58e3f;
}

SCSS

$color-1: #2b2520;
$color-2: #5e3a20;
$color-3: #665533;
$color-4: #b65b3f;
$color-5: #b58e3f;

TAILWIND

colors: {
  'brand-1': '#2b2520',
  'brand-2': '#5e3a20',
  'brand-3': '#665533',
  'brand-4': '#b65b3f',
  'brand-5': '#b58e3f',
}

RGB Array

[43, 37, 32], [94, 58, 32], [102, 85, 51], [182, 91, 63], [181, 142, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2B2520, #5E3A20, #665533, #B65B3F, #B58E3F 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: #2b2520; --color-2: #5e3a20; --color-3: #665533; --color-4: #b65b3f; --color-5: #b58e3f. 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