#B04430 + #BE5E33 + #8D8D26 + #2E200C + #1E6F63 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B04430

Crimson · Sienna · Passion Red

HEX

#B04430

RGB

rgb(176, 68, 48)

HSL

hsl(9, 57%, 44%)

HSB

hsb(9, 73%, 69%)

CMYK

cmyk(0%, 61%, 73%, 31%)

Oklch

oklch(53.0% 0.145 32.5)

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

#BE5E33

Tangerine · Chocolate · Amber Brown

HEX

#BE5E33

RGB

rgb(190, 94, 51)

HSL

hsl(19, 58%, 47%)

HSB

hsb(19, 73%, 75%)

CMYK

cmyk(0%, 51%, 73%, 25%)

Oklch

oklch(59.0% 0.136 43.3)

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

#8D8D26

Autumn Sage · Olive · Honey Gold

HEX

#8D8D26

RGB

rgb(141, 141, 38)

HSL

hsl(60, 58%, 35%)

HSB

hsb(60, 73%, 55%)

CMYK

cmyk(0%, 0%, 73%, 45%)

Oklch

oklch(62.4% 0.121 109.5)

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

#2E200C

Ochre · Black · Cinnamon

HEX

#2E200C

RGB

rgb(46, 32, 12)

HSL

hsl(35, 59%, 11%)

HSB

hsb(35, 74%, 18%)

CMYK

cmyk(0%, 30%, 74%, 82%)

Oklch

oklch(25.6% 0.039 74.3)

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

#1E6F63

Mineral Blue · SeaGreen · Mint Ice

HEX

#1E6F63

RGB

rgb(30, 111, 99)

HSL

hsl(171, 57%, 28%)

HSB

hsb(171, 73%, 44%)

CMYK

cmyk(73%, 0%, 11%, 56%)

Oklch

oklch(49.1% 0.078 180.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B04430

309DB0

Analogous

B0305D

B04430

B08330

Triadic

B04430

30B043

4330B0

Split-Comp.

B04430

30B083

305DB0

Tetradic

B04430

5DB030

309DB0

8330B0

Contrast Matrix WCAG 2.1 Contrast

B04430	BE5E33	8D8D26	2E200C	1E6F63
—	1.3 Fail	1.6 Fail	2.8 Fail	1.1 Fail
1.3 Fail	—	1.2 Fail	3.6 AA Large	1.4 Fail
1.6 Fail	1.2 Fail	—	4.5 AA Large	1.7 Fail
2.8 Fail	3.6 AA Large	4.5 AA Large	—	2.6 Fail
1.1 Fail	1.4 Fail	1.7 Fail	2.6 Fail	—

White BG

5.7AA

4.3AA Large

3.5AA Large

15.8AAA

6.0AA

Black BG

3.7AA Large

4.8AA

6.0AA

1.3Fail

3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

818035

94943D

8D8D3F

282811

414266

Deuteranopia

889036

9AA140

8D8D45

292A12

3C3667

Tritanopia

AB393A

B94647

8D5357

2D1516

226869

Achromatopsia

626262

767676

818181

222222

555555

Shades & Tints Shades & Tints

#B04430

Dark

Light

#BE5E33

Dark

Light

#8D8D26

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b04430;
  --color-2: #be5e33;
  --color-3: #8d8d26;
  --color-4: #2e200c;
  --color-5: #1e6f63;
}

SCSS

$color-1: #b04430;
$color-2: #be5e33;
$color-3: #8d8d26;
$color-4: #2e200c;
$color-5: #1e6f63;

TAILWIND

colors: {
  'brand-1': '#b04430',
  'brand-2': '#be5e33',
  'brand-3': '#8d8d26',
  'brand-4': '#2e200c',
  'brand-5': '#1e6f63',
}

RGB Array

[176, 68, 48], [190, 94, 51], [141, 141, 38], [46, 32, 12], [30, 111, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B04430, #BE5E33, #8D8D26, #2E200C, #1E6F63 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: #b04430; --color-2: #be5e33; --color-3: #8d8d26; --color-4: #2e200c; --color-5: #1e6f63. 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