← Back to Editor

#839D80 · #6C5F56 · #938980 · #D9C8AA · #F5D3AE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#839D80

Celadon · Gray · Olive Green

HEX
#839D80
RGB
rgb(131, 157, 128)
HSL
hsl(114, 13%, 56%)
HSB
hsb(114, 18%, 62%)
CMYK
cmyk(17%, 0%, 18%, 38%)
Oklch
oklch(66.8% 0.051 142.2)

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

#6C5F56

Tangerine · DimGray · Amber Brown

HEX
#6C5F56
RGB
rgb(108, 95, 86)
HSL
hsl(25, 11%, 38%)
HSB
hsb(25, 20%, 42%)
CMYK
cmyk(0%, 12%, 20%, 58%)
Oklch
oklch(49.5% 0.022 56.9)

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

#938980

Tangerine · Gray · Warm Gray

HEX
#938980
RGB
rgb(147, 137, 128)
HSL
hsl(28, 8%, 54%)
HSB
hsb(28, 13%, 58%)
CMYK
cmyk(0%, 7%, 13%, 42%)
Oklch
oklch(63.6% 0.018 64.5)

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

#D9C8AA

Goose Yellow · Silver · Peach Orange

HEX
#D9C8AA
RGB
rgb(217, 200, 170)
HSL
hsl(38, 38%, 76%)
HSB
hsb(38, 22%, 85%)
CMYK
cmyk(0%, 8%, 22%, 15%)
Oklch
oklch(83.9% 0.045 81.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F5D3AE

Goose Yellow · Wheat · Peach Orange

HEX
#F5D3AE
RGB
rgb(245, 211, 174)
HSL
hsl(31, 78%, 82%)
HSB
hsb(31, 29%, 96%)
CMYK
cmyk(0%, 14%, 29%, 4%)
Oklch
oklch(88.6% 0.062 69.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

839D80
9A809D

Analogous

929D80
839D80
809D8C

Triadic

839D80
80839D
9D8083

Split-Comp.

839D80
8C809D
9D8092

Tetradic

839D80
80929D
9A809D
9D8C80

Contrast Matrix WCAG 2.1 Contrast

839D80
6C5F56
938980
D9C8AA
F5D3AE
—
2.1
Fail
1.2
Fail
1.8
Fail
2.1
Fail
2.1
Fail
—
1.8
Fail
3.8
AA Large
4.3
AA Large
1.2
Fail
1.8
Fail
—
2.1
Fail
2.4
Fail
1.8
Fail
3.8
AA Large
2.1
Fail
—
1.2
Fail
2.1
Fail
4.3
AA Large
2.4
Fail
1.2
Fail
—
White BG
3.0Fail
6.2AA
3.4AA Large
1.6Fail
1.4Fail
Black BG
7.1AAA
3.4AA Large
6.1AA
12.8AAA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8E87
666658
8F8F82
D2D1B1
E6E6B7

Deuteranopia

8D8B89
676859
8F9083
D3D4B3
E8EBB9

Tritanopia

848D8E
6B5A5A
938484
D8B7B8
F3BEC0

Achromatopsia

929292
626262
8B8B8B
CACACA
D9D9D9

Shades & Tints Shades & Tints

#839D80

Dark
Light

#6C5F56

Dark
Light

#938980

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #839d80;
  --color-2: #6c5f56;
  --color-3: #938980;
  --color-4: #d9c8aa;
  --color-5: #f5d3ae;
}

SCSS

$color-1: #839d80;
$color-2: #6c5f56;
$color-3: #938980;
$color-4: #d9c8aa;
$color-5: #f5d3ae;

TAILWIND

colors: {
  'brand-1': '#839d80',
  'brand-2': '#6c5f56',
  'brand-3': '#938980',
  'brand-4': '#d9c8aa',
  'brand-5': '#f5d3ae',
}

RGB Array

[131, 157, 128], [108, 95, 86], [147, 137, 128], [217, 200, 170], [245, 211, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #839D80, #6C5F56, #938980, #D9C8AA, #F5D3AE is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #839d80; --color-2: #6c5f56; --color-3: #938980; --color-4: #d9c8aa; --color-5: #f5d3ae. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. 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