#2B201A + #B1751D + #E32139 + #A35814 + #684C27 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2B201A

Tangerine · Black · Cinnamon

HEX

#2B201A

RGB

rgb(43, 32, 26)

HSL

hsl(21, 25%, 14%)

HSB

hsb(21, 40%, 17%)

CMYK

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

Oklch

oklch(25.5% 0.020 50.0)

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

#B1751D

Ochre · DarkGoldenRod · Amber Brown

HEX

#B1751D

RGB

rgb(177, 117, 29)

HSL

hsl(36, 72%, 40%)

HSB

hsb(36, 84%, 69%)

CMYK

cmyk(0%, 34%, 84%, 31%)

Oklch

oklch(61.1% 0.122 70.6)

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

#E32139

Vermilion · Crimson · Passion Red

HEX

#E32139

RGB

rgb(227, 33, 57)

HSL

hsl(353, 78%, 51%)

HSB

hsb(353, 85%, 89%)

CMYK

cmyk(0%, 85%, 75%, 11%)

Oklch

oklch(58.9% 0.222 22.5)

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

#A35814

Tangerine · Sienna · Amber Brown

HEX

#A35814

RGB

rgb(163, 88, 20)

HSL

hsl(29, 78%, 36%)

HSB

hsb(29, 88%, 64%)

CMYK

cmyk(0%, 46%, 88%, 36%)

Oklch

oklch(53.9% 0.123 56.0)

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

#684C27

Ochre · DarkOliveGreen · Amber Brown

HEX

#684C27

RGB

rgb(104, 76, 39)

HSL

hsl(34, 45%, 28%)

HSB

hsb(34, 63%, 41%)

CMYK

cmyk(0%, 27%, 63%, 59%)

Oklch

oklch(43.8% 0.065 72.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B201A

1B262D

Analogous

2D1B1D

2B201A

2D2A1B

Triadic

2B201A

1B2D21

211B2D

Split-Comp.

2B201A

1B2D2A

1B1D2D

Tetradic

2B201A

1D2D1B

1B262D

2A1B2D

Contrast Matrix WCAG 2.1 Contrast

2B201A	B1751D	E32139	A35814	684C27
—	4.1 AA Large	3.4 AA Large	3.0 Fail	2.0 Fail
4.1 AA Large	—	1.2 Fail	1.4 Fail	2.0 Fail
3.4 AA Large	1.2 Fail	—	1.1 Fail	1.7 Fail
3.0 Fail	1.4 Fail	1.1 Fail	—	1.5 Fail
2.0 Fail	2.0 Fail	1.7 Fail	1.5 Fail	—

White BG

15.9AAA

3.9AA Large

4.6AA

5.3AA

7.9AAA

Black BG

1.3Fail

5.4AA

4.5AA

4.0AA Large

2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

26261B

979632

8F8D33

838224

5C5C30

Deuteranopia

27281C

9B9F37

9AA932

878D28

5E6032

Tritanopia

2A1D1D

AE4347

D92F2E

9F3134

673739

Achromatopsia

232323

7D7D7D

5E5E5E

676767

505050

Shades & Tints Shades & Tints

#2B201A

Dark

Light

#B1751D

Dark

Light

#E32139

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b201a;
  --color-2: #b1751d;
  --color-3: #e32139;
  --color-4: #a35814;
  --color-5: #684c27;
}

SCSS

$color-1: #2b201a;
$color-2: #b1751d;
$color-3: #e32139;
$color-4: #a35814;
$color-5: #684c27;

TAILWIND

colors: {
  'brand-1': '#2b201a',
  'brand-2': '#b1751d',
  'brand-3': '#e32139',
  'brand-4': '#a35814',
  'brand-5': '#684c27',
}

RGB Array

[43, 32, 26], [177, 117, 29], [227, 33, 57], [163, 88, 20], [104, 76, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2B201A, #B1751D, #E32139, #A35814, #684C27 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: #2b201a; --color-2: #b1751d; --color-3: #e32139; --color-4: #a35814; --color-5: #684c27. 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