← Back to Editor

#8C7E62 · #677360 · #556360 · #393E40 · #282B2B

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#8C7E62

Ochre · Gray · Honey Gold

HEX
#8C7E62
RGB
rgb(140, 126, 98)
HSL
hsl(40, 18%, 47%)
HSB
hsb(40, 30%, 55%)
CMYK
cmyk(0%, 10%, 30%, 45%)
Oklch
oklch(59.8% 0.044 84.4)

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

#677360

Celadon · DimGray · Warm Gray

HEX
#677360
RGB
rgb(103, 115, 96)
HSL
hsl(98, 9%, 41%)
HSB
hsb(98, 17%, 45%)
CMYK
cmyk(10%, 0%, 17%, 55%)
Oklch
oklch(54.0% 0.032 133.9)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

#556360

Mineral Blue · DimGray · Charcoal

HEX
#556360
RGB
rgb(85, 99, 96)
HSL
hsl(167, 8%, 36%)
HSB
hsb(167, 14%, 39%)
CMYK
cmyk(14%, 0%, 3%, 61%)
Oklch
oklch(48.7% 0.018 181.2)

Traditional「Mineral Blue」· Paint「Charcoal」· Creative Midnight Shadow

#393E40

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#393E40
RGB
rgb(57, 62, 64)
HSL
hsl(197, 6%, 24%)
HSB
hsb(197, 11%, 25%)
CMYK
cmyk(11%, 3%, 0%, 75%)
Oklch
oklch(36.0% 0.008 223.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#282B2B

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#282B2B
RGB
rgb(40, 43, 43)
HSL
hsl(180, 4%, 16%)
HSB
hsb(180, 7%, 17%)
CMYK
cmyk(7%, 0%, 0%, 83%)
Oklch
oklch(28.6% 0.004 196.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C7E62
62718D

Analogous

8D6962
8C7E62
868D62

Triadic

8C7E62
628D7F
7F628D

Split-Comp.

8C7E62
62868D
69628D

Tetradic

8C7E62
628D69
62718D
8D6286

Contrast Matrix WCAG 2.1 Contrast

8C7E62
677360
556360
393E40
282B2B
—
1.3
Fail
1.6
Fail
2.7
Fail
3.6
AA Large
1.3
Fail
—
1.3
Fail
2.2
Fail
2.9
Fail
1.6
Fail
1.3
Fail
—
1.7
Fail
2.3
Fail
2.7
Fail
2.2
Fail
1.7
Fail
—
1.3
Fail
3.6
AA Large
2.9
Fail
2.3
Fail
1.3
Fail
—
White BG
4.0AA Large
5.0AA
6.3AA
10.8AAA
14.3AAA
Black BG
5.3AA
4.2AA Large
3.3AA Large
1.9Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

868669
6C6C65
5B5B61
3B3B40
29292B

Deuteranopia

87886A
6C6B66
5A5961
3B3B3F
29292B

Tritanopia

8B6E6F
686869
566161
393F3F
282B2B

Achromatopsia

7F7F7F
6D6D6D
5E5E5E
3D3D3D
2A2A2A

Shades & Tints Shades & Tints

#8C7E62

Dark
Light

#677360

Dark
Light

#556360

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c7e62;
  --color-2: #677360;
  --color-3: #556360;
  --color-4: #393e40;
  --color-5: #282b2b;
}

SCSS

$color-1: #8c7e62;
$color-2: #677360;
$color-3: #556360;
$color-4: #393e40;
$color-5: #282b2b;

TAILWIND

colors: {
  'brand-1': '#8c7e62',
  'brand-2': '#677360',
  'brand-3': '#556360',
  'brand-4': '#393e40',
  'brand-5': '#282b2b',
}

RGB Array

[140, 126, 98], [103, 115, 96], [85, 99, 96], [57, 62, 64], [40, 43, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C7E62, #677360, #556360, #393E40, #282B2B is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8c7e62; --color-2: #677360; --color-3: #556360; --color-4: #393e40; --color-5: #282b2b. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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