#BD8B4F + #9D7532 + #715930 + #672C1C + #2E1912 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BD8B4F

Ginger · GoldenRod · Warm Sun

HEX

#BD8B4F

RGB

rgb(189, 139, 79)

HSL

hsl(33, 45%, 53%)

HSB

hsb(33, 58%, 74%)

CMYK

cmyk(0%, 26%, 58%, 26%)

Oklch

oklch(67.3% 0.098 69.8)

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

#9D7532

Ochre · Sienna · Amber Brown

HEX

#9D7532

RGB

rgb(157, 117, 50)

HSL

hsl(38, 52%, 41%)

HSB

hsb(38, 68%, 62%)

CMYK

cmyk(0%, 25%, 68%, 38%)

Oklch

oklch(58.9% 0.098 77.6)

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

#715930

Ochre · DarkOliveGreen · Amber Brown

HEX

#715930

RGB

rgb(113, 89, 48)

HSL

hsl(38, 40%, 32%)

HSB

hsb(38, 58%, 44%)

CMYK

cmyk(0%, 21%, 58%, 56%)

Oklch

oklch(47.9% 0.066 79.6)

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

#672C1C

Crimson · Maroon · Wine Red

HEX

#672C1C

RGB

rgb(103, 44, 28)

HSL

hsl(13, 57%, 26%)

HSB

hsb(13, 73%, 40%)

CMYK

cmyk(0%, 57%, 73%, 60%)

Oklch

oklch(37.2% 0.089 36.1)

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

#2E1912

Tangerine · Black · Cinnamon

HEX

#2E1912

RGB

rgb(46, 25, 18)

HSL

hsl(15, 44%, 13%)

HSB

hsb(15, 61%, 18%)

CMYK

cmyk(0%, 46%, 61%, 82%)

Oklch

oklch(24.0% 0.036 39.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BD8B4F

5182BD

Analogous

BD5751

BD8B4F

B8BD51

Triadic

BD8B4F

51BD8D

8D51BD

Split-Comp.

BD8B4F

51B8BD

5751BD

Tetradic

BD8B4F

51BD57

5182BD

BD51B8

Contrast Matrix WCAG 2.1 Contrast

BD8B4F	9D7532	715930	672C1C	2E1912
—	1.4 Fail	2.2 Fail	3.6 AA Large	5.5 AA
1.4 Fail	—	1.6 Fail	2.6 Fail	4.0 AA Large
2.2 Fail	1.6 Fail	—	1.6 Fail	2.5 Fail
3.6 AA Large	2.6 Fail	1.6 Fail	—	1.5 Fail
5.5 AA	4.0 AA Large	2.5 Fail	1.5 Fail	—

White BG

3.0AA Large

4.2AA Large

6.6AA

10.7AAA

16.6AAA

Black BG

7.0AA

5.0AA

3.2AA Large

2.0Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A75E

8C8B42

67663A

4D4D20

252514

Deuteranopia

AAAE61

8E9146

686A3C

515521

262814

Tritanopia

BA696C

9B4F52

704243

642324

2D1515

Achromatopsia

939393

797979

5C5C5C

3C3C3C

1E1E1E

Shades & Tints Shades & Tints

#BD8B4F

Dark

Light

#9D7532

Dark

Light

#715930

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bd8b4f;
  --color-2: #9d7532;
  --color-3: #715930;
  --color-4: #672c1c;
  --color-5: #2e1912;
}

SCSS

$color-1: #bd8b4f;
$color-2: #9d7532;
$color-3: #715930;
$color-4: #672c1c;
$color-5: #2e1912;

TAILWIND

colors: {
  'brand-1': '#bd8b4f',
  'brand-2': '#9d7532',
  'brand-3': '#715930',
  'brand-4': '#672c1c',
  'brand-5': '#2e1912',
}

RGB Array

[189, 139, 79], [157, 117, 50], [113, 89, 48], [103, 44, 28], [46, 25, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #BD8B4F, #9D7532, #715930, #672C1C, #2E1912 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: #bd8b4f; --color-2: #9d7532; --color-3: #715930; --color-4: #672c1c; --color-5: #2e1912. 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 warm-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