← Back to Editor

#C9C9C9 · #CAB100 · #DEBF42 · #C88B78 · #DEBAAC

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

#C9C9C9

Silver Gray · Silver · Pearl Gray

HEX
#C9C9C9
RGB
rgb(201, 201, 201)
HSL
hsl(0, 0%, 79%)
HSB
hsb(0, 0%, 79%)
CMYK
cmyk(0%, 0%, 0%, 21%)
Oklch
oklch(83.6% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#CAB100

Autumn Sage · GoldenRod · Honey Gold

HEX
#CAB100
RGB
rgb(202, 177, 0)
HSL
hsl(53, 100%, 40%)
HSB
hsb(53, 100%, 79%)
CMYK
cmyk(0%, 12%, 100%, 21%)
Oklch
oklch(75.9% 0.157 99.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#DEBF42

Ginger · GoldenRod · Sunflower

HEX
#DEBF42
RGB
rgb(222, 191, 66)
HSL
hsl(48, 70%, 56%)
HSB
hsb(48, 70%, 87%)
CMYK
cmyk(0%, 14%, 70%, 13%)
Oklch
oklch(81.0% 0.143 94.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C88B78

Peach Pink · DarkSalmon · Coral Red

HEX
#C88B78
RGB
rgb(200, 139, 120)
HSL
hsl(14, 42%, 63%)
HSB
hsb(14, 40%, 78%)
CMYK
cmyk(0%, 31%, 40%, 22%)
Oklch
oklch(69.3% 0.080 38.0)

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

#DEBAAC

Apricot · Tan · Peach Orange

HEX
#DEBAAC
RGB
rgb(222, 186, 172)
HSL
hsl(17, 43%, 77%)
HSB
hsb(17, 23%, 87%)
CMYK
cmyk(0%, 16%, 23%, 13%)
Oklch
oklch(81.7% 0.046 42.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C9C9C9
C9C9C9

Analogous

C9C9C9
C9C9C9
C9C9C9

Triadic

C9C9C9
C9C9C9
C9C9C9

Split-Comp.

C9C9C9
C9C9C9
C9C9C9

Tetradic

C9C9C9
C9C9C9
C9C9C9
C9C9C9

Contrast Matrix WCAG 2.1 Contrast

C9C9C9
CAB100
DEBF42
C88B78
DEBAAC
—
1.3
Fail
1.1
Fail
1.7
Fail
1.1
Fail
1.3
Fail
—
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
1.2
Fail
—
1.6
Fail
1.0
Fail
1.7
Fail
1.3
Fail
1.6
Fail
—
1.6
Fail
1.1
Fail
1.2
Fail
1.0
Fail
1.6
Fail
—
White BG
1.7Fail
2.1Fail
1.8Fail
2.8Fail
1.8Fail
Black BG
12.7AAA
9.8AAA
11.6AAA
7.4AAA
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C9C9
BFBF2B
D1D060
AEAD7D
CECEAF

Deuteranopia

C9C9C9
C1C235
D2D568
B1B67E
D1D3B0

Tritanopia

C9C9C9
C94D54
DC787D
C58081
DCB2B3

Achromatopsia

C9C9C9
A4A4A4
BABABA
9B9B9B
C3C3C3

Shades & Tints Shades & Tints

#C9C9C9

Dark
Light

#CAB100

Dark
Light

#DEBF42

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c9c9c9;
  --color-2: #cab100;
  --color-3: #debf42;
  --color-4: #c88b78;
  --color-5: #debaac;
}

SCSS

$color-1: #c9c9c9;
$color-2: #cab100;
$color-3: #debf42;
$color-4: #c88b78;
$color-5: #debaac;

TAILWIND

colors: {
  'brand-1': '#c9c9c9',
  'brand-2': '#cab100',
  'brand-3': '#debf42',
  'brand-4': '#c88b78',
  'brand-5': '#debaac',
}

RGB Array

[201, 201, 201], [202, 177, 0], [222, 191, 66], [200, 139, 120], [222, 186, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This skin-style palette of #C9C9C9, #CAB100, #DEBF42, #C88B78, #DEBAAC 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: #c9c9c9; --color-2: #cab100; --color-3: #debf42; --color-4: #c88b78; --color-5: #debaac. 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