← Back to Editor

#FCFCFE · #F8FCFF · #EBF2F8 · #C4D5DC · #8894A0

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#FCFCFE

Wisteria · White · Sky Blue

HEX
#FCFCFE
RGB
rgb(252, 252, 254)
HSL
hsl(240, 50%, 99%)
HSB
hsb(240, 1%, 100%)
CMYK
cmyk(1%, 1%, 0%, 0%)
Oklch
oklch(99.2% 0.003 286.4)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#F8FCFF

Sky Blue · White · Sky Blue

HEX
#F8FCFF
RGB
rgb(248, 252, 255)
HSL
hsl(206, 100%, 99%)
HSB
hsb(206, 3%, 100%)
CMYK
cmyk(3%, 1%, 0%, 0%)
Oklch
oklch(98.9% 0.006 239.8)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#EBF2F8

Sky Blue · Lavender · Sky Blue

HEX
#EBF2F8
RGB
rgb(235, 242, 248)
HSL
hsl(208, 48%, 95%)
HSB
hsb(208, 5%, 97%)
CMYK
cmyk(5%, 2%, 0%, 3%)
Oklch
oklch(95.8% 0.011 243.7)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#C4D5DC

Sky Blue · LightGray · Glacier Blue

HEX
#C4D5DC
RGB
rgb(196, 213, 220)
HSL
hsl(198, 26%, 82%)
HSB
hsb(198, 11%, 86%)
CMYK
cmyk(11%, 3%, 0%, 14%)
Oklch
oklch(86.2% 0.021 224.3)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#8894A0

Azure · LightSlateGray · Navy Blue

HEX
#8894A0
RGB
rgb(136, 148, 160)
HSL
hsl(210, 11%, 58%)
HSB
hsb(210, 15%, 63%)
CMYK
cmyk(15%, 7%, 0%, 37%)
Oklch
oklch(66.1% 0.023 248.2)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCFCFE
FEFEFB

Analogous

FBFCFE
FCFCFE
FCFBFE

Triadic

FCFCFE
FEFBFB
FBFEFB

Split-Comp.

FCFCFE
FEFCFB
FCFEFB

Tetradic

FCFCFE
FEFBFC
FEFEFB
FBFEFC

Contrast Matrix WCAG 2.1 Contrast

FCFCFE
F8FCFF
EBF2F8
C4D5DC
8894A0
—
1.0
Fail
1.1
Fail
1.5
Fail
3.0
AA Large
1.0
Fail
—
1.1
Fail
1.5
Fail
3.0
Fail
1.1
Fail
1.1
Fail
—
1.3
Fail
2.7
Fail
1.5
Fail
1.5
Fail
1.3
Fail
—
2.0
Fail
3.0
AA Large
3.0
Fail
2.7
Fail
2.0
Fail
—
White BG
1.0Fail
1.0Fail
1.1Fail
1.5Fail
3.1AA Large
Black BG
20.5AAA
20.4AAA
18.6AAA
13.9AAA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFCFE
FAFAFE
EEEEF7
CBCCDA
8D8D9D

Deuteranopia

FCFCFD
FAF9FE
EEEDF6
CAC9DA
8D8C9C

Tritanopia

FCFDFD
F8FEFE
EBF5F5
C5D9D9
899B9A

Achromatopsia

FCFCFC
FBFBFB
F1F1F1
D1D1D1
929292

Shades & Tints Shades & Tints

#FCFCFE

Dark
Light

#F8FCFF

Dark
Light

#EBF2F8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcfcfe;
  --color-2: #f8fcff;
  --color-3: #ebf2f8;
  --color-4: #c4d5dc;
  --color-5: #8894a0;
}

SCSS

$color-1: #fcfcfe;
$color-2: #f8fcff;
$color-3: #ebf2f8;
$color-4: #c4d5dc;
$color-5: #8894a0;

TAILWIND

colors: {
  'brand-1': '#fcfcfe',
  'brand-2': '#f8fcff',
  'brand-3': '#ebf2f8',
  'brand-4': '#c4d5dc',
  'brand-5': '#8894a0',
}

RGB Array

[252, 252, 254], [248, 252, 255], [235, 242, 248], [196, 213, 220], [136, 148, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FCFCFE, #F8FCFF, #EBF2F8, #C4D5DC, #8894A0 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #fcfcfe; --color-2: #f8fcff; --color-3: #ebf2f8; --color-4: #c4d5dc; --color-5: #8894a0. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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