← Back to Editor

#9C9489 · #D96E6E · #E7665E · #F16E59 · #867954

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 Library

Color Details Color Details

#9C9489

Ginger · Gray · Silver Sand

HEX
#9C9489
RGB
rgb(156, 148, 137)
HSL
hsl(35, 9%, 57%)
HSB
hsb(35, 12%, 61%)
CMYK
cmyk(0%, 5%, 12%, 39%)
Oklch
oklch(67.0% 0.019 76.0)

Traditional「Ginger」· Paint「Silver Sand」· Creative Urban Concrete

#D96E6E

Peach Pink · LightCoral · Coral Red

HEX
#D96E6E
RGB
rgb(217, 110, 110)
HSL
hsl(0, 58%, 64%)
HSB
hsb(0, 49%, 85%)
CMYK
cmyk(0%, 49%, 49%, 15%)
Oklch
oklch(66.3% 0.135 21.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E7665E

Peach Pink · Tomato · Coral Red

HEX
#E7665E
RGB
rgb(231, 102, 94)
HSL
hsl(4, 74%, 64%)
HSB
hsb(4, 59%, 91%)
CMYK
cmyk(0%, 56%, 59%, 9%)
Oklch
oklch(66.8% 0.162 25.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F16E59

Peach Pink · Coral · Coral Red

HEX
#F16E59
RGB
rgb(241, 110, 89)
HSL
hsl(8, 84%, 65%)
HSB
hsb(8, 63%, 95%)
CMYK
cmyk(0%, 54%, 63%, 5%)
Oklch
oklch(69.2% 0.166 31.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#867954

Ochre · DimGray · Honey Gold

HEX
#867954
RGB
rgb(134, 121, 84)
HSL
hsl(44, 23%, 43%)
HSB
hsb(44, 37%, 53%)
CMYK
cmyk(0%, 10%, 37%, 47%)
Oklch
oklch(57.8% 0.055 90.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C9489
87909B

Analogous

9B8987
9C9489
9A9B87

Triadic

9C9489
879B93
93879B

Split-Comp.

9C9489
879A9B
89879B

Tetradic

9C9489
879B89
87909B
9B879A

Contrast Matrix WCAG 2.1 Contrast

9C9489
D96E6E
E7665E
F16E59
867954
—
1.1
Fail
1.1
Fail
1.0
Fail
1.4
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.5
Fail
1.4
Fail
1.3
Fail
1.3
Fail
1.5
Fail
—
White BG
3.0Fail
3.3AA Large
3.3AA Large
3.0Fail
4.3AA Large
Black BG
7.0AAA
6.4AA
6.5AA
7.1AAA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

99988C
ABAA6E
AFAE60
B8B75E
80805D

Deuteranopia

999A8C
B1B96E
B7C060
C0CA5F
81825F

Tritanopia

9C8E8E
D46E6E
E16162
EA6263
856466

Achromatopsia

959595
8E8E8E
8C8C8C
939393
797979

Shades & Tints Shades & Tints

#9C9489

Dark
Light

#D96E6E

Dark
Light

#E7665E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c9489;
  --color-2: #d96e6e;
  --color-3: #e7665e;
  --color-4: #f16e59;
  --color-5: #867954;
}

SCSS

$color-1: #9c9489;
$color-2: #d96e6e;
$color-3: #e7665e;
$color-4: #f16e59;
$color-5: #867954;

TAILWIND

colors: {
  'brand-1': '#9c9489',
  'brand-2': '#d96e6e',
  'brand-3': '#e7665e',
  'brand-4': '#f16e59',
  'brand-5': '#867954',
}

RGB Array

[156, 148, 137], [217, 110, 110], [231, 102, 94], [241, 110, 89], [134, 121, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9C9489, #D96E6E, #E7665E, #F16E59, #867954 is ideal for: corporate websites, product showcases, portfolios. 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: #9c9489; --color-2: #d96e6e; --color-3: #e7665e; --color-4: #f16e59; --color-5: #867954. 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. 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