← Back to Editor

#86938C · #4D4B4E · #DD696E · #E5AC8C · #ECCD98

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

#86938C

Ash · LightSlateGray · Warm Gray

HEX
#86938C
RGB
rgb(134, 147, 140)
HSL
hsl(148, 6%, 55%)
HSB
hsb(148, 9%, 58%)
CMYK
cmyk(9%, 0%, 5%, 42%)
Oklch
oklch(65.1% 0.018 162.5)

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

#4D4B4E

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4D4B4E
RGB
rgb(77, 75, 78)
HSL
hsl(280, 2%, 30%)
HSB
hsb(280, 4%, 31%)
CMYK
cmyk(1%, 4%, 0%, 69%)
Oklch
oklch(41.6% 0.006 314.8)

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

#DD696E

Peach Pink · LightCoral · Coral Red

HEX
#DD696E
RGB
rgb(221, 105, 110)
HSL
hsl(357, 63%, 64%)
HSB
hsb(357, 52%, 87%)
CMYK
cmyk(0%, 52%, 50%, 13%)
Oklch
oklch(66.1% 0.145 19.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#E5AC8C

Apricot · BurlyWood · Warm Sun

HEX
#E5AC8C
RGB
rgb(229, 172, 140)
HSL
hsl(22, 63%, 72%)
HSB
hsb(22, 39%, 90%)
CMYK
cmyk(0%, 25%, 39%, 10%)
Oklch
oklch(79.0% 0.080 50.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#ECCD98

Goose Yellow · Khaki · Peach Orange

HEX
#ECCD98
RGB
rgb(236, 205, 152)
HSL
hsl(38, 69%, 76%)
HSB
hsb(38, 36%, 93%)
CMYK
cmyk(0%, 13%, 36%, 7%)
Oklch
oklch(86.2% 0.077 80.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86938C
93858D

Analogous

869385
86938C
859393

Triadic

86938C
8C8593
938C85

Split-Comp.

86938C
938593
938586

Tetradic

86938C
858693
93858D
939385

Contrast Matrix WCAG 2.1 Contrast

86938C
4D4B4E
DD696E
E5AC8C
ECCD98
—
2.7
Fail
1.0
Fail
1.6
Fail
2.1
Fail
2.7
Fail
—
2.6
Fail
4.4
AA Large
5.7
AA
1.0
Fail
2.6
Fail
—
1.7
Fail
2.2
Fail
1.6
Fail
4.4
AA Large
1.7
Fail
—
1.3
Fail
2.1
Fail
5.7
AA
2.2
Fail
1.3
Fail
—
White BG
3.2AA Large
8.6AAA
3.3AA Large
2.0Fail
1.5Fail
Black BG
6.6AA
2.4Fail
6.3AA
10.6AAA
13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C8E
4C4C4D
ABAA6D
CCCC94
DFDEA5

Deuteranopia

8B8A8E
4C4C4D
B2BA6D
D0D496
E0E3A8

Tritanopia

878F8F
4D4D4D
D76C6C
E29A9B
EAAFB1

Achromatopsia

8E8E8E
4C4C4C
8C8C8C
B9B9B9
D0D0D0

Shades & Tints Shades & Tints

#86938C

Dark
Light

#4D4B4E

Dark
Light

#DD696E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86938c;
  --color-2: #4d4b4e;
  --color-3: #dd696e;
  --color-4: #e5ac8c;
  --color-5: #eccd98;
}

SCSS

$color-1: #86938c;
$color-2: #4d4b4e;
$color-3: #dd696e;
$color-4: #e5ac8c;
$color-5: #eccd98;

TAILWIND

colors: {
  'brand-1': '#86938c',
  'brand-2': '#4d4b4e',
  'brand-3': '#dd696e',
  'brand-4': '#e5ac8c',
  'brand-5': '#eccd98',
}

RGB Array

[134, 147, 140], [77, 75, 78], [221, 105, 110], [229, 172, 140], [236, 205, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86938C, #4D4B4E, #DD696E, #E5AC8C, #ECCD98 is ideal for: 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: #86938c; --color-2: #4d4b4e; --color-3: #dd696e; --color-4: #e5ac8c; --color-5: #eccd98. 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. 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