#B8832A + #7C8017 + #225C5C + #3D3D4E + #451B34 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B8832A

Ochre · DarkGoldenRod · Amber Brown

HEX

#B8832A

RGB

rgb(184, 131, 42)

HSL

hsl(38, 63%, 44%)

HSB

hsb(38, 77%, 72%)

CMYK

cmyk(0%, 29%, 77%, 28%)

Oklch

oklch(64.8% 0.120 75.9)

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

#7C8017

Autumn Sage · Olive · Honey Gold

HEX

#7C8017

RGB

rgb(124, 128, 23)

HSL

hsl(62, 70%, 30%)

HSB

hsb(62, 82%, 50%)

CMYK

cmyk(3%, 0%, 82%, 50%)

Oklch

oklch(57.8% 0.120 111.9)

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

#225C5C

Slate Blue · DarkSlateGray · Peacock Green

HEX

#225C5C

RGB

rgb(34, 92, 92)

HSL

hsl(180, 46%, 25%)

HSB

hsb(180, 63%, 36%)

CMYK

cmyk(63%, 0%, 0%, 64%)

Oklch

oklch(43.7% 0.060 195.2)

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

#3D3D4E

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#3D3D4E

RGB

rgb(61, 61, 78)

HSL

hsl(240, 12%, 27%)

HSB

hsb(240, 22%, 31%)

CMYK

cmyk(22%, 22%, 0%, 69%)

Oklch

oklch(36.7% 0.029 284.9)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#451B34

Rose Purple · DarkSlateGray · Raspberry

HEX

#451B34

RGB

rgb(69, 27, 52)

HSL

hsl(324, 44%, 19%)

HSB

hsb(324, 61%, 27%)

CMYK

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

Oklch

oklch(29.4% 0.073 345.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8832A

2A5DB7

Analogous

B73C2A

B8832A

A4B72A

Triadic

B8832A

2AB783

832AB7

Split-Comp.

B8832A

2AA4B7

3C2AB7

Tetradic

B8832A

2AB73C

2A5DB7

B72AA4

Contrast Matrix WCAG 2.1 Contrast

B8832A	7C8017	225C5C	3D3D4E	451B34
—	1.3 Fail	2.3 Fail	3.2 AA Large	4.3 AA Large
1.3 Fail	—	1.8 Fail	2.5 Fail	3.4 AA Large
2.3 Fail	1.8 Fail	—	1.4 Fail	1.9 Fail
3.2 AA Large	2.5 Fail	1.4 Fail	—	1.4 Fail
4.3 AA Large	3.4 AA Large	1.9 Fail	1.4 Fail	—

White BG

3.3AA Large

4.2AA Large

7.6AAA

10.6AAA

14.4AAA

Black BG

6.3AA

5.0AA

2.8Fail

2.0Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A140

7E7E30

3B3C5C

3D3D4A

33322E

Deuteranopia

A4A845

7E7D37

38335C

3D3D49

35382D

Tritanopia

B55154

7C4449

255C5C

3D4746

432928

Achromatopsia

898989

737373

4B4B4B

3F3F3F

2A2A2A

Shades & Tints Shades & Tints

#B8832A

Dark

Light

#7C8017

Dark

Light

#225C5C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8832a;
  --color-2: #7c8017;
  --color-3: #225c5c;
  --color-4: #3d3d4e;
  --color-5: #451b34;
}

SCSS

$color-1: #b8832a;
$color-2: #7c8017;
$color-3: #225c5c;
$color-4: #3d3d4e;
$color-5: #451b34;

TAILWIND

colors: {
  'brand-1': '#b8832a',
  'brand-2': '#7c8017',
  'brand-3': '#225c5c',
  'brand-4': '#3d3d4e',
  'brand-5': '#451b34',
}

RGB Array

[184, 131, 42], [124, 128, 23], [34, 92, 92], [61, 61, 78], [69, 27, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8832A, #7C8017, #225C5C, #3D3D4E, #451B34 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: #b8832a; --color-2: #7c8017; --color-3: #225c5c; --color-4: #3d3d4e; --color-5: #451b34. 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