← Back to Editor

#C5C8C4 · #B6C2C3 · #9AB2B5 · #878990 · #ACA387

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C5C8C4

Silver Gray · Silver · Pearl Gray

HEX
#C5C8C4
RGB
rgb(197, 200, 196)
HSL
hsl(105, 4%, 78%)
HSB
hsb(105, 2%, 78%)
CMYK
cmyk(1%, 0%, 2%, 22%)
Oklch
oklch(82.9% 0.006 137.8)

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

#B6C2C3

Sky Blue · Silver · Lake Green

HEX
#B6C2C3
RGB
rgb(182, 194, 195)
HSL
hsl(185, 10%, 74%)
HSB
hsb(185, 7%, 76%)
CMYK
cmyk(7%, 1%, 0%, 24%)
Oklch
oklch(80.5% 0.013 202.9)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#9AB2B5

Sky Blue · DarkGray · Lake Green

HEX
#9AB2B5
RGB
rgb(154, 178, 181)
HSL
hsl(187, 15%, 66%)
HSB
hsb(187, 15%, 71%)
CMYK
cmyk(15%, 2%, 0%, 29%)
Oklch
oklch(74.6% 0.027 205.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#878990

Ash · LightSlateGray · Warm Gray

HEX
#878990
RGB
rgb(135, 137, 144)
HSL
hsl(227, 4%, 55%)
HSB
hsb(227, 6%, 56%)
CMYK
cmyk(6%, 5%, 0%, 44%)
Oklch
oklch(63.1% 0.011 273.3)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#ACA387

Ginger · DarkGray · Sunflower

HEX
#ACA387
RGB
rgb(172, 163, 135)
HSL
hsl(45, 18%, 60%)
HSB
hsb(45, 22%, 67%)
CMYK
cmyk(0%, 5%, 22%, 33%)
Oklch
oklch(71.6% 0.040 92.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5C8C4
C8C5C9

Analogous

C8C9C5
C5C8C4
C5C9C6

Triadic

C5C8C4
C5C6C9
C9C5C6

Split-Comp.

C5C8C4
C6C5C9
C9C5C8

Tetradic

C5C8C4
C5C8C9
C8C5C9
C9C6C5

Contrast Matrix WCAG 2.1 Contrast

C5C8C4
B6C2C3
9AB2B5
878990
ACA387
—
1.1
Fail
1.3
Fail
2.1
Fail
1.5
Fail
1.1
Fail
—
1.2
Fail
1.9
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
1.6
Fail
1.1
Fail
2.1
Fail
1.9
Fail
1.6
Fail
—
1.4
Fail
1.5
Fail
1.4
Fail
1.1
Fail
1.4
Fail
—
White BG
1.7Fail
1.8Fail
2.2Fail
3.5AA Large
2.5Fail
Black BG
12.4AAA
11.5AAA
9.4AAA
6.0AA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C6C5
BBBBC3
A4A5B4
88888E
A8A88E

Deuteranopia

C6C6C5
BBBAC3
A3A1B4
88888E
A9A98F

Tritanopia

C5C6C6
B7C3C3
9BB4B4
878D8D
AC9394

Achromatopsia

C7C7C7
BFBFBF
ABABAB
898989
A2A2A2

Shades & Tints Shades & Tints

#C5C8C4

Dark
Light

#B6C2C3

Dark
Light

#9AB2B5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5c8c4;
  --color-2: #b6c2c3;
  --color-3: #9ab2b5;
  --color-4: #878990;
  --color-5: #aca387;
}

SCSS

$color-1: #c5c8c4;
$color-2: #b6c2c3;
$color-3: #9ab2b5;
$color-4: #878990;
$color-5: #aca387;

TAILWIND

colors: {
  'brand-1': '#c5c8c4',
  'brand-2': '#b6c2c3',
  'brand-3': '#9ab2b5',
  'brand-4': '#878990',
  'brand-5': '#aca387',
}

RGB Array

[197, 200, 196], [182, 194, 195], [154, 178, 181], [135, 137, 144], [172, 163, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5C8C4, #B6C2C3, #9AB2B5, #878990, #ACA387 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. 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: #c5c8c4; --color-2: #b6c2c3; --color-3: #9ab2b5; --color-4: #878990; --color-5: #aca387. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts 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