← Back to Editor

#D2A274 · #C67754 · #80634C · #3B4948 · #2C2329

skin

A 5-color skin palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D2A274

Apricot · DarkSalmon · Warm Sun

HEX
#D2A274
RGB
rgb(210, 162, 116)
HSL
hsl(29, 51%, 64%)
HSB
hsb(29, 45%, 82%)
CMYK
cmyk(0%, 23%, 45%, 18%)
Oklch
oklch(74.6% 0.084 64.8)

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

#C67754

Tangerine · Chocolate · Warm Sun

HEX
#C67754
RGB
rgb(198, 119, 84)
HSL
hsl(18, 50%, 55%)
HSB
hsb(18, 58%, 78%)
CMYK
cmyk(0%, 40%, 58%, 22%)
Oklch
oklch(64.7% 0.111 44.3)

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

#80634C

Tangerine · DimGray · Amber Brown

HEX
#80634C
RGB
rgb(128, 99, 76)
HSL
hsl(27, 25%, 40%)
HSB
hsb(27, 41%, 50%)
CMYK
cmyk(0%, 23%, 41%, 50%)
Oklch
oklch(52.3% 0.051 59.8)

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

#3B4948

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#3B4948
RGB
rgb(59, 73, 72)
HSL
hsl(176, 11%, 26%)
HSB
hsb(176, 19%, 29%)
CMYK
cmyk(19%, 0%, 1%, 71%)
Oklch
oklch(39.3% 0.018 191.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#2C2329

Rose Purple · DarkSlateGray · Raspberry

HEX
#2C2329
RGB
rgb(44, 35, 41)
HSL
hsl(320, 11%, 15%)
HSB
hsb(320, 20%, 17%)
CMYK
cmyk(0%, 20%, 7%, 83%)
Oklch
oklch(26.9% 0.017 338.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2A274
74A5D2

Analogous

D27476
D2A274
D2D074

Triadic

D2A274
74D2A2
A274D2

Split-Comp.

D2A274
74D2D0
7476D2

Tetradic

D2A274
76D274
74A5D2
D074D2

Contrast Matrix WCAG 2.1 Contrast

D2A274
C67754
80634C
3B4948
2C2329
—
1.5
Fail
2.4
Fail
4.1
AA Large
6.6
AA
1.5
Fail
—
1.6
Fail
2.8
Fail
4.5
AA Large
2.4
Fail
1.6
Fail
—
1.7
Fail
2.8
Fail
4.1
AA Large
2.8
Fail
1.7
Fail
—
1.6
Fail
6.6
AA
4.5
AA Large
2.8
Fail
1.6
Fail
—
White BG
2.3Fail
3.4AA Large
5.5AA
9.4AAA
15.2AAA
Black BG
9.2AAA
6.2AA
3.8AA Large
2.2Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBD7F
A4A35C
737352
414148
282828

Deuteranopia

C0C482
A8AE5F
757753
403F48
292927

Tritanopia

D0888A
C26365
7F5657
3C4848
2C2626

Achromatopsia

ABABAB
8B8B8B
696969
454545
262626

Shades & Tints Shades & Tints

#D2A274

Dark
Light

#C67754

Dark
Light

#80634C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2a274;
  --color-2: #c67754;
  --color-3: #80634c;
  --color-4: #3b4948;
  --color-5: #2c2329;
}

SCSS

$color-1: #d2a274;
$color-2: #c67754;
$color-3: #80634c;
$color-4: #3b4948;
$color-5: #2c2329;

TAILWIND

colors: {
  'brand-1': '#d2a274',
  'brand-2': '#c67754',
  'brand-3': '#80634c',
  'brand-4': '#3b4948',
  'brand-5': '#2c2329',
}

RGB Array

[210, 162, 116], [198, 119, 84], [128, 99, 76], [59, 73, 72], [44, 35, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This skin-style palette of #D2A274, #C67754, #80634C, #3B4948, #2C2329 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #d2a274; --color-2: #c67754; --color-3: #80634c; --color-4: #3b4948; --color-5: #2c2329. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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