← Back to Editor

#9B6B61 · #B47468 · #CD9586 · #DBB89B · #DDC6A6

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

#9B6B61

Crimson · Gray · Passion Red

HEX
#9B6B61
RGB
rgb(155, 107, 97)
HSL
hsl(10, 23%, 49%)
HSB
hsb(10, 37%, 61%)
CMYK
cmyk(0%, 31%, 37%, 39%)
Oklch
oklch(57.5% 0.064 32.2)

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

#B47468

Crimson · Gray · Passion Red

HEX
#B47468
RGB
rgb(180, 116, 104)
HSL
hsl(9, 34%, 56%)
HSB
hsb(9, 42%, 71%)
CMYK
cmyk(0%, 36%, 42%, 29%)
Oklch
oklch(62.3% 0.084 31.2)

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

#CD9586

Peach Pink · DarkSalmon · Coral Red

HEX
#CD9586
RGB
rgb(205, 149, 134)
HSL
hsl(13, 42%, 66%)
HSB
hsb(13, 35%, 80%)
CMYK
cmyk(0%, 27%, 35%, 20%)
Oklch
oklch(72.0% 0.072 35.6)

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

#DBB89B

Apricot · Tan · Warm Sun

HEX
#DBB89B
RGB
rgb(219, 184, 155)
HSL
hsl(27, 47%, 73%)
HSB
hsb(27, 29%, 86%)
CMYK
cmyk(0%, 16%, 29%, 14%)
Oklch
oklch(80.6% 0.056 61.5)

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

#DDC6A6

Goose Yellow · Tan · Peach Orange

HEX
#DDC6A6
RGB
rgb(221, 198, 166)
HSL
hsl(35, 45%, 76%)
HSB
hsb(35, 25%, 87%)
CMYK
cmyk(0%, 10%, 25%, 13%)
Oklch
oklch(83.8% 0.050 76.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B6B61
60909A

Analogous

9A6073
9B6B61
9A8760

Triadic

9B6B61
609A6A
6A609A

Split-Comp.

9B6B61
609A87
60739A

Tetradic

9B6B61
739A60
60909A
87609A

Contrast Matrix WCAG 2.1 Contrast

9B6B61
B47468
CD9586
DBB89B
DDC6A6
—
1.2
Fail
1.8
Fail
2.4
Fail
2.7
Fail
1.2
Fail
—
1.5
Fail
2.0
Fail
2.3
Fail
1.8
Fail
1.5
Fail
—
1.4
Fail
1.5
Fail
2.4
Fail
2.0
Fail
1.4
Fail
—
1.1
Fail
2.7
Fail
2.3
Fail
1.5
Fail
1.1
Fail
—
White BG
4.5AA Large
3.7AA Large
2.5Fail
1.9Fail
1.7Fail
Black BG
4.7AA
5.6AA
8.2AAA
11.3AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

868663
98986B
B5B48A
CCCCA2
D3D3AE

Deuteranopia

898D64
9CA16C
B8BC8B
CED0A4
D4D6B0

Tritanopia

996566
B16D6E
CA8C8D
D9A8A9
DCB4B5

Achromatopsia

787878
868686
A4A4A4
BFBFBF
C9C9C9

Shades & Tints Shades & Tints

#9B6B61

Dark
Light

#B47468

Dark
Light

#CD9586

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b6b61;
  --color-2: #b47468;
  --color-3: #cd9586;
  --color-4: #dbb89b;
  --color-5: #ddc6a6;
}

SCSS

$color-1: #9b6b61;
$color-2: #b47468;
$color-3: #cd9586;
$color-4: #dbb89b;
$color-5: #ddc6a6;

TAILWIND

colors: {
  'brand-1': '#9b6b61',
  'brand-2': '#b47468',
  'brand-3': '#cd9586',
  'brand-4': '#dbb89b',
  'brand-5': '#ddc6a6',
}

RGB Array

[155, 107, 97], [180, 116, 104], [205, 149, 134], [219, 184, 155], [221, 198, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B6B61, #B47468, #CD9586, #DBB89B, #DDC6A6 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: #9b6b61; --color-2: #b47468; --color-3: #cd9586; --color-4: #dbb89b; --color-5: #ddc6a6. 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