#AF6214 + #BD9B53 + #B58539 + #32311C + #36531B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AF6214

Ochre · Sienna · Amber Brown

HEX

#AF6214

RGB

rgb(175, 98, 20)

HSL

hsl(30, 79%, 38%)

HSB

hsb(30, 89%, 69%)

CMYK

cmyk(0%, 44%, 89%, 31%)

Oklch

oklch(57.3% 0.129 58.6)

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

#BD9B53

Ginger · SandyBrown · Sunflower

HEX

#BD9B53

RGB

rgb(189, 155, 83)

HSL

hsl(41, 45%, 53%)

HSB

hsb(41, 56%, 74%)

CMYK

cmyk(0%, 18%, 56%, 26%)

Oklch

oklch(70.5% 0.100 84.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#B58539

Ochre · DarkGoldenRod · Amber Brown

HEX

#B58539

RGB

rgb(181, 133, 57)

HSL

hsl(37, 52%, 47%)

HSB

hsb(37, 69%, 71%)

CMYK

cmyk(0%, 27%, 69%, 29%)

Oklch

oklch(64.9% 0.109 76.0)

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

#32311C

Autumn Sage · DarkSlateGray · Amber Gold

HEX

#32311C

RGB

rgb(50, 49, 28)

HSL

hsl(57, 28%, 15%)

HSB

hsb(57, 44%, 20%)

CMYK

cmyk(0%, 2%, 44%, 80%)

Oklch

oklch(30.8% 0.035 105.9)

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

#36531B

Pine Green · DarkOliveGreen · Forest Green

HEX

#36531B

RGB

rgb(54, 83, 27)

HSL

hsl(91, 51%, 22%)

HSB

hsb(91, 67%, 33%)

CMYK

cmyk(35%, 0%, 67%, 67%)

Oklch

oklch(40.6% 0.090 132.4)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AF6214

1461AD

Analogous

AD1414

AF6214

ADAD14

Triadic

AF6214

14AD61

6114AD

Split-Comp.

AF6214

14ADAD

1414AD

Tetradic

AF6214

14AD14

1461AD

AD14AD

Contrast Matrix WCAG 2.1 Contrast

AF6214	BD9B53	B58539	32311C	36531B
—	1.7 Fail	1.4 Fail	2.9 Fail	1.9 Fail
1.7 Fail	—	1.3 Fail	5.0 AA	3.3 AA Large
1.4 Fail	1.3 Fail	—	4.0 AA Large	2.6 Fail
2.9 Fail	5.0 AA	4.0 AA Large	—	1.5 Fail
1.9 Fail	3.3 AA Large	2.6 Fail	1.5 Fail	—

White BG

4.6AA

2.6Fail

3.3AA Large

13.2AAA

8.7AAA

Black BG

4.6AA

8.0AAA

6.4AA

1.6Fail

2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8D27

AEAE64

A0A04B

323221

434329

Deuteranopia

92982B

B0B369

A3A750

323222

413F2C

Tritanopia

AB3639

BB7275

B35A5D

322526

373336

Achromatopsia

707070

9D9D9D

8B8B8B

2F2F2F

444444

Shades & Tints Shades & Tints

#AF6214

Dark

Light

#BD9B53

Dark

Light

#B58539

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #af6214;
  --color-2: #bd9b53;
  --color-3: #b58539;
  --color-4: #32311c;
  --color-5: #36531b;
}

SCSS

$color-1: #af6214;
$color-2: #bd9b53;
$color-3: #b58539;
$color-4: #32311c;
$color-5: #36531b;

TAILWIND

colors: {
  'brand-1': '#af6214',
  'brand-2': '#bd9b53',
  'brand-3': '#b58539',
  'brand-4': '#32311c',
  'brand-5': '#36531b',
}

RGB Array

[175, 98, 20], [189, 155, 83], [181, 133, 57], [50, 49, 28], [54, 83, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AF6214, #BD9B53, #B58539, #32311C, #36531B 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: #af6214; --color-2: #bd9b53; --color-3: #b58539; --color-4: #32311c; --color-5: #36531b. 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