← Back to Editor

#6E5A53 · #BCBB9D · #008080 · #2D4F54 · #181F1E

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

#6E5A53

Tangerine · DimGray · Amber Brown

HEX
#6E5A53
RGB
rgb(110, 90, 83)
HSL
hsl(16, 14%, 38%)
HSB
hsb(16, 25%, 43%)
CMYK
cmyk(0%, 18%, 25%, 57%)
Oklch
oklch(48.5% 0.029 40.2)

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

#BCBB9D

Fresh Green · Tan · Sunflower

HEX
#BCBB9D
RGB
rgb(188, 187, 157)
HSL
hsl(58, 19%, 68%)
HSB
hsb(58, 16%, 74%)
CMYK
cmyk(0%, 1%, 16%, 26%)
Oklch
oklch(78.5% 0.041 105.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#008080

Lake Blue · Teal · Peacock Green

HEX
#008080
RGB
rgb(0, 128, 128)
HSL
hsl(180, 100%, 25%)
HSB
hsb(180, 100%, 50%)
CMYK
cmyk(100%, 0%, 0%, 50%)
Oklch
oklch(54.3% 0.093 194.8)

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

#2D4F54

Slate Blue · DarkSlateGray · Peacock Green

HEX
#2D4F54
RGB
rgb(45, 79, 84)
HSL
hsl(188, 30%, 25%)
HSB
hsb(188, 46%, 33%)
CMYK
cmyk(46%, 6%, 0%, 67%)
Oklch
oklch(40.4% 0.040 207.7)

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

#181F1E

Mineral Blue · Black · Peacock Green

HEX
#181F1E
RGB
rgb(24, 31, 30)
HSL
hsl(171, 13%, 11%)
HSB
hsb(171, 23%, 12%)
CMYK
cmyk(23%, 0%, 3%, 88%)
Oklch
oklch(23.2% 0.010 185.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6E5A53
53676E

Analogous

6E535A
6E5A53
6E6853

Triadic

6E5A53
536E5B
5B536E

Split-Comp.

6E5A53
536E68
535A6E

Tetradic

6E5A53
5A6E53
53676E
68536E

Contrast Matrix WCAG 2.1 Contrast

6E5A53
BCBB9D
008080
2D4F54
181F1E
—
3.3
AA Large
1.4
Fail
1.4
Fail
2.6
Fail
3.3
AA Large
—
2.4
Fail
4.6
AA
8.6
AAA
1.4
Fail
2.4
Fail
—
1.9
Fail
3.5
AA Large
1.4
Fail
4.6
AA
1.9
Fail
—
1.9
Fail
2.6
Fail
8.6
AAA
3.5
AA Large
1.9
Fail
—
White BG
6.5AA
2.0Fail
4.8AA
8.9AAA
16.8AAA
Black BG
3.3AA Large
10.7AAA
4.4AA Large
2.4Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

656555
BCBCA4
373980
3C3C53
1B1B1E

Deuteranopia

676855
BCBCA6
302680
3A3753
1B1A1E

Tritanopia

6D5656
BCAAAB
068080
2F5252
181E1E

Achromatopsia

5F5F5F
B8B8B8
5A5A5A
454545
1D1D1D

Shades & Tints Shades & Tints

#6E5A53

Dark
Light

#BCBB9D

Dark
Light

#008080

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6e5a53;
  --color-2: #bcbb9d;
  --color-3: #008080;
  --color-4: #2d4f54;
  --color-5: #181f1e;
}

SCSS

$color-1: #6e5a53;
$color-2: #bcbb9d;
$color-3: #008080;
$color-4: #2d4f54;
$color-5: #181f1e;

TAILWIND

colors: {
  'brand-1': '#6e5a53',
  'brand-2': '#bcbb9d',
  'brand-3': '#008080',
  'brand-4': '#2d4f54',
  'brand-5': '#181f1e',
}

RGB Array

[110, 90, 83], [188, 187, 157], [0, 128, 128], [45, 79, 84], [24, 31, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6E5A53, #BCBB9D, #008080, #2D4F54, #181F1E 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: #6e5a53; --color-2: #bcbb9d; --color-3: #008080; --color-4: #2d4f54; --color-5: #181f1e. 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