#3B2321 + #64572D + #818854 + #DA8D3B + #E25800 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B2321

Crimson · DarkSlateGray · Deep Berry

HEX

#3B2321

RGB

rgb(59, 35, 33)

HSL

hsl(5, 28%, 18%)

HSB

hsb(5, 44%, 23%)

CMYK

cmyk(0%, 41%, 44%, 77%)

Oklch

oklch(28.6% 0.037 24.9)

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

#64572D

Ochre · DarkOliveGreen · Honey Gold

HEX

#64572D

RGB

rgb(100, 87, 45)

HSL

hsl(46, 38%, 28%)

HSB

hsb(46, 55%, 39%)

CMYK

cmyk(0%, 13%, 55%, 61%)

Oklch

oklch(45.9% 0.062 92.6)

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

#818854

Autumn Sage · DimGray · Honey Gold

HEX

#818854

RGB

rgb(129, 136, 84)

HSL

hsl(68, 24%, 43%)

HSB

hsb(68, 38%, 53%)

CMYK

cmyk(5%, 0%, 38%, 47%)

Oklch

oklch(60.8% 0.073 114.9)

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

#DA8D3B

Ginger · GoldenRod · Warm Sun

HEX

#DA8D3B

RGB

rgb(218, 141, 59)

HSL

hsl(31, 68%, 54%)

HSB

hsb(31, 73%, 85%)

CMYK

cmyk(0%, 35%, 73%, 15%)

Oklch

oklch(70.8% 0.133 63.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#E25800

Tangerine · OrangeRed · Amber Brown

HEX

#E25800

RGB

rgb(226, 88, 0)

HSL

hsl(23, 100%, 44%)

HSB

hsb(23, 100%, 89%)

CMYK

cmyk(0%, 61%, 100%, 11%)

Oklch

oklch(63.3% 0.188 43.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B2321

21393B

Analogous

3B212C

3B2321

3B3021

Triadic

3B2321

213B23

23213B

Split-Comp.

3B2321

213B30

212C3B

Tetradic

3B2321

2C3B21

21393B

30213B

Contrast Matrix WCAG 2.1 Contrast

3B2321	64572D	818854	DA8D3B	E25800
—	2.0 Fail	3.9 AA Large	5.4 AA	3.9 AA Large
2.0 Fail	—	1.9 Fail	2.7 Fail	1.9 Fail
3.9 AA Large	1.9 Fail	—	1.4 Fail	1.0 Fail
5.4 AA	2.7 Fail	1.4 Fail	—	1.4 Fail
3.9 AA Large	1.9 Fail	1.0 Fail	1.4 Fail	—

White BG

14.5AAA

7.1AAA

3.8AA Large

2.7Fail

3.7AA Large

Black BG

1.4Fail

2.9Fail

5.6AA

7.9AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313021

5E5E37

848461

B9B84F

A6A515

Deuteranopia

323422

5F603A

848364

BDC354

AEB91A

Tritanopia

3A2222

633F41

816B6D

D65F62

DB262A

Achromatopsia

2A2A2A

565656

808080

9B9B9B

777777

Shades & Tints Shades & Tints

#3B2321

Dark

Light

#64572D

Dark

Light

#818854

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b2321;
  --color-2: #64572d;
  --color-3: #818854;
  --color-4: #da8d3b;
  --color-5: #e25800;
}

SCSS

$color-1: #3b2321;
$color-2: #64572d;
$color-3: #818854;
$color-4: #da8d3b;
$color-5: #e25800;

TAILWIND

colors: {
  'brand-1': '#3b2321',
  'brand-2': '#64572d',
  'brand-3': '#818854',
  'brand-4': '#da8d3b',
  'brand-5': '#e25800',
}

RGB Array

[59, 35, 33], [100, 87, 45], [129, 136, 84], [218, 141, 59], [226, 88, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B2321, #64572D, #818854, #DA8D3B, #E25800 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: #3b2321; --color-2: #64572d; --color-3: #818854; --color-4: #da8d3b; --color-5: #e25800. 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