← Back to Editor

#ECC8B8 · #D2BCA7 · #B8A49B · #8C7A6E · #876D56

skin

A 5-color skin 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

#ECC8B8

Apricot · Wheat · Peach Orange

HEX
#ECC8B8
RGB
rgb(236, 200, 184)
HSL
hsl(18, 58%, 82%)
HSB
hsb(18, 22%, 93%)
CMYK
cmyk(0%, 15%, 22%, 7%)
Oklch
oklch(85.9% 0.047 45.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D2BCA7

Apricot · Tan · Warm Sun

HEX
#D2BCA7
RGB
rgb(210, 188, 167)
HSL
hsl(29, 32%, 74%)
HSB
hsb(29, 20%, 82%)
CMYK
cmyk(0%, 10%, 20%, 18%)
Oklch
oklch(80.8% 0.038 65.9)

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

#B8A49B

Apricot · DarkGray · Warm Sun

HEX
#B8A49B
RGB
rgb(184, 164, 155)
HSL
hsl(19, 17%, 66%)
HSB
hsb(19, 16%, 72%)
CMYK
cmyk(0%, 11%, 16%, 28%)
Oklch
oklch(73.3% 0.027 45.8)

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

#8C7A6E

Tangerine · Gray · Amber Brown

HEX
#8C7A6E
RGB
rgb(140, 122, 110)
HSL
hsl(24, 12%, 49%)
HSB
hsb(24, 21%, 55%)
CMYK
cmyk(0%, 13%, 21%, 45%)
Oklch
oklch(59.3% 0.029 55.8)

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

#876D56

Tangerine · DimGray · Amber Brown

HEX
#876D56
RGB
rgb(135, 109, 86)
HSL
hsl(28, 22%, 43%)
HSB
hsb(28, 36%, 53%)
CMYK
cmyk(0%, 19%, 36%, 47%)
Oklch
oklch(55.4% 0.047 63.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECC8B8
B6DCEC

Analogous

ECB6C1
ECC8B8
ECE1B6

Triadic

ECC8B8
B6ECC6
C6B6EC

Split-Comp.

ECC8B8
B6ECE1
B6C1EC

Tetradic

ECC8B8
C1ECB6
B6DCEC
E1B6EC

Contrast Matrix WCAG 2.1 Contrast

ECC8B8
D2BCA7
B8A49B
8C7A6E
876D56
—
1.2
Fail
1.5
Fail
2.6
Fail
3.1
AA Large
1.2
Fail
—
1.3
Fail
2.2
Fail
2.6
Fail
1.5
Fail
1.3
Fail
—
1.7
Fail
2.0
Fail
2.6
Fail
2.2
Fail
1.7
Fail
—
1.2
Fail
3.1
AA Large
2.6
Fail
2.0
Fail
1.2
Fail
—
White BG
1.6Fail
1.8Fail
2.4Fail
4.1AA Large
4.8AA
Black BG
13.5AAA
11.5AAA
8.8AAA
5.1AA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCBC
C8C8AC
AFAF9D
848471
7C7C5C

Deuteranopia

DFE1BD
CACBAD
B1B29E
858772
7D7F5D

Tritanopia

EABFC0
D1B0B1
B79F9F
8B7374
866061

Achromatopsia

D1D1D1
C0C0C0
A9A9A9
7E7E7E
727272

Shades & Tints Shades & Tints

#ECC8B8

Dark
Light

#D2BCA7

Dark
Light

#B8A49B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecc8b8;
  --color-2: #d2bca7;
  --color-3: #b8a49b;
  --color-4: #8c7a6e;
  --color-5: #876d56;
}

SCSS

$color-1: #ecc8b8;
$color-2: #d2bca7;
$color-3: #b8a49b;
$color-4: #8c7a6e;
$color-5: #876d56;

TAILWIND

colors: {
  'brand-1': '#ecc8b8',
  'brand-2': '#d2bca7',
  'brand-3': '#b8a49b',
  'brand-4': '#8c7a6e',
  'brand-5': '#876d56',
}

RGB Array

[236, 200, 184], [210, 188, 167], [184, 164, 155], [140, 122, 110], [135, 109, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This skin-style palette of #ECC8B8, #D2BCA7, #B8A49B, #8C7A6E, #876D56 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: #ecc8b8; --color-2: #d2bca7; --color-3: #b8a49b; --color-4: #8c7a6e; --color-5: #876d56. 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 skin-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