← Back to Editor

#86997F · #3E7058 · #11453C · #1D3028 · #181608

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#86997F

Celadon · Gray · Olive Green

HEX
#86997F
RGB
rgb(134, 153, 127)
HSL
hsl(104, 11%, 55%)
HSB
hsb(104, 17%, 60%)
CMYK
cmyk(12%, 0%, 17%, 40%)
Oklch
oklch(66.1% 0.043 137.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#3E7058

Mineral Blue · SeaGreen · Forest Green

HEX
#3E7058
RGB
rgb(62, 112, 88)
HSL
hsl(151, 29%, 34%)
HSB
hsb(151, 45%, 44%)
CMYK
cmyk(45%, 0%, 21%, 56%)
Oklch
oklch(50.2% 0.067 161.8)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#11453C

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#11453C
RGB
rgb(17, 69, 60)
HSL
hsl(170, 60%, 17%)
HSB
hsb(170, 75%, 27%)
CMYK
cmyk(75%, 0%, 13%, 73%)
Oklch
oklch(35.4% 0.056 179.0)

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

#1D3028

Mineral Blue · DarkSlateGray · Dark Green

HEX
#1D3028
RGB
rgb(29, 48, 40)
HSL
hsl(155, 25%, 15%)
HSB
hsb(155, 40%, 19%)
CMYK
cmyk(40%, 0%, 17%, 81%)
Oklch
oklch(29.0% 0.029 166.2)

Traditional「Mineral Blue」· Paint「Dark Green」· Creative Blush Sunrise

#181608

Autumn Sage · Black · Amber Gold

HEX
#181608
RGB
rgb(24, 22, 8)
HSL
hsl(53, 50%, 6%)
HSB
hsb(53, 67%, 9%)
CMYK
cmyk(0%, 8%, 67%, 91%)
Oklch
oklch(19.8% 0.026 101.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86997F
928099

Analogous

939980
86997F
809986

Triadic

86997F
808699
998086

Split-Comp.

86997F
868099
998093

Tetradic

86997F
809399
928099
998680

Contrast Matrix WCAG 2.1 Contrast

86997F
3E7058
11453C
1D3028
181608
—
1.9
Fail
3.5
AA Large
4.6
AA
5.9
AA
1.9
Fail
—
1.9
Fail
2.4
Fail
3.2
AA Large
3.5
AA Large
1.9
Fail
—
1.3
Fail
1.7
Fail
4.6
AA
2.4
Fail
1.3
Fail
—
1.3
Fail
5.9
AA
3.2
AA Large
1.7
Fail
1.3
Fail
—
White BG
3.1AA Large
5.7AA
10.8AAA
13.9AAA
18.1AAA
Black BG
6.9AA
3.7AA Large
1.9Fail
1.5Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8E85
54545E
28283E
25252A
17170B

Deuteranopia

8D8C87
514D5F
25213F
24232A
17170C

Tritanopia

878A8B
416263
144040
1E2B2C
180E0F

Achromatopsia

909090
5E5E5E
343434
292929
151515

Shades & Tints Shades & Tints

#86997F

Dark
Light

#3E7058

Dark
Light

#11453C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86997f;
  --color-2: #3e7058;
  --color-3: #11453c;
  --color-4: #1d3028;
  --color-5: #181608;
}

SCSS

$color-1: #86997f;
$color-2: #3e7058;
$color-3: #11453c;
$color-4: #1d3028;
$color-5: #181608;

TAILWIND

colors: {
  'brand-1': '#86997f',
  'brand-2': '#3e7058',
  'brand-3': '#11453c',
  'brand-4': '#1d3028',
  'brand-5': '#181608',
}

RGB Array

[134, 153, 127], [62, 112, 88], [17, 69, 60], [29, 48, 40], [24, 22, 8]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86997F, #3E7058, #11453C, #1D3028, #181608 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #86997f; --color-2: #3e7058; --color-3: #11453c; --color-4: #1d3028; --color-5: #181608. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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