← Back to Editor

#D3AB82 · #C88375 · #BA687D · #AA5C90 · #8E5793

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

#D3AB82

Ginger · Tan · Warm Sun

HEX
#D3AB82
RGB
rgb(211, 171, 130)
HSL
hsl(30, 48%, 67%)
HSB
hsb(30, 38%, 83%)
CMYK
cmyk(0%, 19%, 38%, 17%)
Oklch
oklch(76.7% 0.072 67.1)

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

#C88375

Peach Pink · DarkSalmon · Coral Red

HEX
#C88375
RGB
rgb(200, 131, 117)
HSL
hsl(10, 43%, 62%)
HSB
hsb(10, 42%, 78%)
CMYK
cmyk(0%, 35%, 42%, 22%)
Oklch
oklch(67.7% 0.089 32.0)

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

#BA687D

Crimson · LightCoral · Passion Red

HEX
#BA687D
RGB
rgb(186, 104, 125)
HSL
hsl(345, 37%, 57%)
HSB
hsb(345, 44%, 73%)
CMYK
cmyk(0%, 44%, 33%, 27%)
Oklch
oklch(61.6% 0.107 4.3)

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

#AA5C90

Rose Purple · Gray · Rose Pink

HEX
#AA5C90
RGB
rgb(170, 92, 144)
HSL
hsl(320, 31%, 51%)
HSB
hsb(320, 46%, 67%)
CMYK
cmyk(0%, 46%, 15%, 33%)
Oklch
oklch(58.2% 0.121 341.1)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#8E5793

Dark Plum · Gray · Violet

HEX
#8E5793
RGB
rgb(142, 87, 147)
HSL
hsl(295, 26%, 46%)
HSB
hsb(295, 41%, 58%)
CMYK
cmyk(3%, 41%, 0%, 42%)
Oklch
oklch(54.1% 0.110 324.0)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3AB82
82ABD3

Analogous

D38282
D3AB82
D3D382

Triadic

D3AB82
82D3AB
AB82D3

Split-Comp.

D3AB82
82D3D3
8282D3

Tetradic

D3AB82
82D382
82ABD3
D382D3

Contrast Matrix WCAG 2.1 Contrast

D3AB82
C88375
BA687D
AA5C90
8E5793
—
1.4
Fail
1.8
Fail
2.1
Fail
2.5
Fail
1.4
Fail
—
1.3
Fail
1.5
Fail
1.8
Fail
1.8
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
2.1
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
2.5
Fail
1.8
Fail
1.4
Fail
1.2
Fail
—
White BG
2.1Fail
3.0AA Large
3.9AA Large
4.5AA
5.3AA
Black BG
9.9AAA
7.0AA
5.4AA
4.6AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C18C
AAAA78
969678
888883
767684

Deuteranopia

C4C78E
AEB379
9BA177
8D9380
797D81

Tritanopia

D19495
C57B7C
B67473
A67977
8B7977

Achromatopsia

B2B2B2
969696
838383
797979
6E6E6E

Shades & Tints Shades & Tints

#D3AB82

Dark
Light

#C88375

Dark
Light

#BA687D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3ab82;
  --color-2: #c88375;
  --color-3: #ba687d;
  --color-4: #aa5c90;
  --color-5: #8e5793;
}

SCSS

$color-1: #d3ab82;
$color-2: #c88375;
$color-3: #ba687d;
$color-4: #aa5c90;
$color-5: #8e5793;

TAILWIND

colors: {
  'brand-1': '#d3ab82',
  'brand-2': '#c88375',
  'brand-3': '#ba687d',
  'brand-4': '#aa5c90',
  'brand-5': '#8e5793',
}

RGB Array

[211, 171, 130], [200, 131, 117], [186, 104, 125], [170, 92, 144], [142, 87, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This skin-style palette of #D3AB82, #C88375, #BA687D, #AA5C90, #8E5793 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: #d3ab82; --color-2: #c88375; --color-3: #ba687d; --color-4: #aa5c90; --color-5: #8e5793. 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. 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