#332E23 + #BF964B + #805B13 + #854124 + #204B5E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#332E23

Ochre · DarkSlateGray · Amber Gold

HEX

#332E23

RGB

rgb(51, 46, 35)

HSL

hsl(41, 19%, 17%)

HSB

hsb(41, 31%, 20%)

CMYK

cmyk(0%, 10%, 31%, 80%)

Oklch

oklch(30.3% 0.020 86.4)

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

#BF964B

Ginger · GoldenRod · Warm Sun

HEX

#BF964B

RGB

rgb(191, 150, 75)

HSL

hsl(39, 48%, 52%)

HSB

hsb(39, 61%, 75%)

CMYK

cmyk(0%, 21%, 61%, 25%)

Oklch

oklch(69.6% 0.105 80.7)

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

#805B13

Ochre · Olive · Honey Gold

HEX

#805B13

RGB

rgb(128, 91, 19)

HSL

hsl(40, 74%, 29%)

HSB

hsb(40, 85%, 50%)

CMYK

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

Oklch

oklch(49.8% 0.096 78.6)

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

#854124

Tangerine · Sienna · Amber Brown

HEX

#854124

RGB

rgb(133, 65, 36)

HSL

hsl(18, 57%, 33%)

HSB

hsb(18, 73%, 52%)

CMYK

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

Oklch

oklch(45.6% 0.102 42.7)

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

#204B5E

Slate Blue · DarkSlateGray · Peacock Green

HEX

#204B5E

RGB

rgb(32, 75, 94)

HSL

hsl(198, 49%, 25%)

HSB

hsb(198, 66%, 37%)

CMYK

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

Oklch

oklch(39.1% 0.057 229.6)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

332E23

232834

Analogous

342623

332E23

313423

Triadic

332E23

23342E

2E2334

Split-Comp.

332E23

233134

262334

Tetradic

332E23

233426

232834

342331

Contrast Matrix WCAG 2.1 Contrast

332E23	BF964B	805B13	854124	204B5E
—	4.9 AA	2.2 Fail	1.8 Fail	1.4 Fail
4.9 AA	—	2.2 Fail	2.8 Fail	3.4 AA Large
2.2 Fail	2.2 Fail	—	1.2 Fail	1.5 Fail
1.8 Fail	2.8 Fail	1.2 Fail	—	1.2 Fail
1.4 Fail	3.4 AA Large	1.5 Fail	1.2 Fail	—

White BG

13.5AAA

2.7Fail

6.1AA

7.6AAA

9.4AAA

Black BG

1.6Fail

7.7AAA

3.4AA Large

2.8Fail

2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

313126

ADAD5D

707024

68672B

333359

Deuteranopia

313126

B0B362

727529

6C712D

302D58

Tritanopia

332828

BD6B6F

7E3235

823132

225655

Achromatopsia

2E2E2E

9A9A9A

5E5E5E

525252

404040

Shades & Tints Shades & Tints

#332E23

Dark

Light

#BF964B

Dark

Light

#805B13

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #332e23;
  --color-2: #bf964b;
  --color-3: #805b13;
  --color-4: #854124;
  --color-5: #204b5e;
}

SCSS

$color-1: #332e23;
$color-2: #bf964b;
$color-3: #805b13;
$color-4: #854124;
$color-5: #204b5e;

TAILWIND

colors: {
  'brand-1': '#332e23',
  'brand-2': '#bf964b',
  'brand-3': '#805b13',
  'brand-4': '#854124',
  'brand-5': '#204b5e',
}

RGB Array

[51, 46, 35], [191, 150, 75], [128, 91, 19], [133, 65, 36], [32, 75, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #332E23, #BF964B, #805B13, #854124, #204B5E 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: #332e23; --color-2: #bf964b; --color-3: #805b13; --color-4: #854124; --color-5: #204b5e. 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