← Back to Editor

#C9C9C1 · #F7B76D · #E8987D · #ABAD7D · #B88744

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

#C9C9C1

Silver Gray · Silver · Pearl Gray

HEX
#C9C9C1
RGB
rgb(201, 201, 193)
HSL
hsl(60, 7%, 77%)
HSB
hsb(60, 4%, 79%)
CMYK
cmyk(0%, 0%, 4%, 21%)
Oklch
oklch(83.4% 0.011 106.6)

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

#F7B76D

Ginger · SandyBrown · Warm Sun

HEX
#F7B76D
RGB
rgb(247, 183, 109)
HSL
hsl(32, 90%, 70%)
HSB
hsb(32, 56%, 97%)
CMYK
cmyk(0%, 26%, 56%, 3%)
Oklch
oklch(82.4% 0.118 69.0)

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

#E8987D

Apricot · DarkSalmon · Warm Sun

HEX
#E8987D
RGB
rgb(232, 152, 125)
HSL
hsl(15, 70%, 70%)
HSB
hsb(15, 46%, 91%)
CMYK
cmyk(0%, 34%, 46%, 9%)
Oklch
oklch(75.4% 0.104 39.4)

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

#ABAD7D

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ABAD7D
RGB
rgb(171, 173, 125)
HSL
hsl(63, 23%, 58%)
HSB
hsb(63, 28%, 68%)
CMYK
cmyk(1%, 0%, 28%, 32%)
Oklch
oklch(73.4% 0.065 109.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#B88744

Ochre · Chocolate · Amber Brown

HEX
#B88744
RGB
rgb(184, 135, 68)
HSL
hsl(35, 46%, 49%)
HSB
hsb(35, 63%, 72%)
CMYK
cmyk(0%, 27%, 63%, 28%)
Oklch
oklch(65.8% 0.103 72.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C9C9C1
C0C0C8

Analogous

C8C4C0
C9C9C1
C4C8C0

Triadic

C9C9C1
C0C8C8
C8C0C8

Split-Comp.

C9C9C1
C0C4C8
C4C0C8

Tetradic

C9C9C1
C0C8C4
C0C0C8
C8C0C4

Contrast Matrix WCAG 2.1 Contrast

C9C9C1
F7B76D
E8987D
ABAD7D
B88744
—
1.1
Fail
1.4
Fail
1.4
Fail
1.9
Fail
1.1
Fail
—
1.3
Fail
1.3
Fail
1.8
Fail
1.4
Fail
1.3
Fail
—
1.0
Fail
1.4
Fail
1.4
Fail
1.3
Fail
1.0
Fail
—
1.4
Fail
1.9
Fail
1.8
Fail
1.4
Fail
1.4
Fail
—
White BG
1.7Fail
1.8Fail
2.3Fail
2.3Fail
3.2AA Large
Black BG
12.6AAA
11.9AAA
9.2AAA
9.0AAA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C9C3
DBDB7F
C5C584
ACAC89
A3A254

Deuteranopia

C9C9C3
DFE483
CAD085
ACAC8B
A6A958

Tritanopia

C9C4C5
F48D90
E4898A
AB9294
B66164

Achromatopsia

C8C8C8
C2C2C2
ADADAD
A7A7A7
8E8E8E

Shades & Tints Shades & Tints

#C9C9C1

Dark
Light

#F7B76D

Dark
Light

#E8987D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c9c9c1;
  --color-2: #f7b76d;
  --color-3: #e8987d;
  --color-4: #abad7d;
  --color-5: #b88744;
}

SCSS

$color-1: #c9c9c1;
$color-2: #f7b76d;
$color-3: #e8987d;
$color-4: #abad7d;
$color-5: #b88744;

TAILWIND

colors: {
  'brand-1': '#c9c9c1',
  'brand-2': '#f7b76d',
  'brand-3': '#e8987d',
  'brand-4': '#abad7d',
  'brand-5': '#b88744',
}

RGB Array

[201, 201, 193], [247, 183, 109], [232, 152, 125], [171, 173, 125], [184, 135, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C9C9C1, #F7B76D, #E8987D, #ABAD7D, #B88744 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: #c9c9c1; --color-2: #f7b76d; --color-3: #e8987d; --color-4: #abad7d; --color-5: #b88744. 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