#B9AE5F + #9D5D15 + #8E1832 + #3B1433 + #3E3E4A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B9AE5F

Autumn Sage · Tan · Sunflower

HEX

#B9AE5F

RGB

rgb(185, 174, 95)

HSL

hsl(53, 39%, 55%)

HSB

hsb(53, 49%, 73%)

CMYK

cmyk(0%, 6%, 49%, 27%)

Oklch

oklch(74.3% 0.101 101.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#9D5D15

Ochre · Sienna · Amber Brown

HEX

#9D5D15

RGB

rgb(157, 93, 21)

HSL

hsl(32, 76%, 35%)

HSB

hsb(32, 87%, 62%)

CMYK

cmyk(0%, 41%, 87%, 38%)

Oklch

oklch(54.0% 0.115 62.4)

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

#8E1832

Vermilion · Brown · Wine Red

HEX

#8E1832

RGB

rgb(142, 24, 50)

HSL

hsl(347, 71%, 33%)

HSB

hsb(347, 83%, 56%)

CMYK

cmyk(0%, 83%, 65%, 44%)

Oklch

oklch(42.4% 0.151 15.2)

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

#3B1433

Rose Purple · DarkSlateGray · Dark Purple

HEX

#3B1433

RGB

rgb(59, 20, 51)

HSL

hsl(312, 49%, 15%)

HSB

hsb(312, 66%, 23%)

CMYK

cmyk(0%, 66%, 14%, 77%)

Oklch

oklch(26.5% 0.076 336.2)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#3E3E4A

Deep Indigo · DarkSlateGray · Charcoal

HEX

#3E3E4A

RGB

rgb(62, 62, 74)

HSL

hsl(240, 9%, 27%)

HSB

hsb(240, 16%, 29%)

CMYK

cmyk(16%, 16%, 0%, 71%)

Oklch

oklch(36.9% 0.020 285.4)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9AE5F

5F6AB9

Analogous

B9825F

B9AE5F

97B95F

Triadic

B9AE5F

5FB9AF

AF5FB9

Split-Comp.

B9AE5F

5F97B9

825FB9

Tetradic

B9AE5F

5FB982

5F6AB9

B95F97

Contrast Matrix WCAG 2.1 Contrast

B9AE5F	9D5D15	8E1832	3B1433	3E3E4A
—	2.3 Fail	4.0 AA Large	7.0 AA	4.7 AA
2.3 Fail	—	1.7 Fail	3.0 AA Large	2.0 Fail
4.0 AA Large	1.7 Fail	—	1.7 Fail	1.2 Fail
7.0 AA	3.0 AA Large	1.7 Fail	—	1.5 Fail
4.7 AA	2.0 Fail	1.2 Fail	1.5 Fail	—

White BG

2.3Fail

5.2AA

9.0AAA

15.7AAA

10.5AAA

Black BG

9.3AAA

4.0AA Large

2.3Fail

1.3Fail

2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B472

818126

5B5A2C

2A2A2B

3E3E47

Deuteranopia

B5B677

858A2B

626B2A

2C2F2A

3E3E46

Tritanopia

B88185

9A3437

882726

392624

3E4544

Achromatopsia

A8A8A8

686868

3E3E3E

232323

3F3F3F

Shades & Tints Shades & Tints

#B9AE5F

Dark

Light

#9D5D15

Dark

Light

#8E1832

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9ae5f;
  --color-2: #9d5d15;
  --color-3: #8e1832;
  --color-4: #3b1433;
  --color-5: #3e3e4a;
}

SCSS

$color-1: #b9ae5f;
$color-2: #9d5d15;
$color-3: #8e1832;
$color-4: #3b1433;
$color-5: #3e3e4a;

TAILWIND

colors: {
  'brand-1': '#b9ae5f',
  'brand-2': '#9d5d15',
  'brand-3': '#8e1832',
  'brand-4': '#3b1433',
  'brand-5': '#3e3e4a',
}

RGB Array

[185, 174, 95], [157, 93, 21], [142, 24, 50], [59, 20, 51], [62, 62, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B9AE5F, #9D5D15, #8E1832, #3B1433, #3E3E4A 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: #b9ae5f; --color-2: #9d5d15; --color-3: #8e1832; --color-4: #3b1433; --color-5: #3e3e4a. 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