← Back to Editor

#CCCCCC · #9CB6B8 · #79C4C9 · #6A888A · #DEDACE

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

#CCCCCC

Silver Gray · LightGray · Pearl Gray

HEX
#CCCCCC
RGB
rgb(204, 204, 204)
HSL
hsl(0, 0%, 80%)
HSB
hsb(0, 0%, 80%)
CMYK
cmyk(0%, 0%, 0%, 20%)
Oklch
oklch(84.5% 0.000 89.9)

TraditionalSilver Gray」· PaintPearl Gray」· Creative Silver Lining

#9CB6B8

Sky Blue · DarkGray · Lake Green

HEX
#9CB6B8
RGB
rgb(156, 182, 184)
HSL
hsl(184, 16%, 67%)
HSB
hsb(184, 15%, 72%)
CMYK
cmyk(15%, 1%, 0%, 28%)
Oklch
oklch(75.7% 0.029 202.3)

TraditionalSky Blue」· PaintLake Green」· Creative Arctic Pool

#79C4C9

Sky Blue · MediumAquaMarine · Lake Green

HEX
#79C4C9
RGB
rgb(121, 196, 201)
HSL
hsl(184, 43%, 63%)
HSB
hsb(184, 40%, 79%)
CMYK
cmyk(40%, 2%, 0%, 21%)
Oklch
oklch(77.3% 0.075 201.2)

TraditionalSky Blue」· PaintLake Green」· Creative Arctic Pool

#6A888A

Slate Blue · SlateGray · Mint Ice

HEX
#6A888A
RGB
rgb(106, 136, 138)
HSL
hsl(184, 13%, 48%)
HSB
hsb(184, 23%, 54%)
CMYK
cmyk(23%, 1%, 0%, 46%)
Oklch
oklch(60.4% 0.034 201.4)

TraditionalSlate Blue」· PaintMint Ice」· Creative Blush Sunrise

#DEDACE

Goose Yellow · LightGray · Lemon Cream

HEX
#DEDACE
RGB
rgb(222, 218, 206)
HSL
hsl(45, 20%, 84%)
HSB
hsb(45, 7%, 87%)
CMYK
cmyk(0%, 2%, 7%, 13%)
Oklch
oklch(88.8% 0.017 91.6)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCCCCC
CCCCCC

Analogous

CCCCCC
CCCCCC
CCCCCC

Triadic

CCCCCC
CCCCCC
CCCCCC

Split-Comp.

CCCCCC
CCCCCC
CCCCCC

Tetradic

CCCCCC
CCCCCC
CCCCCC
CCCCCC

Contrast Matrix WCAG 2.1 Contrast

CCCCCC
9CB6B8
79C4C9
6A888A
DEDACE
1.3
Fail
1.2
Fail
2.4
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.8
Fail
1.5
Fail
1.2
Fail
1.1
Fail
1.9
Fail
1.4
Fail
2.4
Fail
1.8
Fail
1.9
Fail
2.7
Fail
1.1
Fail
1.5
Fail
1.4
Fail
2.7
Fail
White BG
1.6Fail
2.1Fail
2.0Fail
3.8AA Large
1.4Fail
Black BG
13.1AAA
9.8AAA
10.6AAA
5.5AA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCCCC
A7A7B8
999AC8
77778A
DCDCD1

Deuteranopia

CCCCCC
A6A4B7
9590C8
757389
DDDDD2

Tritanopia

CCCCCC
9DB7B7
7DC7C7
6B8989
DED3D4

Achromatopsia

CCCCCC
AEAEAE
AEAEAE
7F7F7F
DADADA

Shades & Tints Shades & Tints

#CCCCCC

Dark
Light

#9CB6B8

Dark
Light

#79C4C9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cccccc;
  --color-2: #9cb6b8;
  --color-3: #79c4c9;
  --color-4: #6a888a;
  --color-5: #dedace;
}

SCSS

$color-1: #cccccc;
$color-2: #9cb6b8;
$color-3: #79c4c9;
$color-4: #6a888a;
$color-5: #dedace;

TAILWIND

colors: {
  'brand-1': '#cccccc',
  'brand-2': '#9cb6b8',
  'brand-3': '#79c4c9',
  'brand-4': '#6a888a',
  'brand-5': '#dedace',
}

RGB Array

[204, 204, 204], [156, 182, 184], [121, 196, 201], [106, 136, 138], [222, 218, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCCCCC, #9CB6B8, #79C4C9, #6A888A, #DEDACE 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: #cccccc; --color-2: #9cb6b8; --color-3: #79c4c9; --color-4: #6a888a; --color-5: #dedace. 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