#989E9C + #C7C8C9 + #ECFFEC + #FCFCEE + #E9E9E9 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#989E9C

Ash · DarkGray · Silver Sand

HEX

#989E9C

RGB

rgb(152, 158, 156)

HSL

hsl(160, 3%, 61%)

HSB

hsb(160, 4%, 62%)

CMYK

cmyk(4%, 0%, 1%, 38%)

Oklch

oklch(69.4% 0.007 174.3)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C7C8C9

Silver Gray · Silver · Pearl Gray

HEX

#C7C8C9

RGB

rgb(199, 200, 201)

HSL

hsl(210, 2%, 78%)

HSB

hsb(210, 1%, 79%)

CMYK

cmyk(1%, 0%, 0%, 21%)

Oklch

oklch(83.2% 0.002 247.8)

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

#ECFFEC

Emerald · Beige · Mint Green

HEX

#ECFFEC

RGB

rgb(236, 255, 236)

HSL

hsl(120, 100%, 96%)

HSB

hsb(120, 7%, 100%)

CMYK

cmyk(7%, 0%, 7%, 0%)

Oklch

oklch(98.1% 0.032 145.3)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#FCFCEE

Fresh Green · SeaShell · Lemon Cream

HEX

#FCFCEE

RGB

rgb(252, 252, 238)

HSL

hsl(60, 70%, 96%)

HSB

hsb(60, 6%, 99%)

CMYK

cmyk(0%, 0%, 6%, 1%)

Oklch

oklch(98.7% 0.018 106.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#E9E9E9

Plain White · Lavender · Cloud White

HEX

#E9E9E9

RGB

rgb(233, 233, 233)

HSL

hsl(0, 0%, 91%)

HSB

hsb(0, 0%, 91%)

CMYK

cmyk(0%, 0%, 0%, 9%)

Oklch

oklch(93.4% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

989E9C

9F999B

Analogous

999F9A

989E9C

999E9F

Triadic

989E9C

9D999F

9F9D99

Split-Comp.

989E9C

9F999E

9F9A99

Tetradic

989E9C

9A999F

9F999B

9E9F99

Contrast Matrix WCAG 2.1 Contrast

989E9C	C7C8C9	ECFFEC	FCFCEE	E9E9E9
—	1.6 Fail	2.6 Fail	2.6 Fail	2.2 Fail
1.6 Fail	—	1.6 Fail	1.6 Fail	1.4 Fail
2.6 Fail	1.6 Fail	—	1.0 Fail	1.2 Fail
2.6 Fail	1.6 Fail	1.0 Fail	—	1.2 Fail
2.2 Fail	1.4 Fail	1.2 Fail	1.2 Fail	—

White BG

2.7Fail

1.7Fail

1.0Fail

1.2Fail

Black BG

7.7AAA

12.5AAA

20.1AAA

20.3AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9B9C

C7C7C9

F4F4F1

FCFCF1

E9E9E9

Deuteranopia

9A9A9D

C7C7C9

F3F2F2

FCFCF2

E9E9E9

Tritanopia

989D9D

C7C9C9

EDF4F5

FCF4F5

E9E9E9

Achromatopsia

9C9C9C

C8C8C8

F7F7F7

FAFAFA

E9E9E9

Shades & Tints Shades & Tints

#989E9C

Dark

Light

#C7C8C9

Dark

Light

#ECFFEC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #989e9c;
  --color-2: #c7c8c9;
  --color-3: #ecffec;
  --color-4: #fcfcee;
  --color-5: #e9e9e9;
}

SCSS

$color-1: #989e9c;
$color-2: #c7c8c9;
$color-3: #ecffec;
$color-4: #fcfcee;
$color-5: #e9e9e9;

TAILWIND

colors: {
  'brand-1': '#989e9c',
  'brand-2': '#c7c8c9',
  'brand-3': '#ecffec',
  'brand-4': '#fcfcee',
  'brand-5': '#e9e9e9',
}

RGB Array

[152, 158, 156], [199, 200, 201], [236, 255, 236], [252, 252, 238], [233, 233, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #989E9C, #C7C8C9, #ECFFEC, #FCFCEE, #E9E9E9 is ideal for: health products, baby brands, fresh-style blogs. 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: #989e9c; --color-2: #c7c8c9; --color-3: #ecffec; --color-4: #fcfcee; --color-5: #e9e9e9. 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 cool-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