← Back to Editor

#9F937E · #B68A77 · #D97567 · #AC706E · #887378

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

#9F937E

Ginger · Gray · Warm Sun

HEX
#9F937E
RGB
rgb(159, 147, 126)
HSL
hsl(38, 15%, 56%)
HSB
hsb(38, 21%, 62%)
CMYK
cmyk(0%, 8%, 21%, 38%)
Oklch
oklch(66.8% 0.033 81.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#B68A77

Tangerine · DarkSalmon · Warm Sun

HEX
#B68A77
RGB
rgb(182, 138, 119)
HSL
hsl(18, 30%, 59%)
HSB
hsb(18, 35%, 71%)
CMYK
cmyk(0%, 24%, 35%, 29%)
Oklch
oklch(67.1% 0.061 44.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D97567

Peach Pink · LightCoral · Coral Red

HEX
#D97567
RGB
rgb(217, 117, 103)
HSL
hsl(7, 60%, 63%)
HSB
hsb(7, 53%, 85%)
CMYK
cmyk(0%, 46%, 53%, 15%)
Oklch
oklch(67.2% 0.128 29.2)

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

#AC706E

Crimson · Gray · Passion Red

HEX
#AC706E
RGB
rgb(172, 112, 110)
HSL
hsl(2, 27%, 55%)
HSB
hsb(2, 36%, 67%)
CMYK
cmyk(0%, 35%, 36%, 33%)
Oklch
oklch(60.8% 0.077 21.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#887378

Crimson · Gray · Warm Gray

HEX
#887378
RGB
rgb(136, 115, 120)
HSL
hsl(346, 8%, 49%)
HSB
hsb(346, 15%, 53%)
CMYK
cmyk(0%, 15%, 12%, 47%)
Oklch
oklch(57.7% 0.027 1.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9F937E
7E8AA0

Analogous

A0827E
9F937E
9BA07E

Triadic

9F937E
7EA093
937EA0

Split-Comp.

9F937E
7E9BA0
827EA0

Tetradic

9F937E
7EA082
7E8AA0
A07E9B

Contrast Matrix WCAG 2.1 Contrast

9F937E
B68A77
D97567
AC706E
887378
—
1.0
Fail
1.0
Fail
1.3
Fail
1.5
Fail
1.0
Fail
—
1.0
Fail
1.3
Fail
1.4
Fail
1.0
Fail
1.0
Fail
—
1.3
Fail
1.4
Fail
1.3
Fail
1.3
Fail
1.3
Fail
—
1.1
Fail
1.5
Fail
1.4
Fail
1.4
Fail
1.1
Fail
—
White BG
3.0AA Large
3.0AA Large
3.1AA Large
4.0AA Large
4.4AA Large
Black BG
6.9AA
6.9AA
6.7AA
5.3AA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9A83
A3A37C
AEAD6A
92916E
7F7F77

Deuteranopia

9B9B84
A6A97D
B4BB6B
969A6F
808277

Tritanopia

9E8788
B47F80
D46D6E
A96F6F
877676

Achromatopsia

949494
959595
919191
828282
7A7A7A

Shades & Tints Shades & Tints

#9F937E

Dark
Light

#B68A77

Dark
Light

#D97567

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9f937e;
  --color-2: #b68a77;
  --color-3: #d97567;
  --color-4: #ac706e;
  --color-5: #887378;
}

SCSS

$color-1: #9f937e;
$color-2: #b68a77;
$color-3: #d97567;
$color-4: #ac706e;
$color-5: #887378;

TAILWIND

colors: {
  'brand-1': '#9f937e',
  'brand-2': '#b68a77',
  'brand-3': '#d97567',
  'brand-4': '#ac706e',
  'brand-5': '#887378',
}

RGB Array

[159, 147, 126], [182, 138, 119], [217, 117, 103], [172, 112, 110], [136, 115, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9F937E, #B68A77, #D97567, #AC706E, #887378 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #9f937e; --color-2: #b68a77; --color-3: #d97567; --color-4: #ac706e; --color-5: #887378. 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. 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