#B17F1E + #87A9AA + #7D5C0F + #5C8080 + #3C3731 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B17F1E

Ochre · DarkGoldenRod · Honey Gold

HEX

#B17F1E

RGB

rgb(177, 127, 30)

HSL

hsl(40, 71%, 41%)

HSB

hsb(40, 83%, 69%)

CMYK

cmyk(0%, 28%, 83%, 31%)

Oklch

oklch(63.1% 0.122 78.4)

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

#87A9AA

Slate Blue · DarkSeaGreen · Lake Green

HEX

#87A9AA

RGB

rgb(135, 169, 170)

HSL

hsl(182, 17%, 60%)

HSB

hsb(182, 21%, 67%)

CMYK

cmyk(21%, 1%, 0%, 33%)

Oklch

oklch(71.0% 0.037 198.6)

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

#7D5C0F

Ochre · Olive · Honey Gold

HEX

#7D5C0F

RGB

rgb(125, 92, 15)

HSL

hsl(42, 79%, 27%)

HSB

hsb(42, 88%, 49%)

CMYK

cmyk(0%, 26%, 88%, 51%)

Oklch

oklch(49.6% 0.097 82.5)

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

#5C8080

Slate Blue · SlateGray · Mint Ice

HEX

#5C8080

RGB

rgb(92, 128, 128)

HSL

hsl(180, 16%, 43%)

HSB

hsb(180, 28%, 50%)

CMYK

cmyk(28%, 0%, 0%, 50%)

Oklch

oklch(57.3% 0.040 196.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#3C3731

Ochre · DarkSlateGray · Cinnamon

HEX

#3C3731

RGB

rgb(60, 55, 49)

HSL

hsl(33, 10%, 21%)

HSB

hsb(33, 18%, 24%)

CMYK

cmyk(0%, 8%, 18%, 76%)

Oklch

oklch(34.0% 0.012 72.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B17F1E

1E50B3

Analogous

B3371E

B17F1E

9AB31E

Triadic

B17F1E

1EB381

811EB3

Split-Comp.

B17F1E

1E9AB3

371EB3

Tetradic

B17F1E

1EB337

1E50B3

B31E9A

Contrast Matrix WCAG 2.1 Contrast

B17F1E	87A9AA	7D5C0F	5C8080	3C3731
—	1.4 Fail	1.7 Fail	1.2 Fail	3.3 AA Large
1.4 Fail	—	2.4 Fail	1.7 Fail	4.6 AA
1.7 Fail	2.4 Fail	—	1.4 Fail	1.9 Fail
1.2 Fail	1.7 Fail	1.4 Fail	—	2.7 Fail
3.3 AA Large	4.6 AA	1.9 Fail	2.7 Fail	—

White BG

3.5AA Large

2.5Fail

6.2AA

4.3AA Large

11.8AAA

Black BG

5.9AA

8.3AAA

3.4AA Large

4.9AA

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9B35

9696AA

6F6E22

6C6C80

3A3A32

Deuteranopia

9EA23B

9491AA

717326

6A6780

3A3B33

Tritanopia

AF484C

89AAAA

7B3034

5E8080

3C3434

Achromatopsia

838383

9F9F9F

5D5D5D

757575

383838

Shades & Tints Shades & Tints

#B17F1E

Dark

Light

#87A9AA

Dark

Light

#7D5C0F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b17f1e;
  --color-2: #87a9aa;
  --color-3: #7d5c0f;
  --color-4: #5c8080;
  --color-5: #3c3731;
}

SCSS

$color-1: #b17f1e;
$color-2: #87a9aa;
$color-3: #7d5c0f;
$color-4: #5c8080;
$color-5: #3c3731;

TAILWIND

colors: {
  'brand-1': '#b17f1e',
  'brand-2': '#87a9aa',
  'brand-3': '#7d5c0f',
  'brand-4': '#5c8080',
  'brand-5': '#3c3731',
}

RGB Array

[177, 127, 30], [135, 169, 170], [125, 92, 15], [92, 128, 128], [60, 55, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B17F1E, #87A9AA, #7D5C0F, #5C8080, #3C3731 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: #b17f1e; --color-2: #87a9aa; --color-3: #7d5c0f; --color-4: #5c8080; --color-5: #3c3731. 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