← Back to Editor

#FFFFFF · #EBEBEB · #C1CCDE · #919191 · #D6E5FF

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

TraditionalMoonlight White」· PaintCloud White」· Creative Morning Mist

#EBEBEB

Plain White · Lavender · Cloud White

HEX
#EBEBEB
RGB
rgb(235, 235, 235)
HSL
hsl(0, 0%, 92%)
HSB
hsb(0, 0%, 92%)
CMYK
cmyk(0%, 0%, 0%, 8%)
Oklch
oklch(94.0% 0.000 89.9)

TraditionalPlain White」· PaintCloud White」· Creative Morning Mist

#C1CCDE

Azure · LightSteelBlue · Sky Blue

HEX
#C1CCDE
RGB
rgb(193, 204, 222)
HSL
hsl(217, 31%, 81%)
HSB
hsb(217, 13%, 87%)
CMYK
cmyk(13%, 8%, 0%, 13%)
Oklch
oklch(84.2% 0.028 260.3)

TraditionalAzure」· PaintSky Blue」· Creative Twilight Haze

#919191

Ash · LightSlateGray · Silver Sand

HEX
#919191
RGB
rgb(145, 145, 145)
HSL
hsl(0, 0%, 57%)
HSB
hsb(0, 0%, 57%)
CMYK
cmyk(0%, 0%, 0%, 43%)
Oklch
oklch(65.7% 0.000 89.9)

TraditionalAsh」· PaintSilver Sand」· Creative Urban Concrete

#D6E5FF

Azure · Lavender · Sky Blue

HEX
#D6E5FF
RGB
rgb(214, 229, 255)
HSL
hsl(218, 100%, 92%)
HSB
hsb(218, 16%, 100%)
CMYK
cmyk(16%, 10%, 0%, 0%)
Oklch
oklch(91.9% 0.039 261.5)

TraditionalAzure」· PaintSky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFFFF
FFFFFF

Analogous

FFFFFF
FFFFFF
FFFFFF

Triadic

FFFFFF
FFFFFF
FFFFFF

Split-Comp.

FFFFFF
FFFFFF
FFFFFF

Tetradic

FFFFFF
FFFFFF
FFFFFF
FFFFFF

Contrast Matrix WCAG 2.1 Contrast

FFFFFF
EBEBEB
C1CCDE
919191
D6E5FF
1.2
Fail
1.6
Fail
3.2
AA Large
1.3
Fail
1.2
Fail
1.4
Fail
2.6
Fail
1.1
Fail
1.6
Fail
1.4
Fail
1.9
Fail
1.3
Fail
3.2
AA Large
2.6
Fail
1.9
Fail
2.5
Fail
1.3
Fail
1.1
Fail
1.3
Fail
2.5
Fail
White BG
1.0Fail
1.2Fail
1.6Fail
3.2AA Large
1.3Fail
Black BG
21.0AAA
17.6AAA
13.0AAA
6.7AA
16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FFFFFF
EBEBEB
C6C6DA
919191
DCDDF9

Deuteranopia

FFFFFF
EBEBEB
C5C4D9
919191
DCDBF7

Tritanopia

FFFFFF
EBEBEB
C2D6D5
919191
D7F4F3

Achromatopsia

FFFFFF
EBEBEB
CBCBCB
919191
E3E3E3

Shades & Tints Shades & Tints

#FFFFFF

Dark
Light

#EBEBEB

Dark
Light

#C1CCDE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffffff;
  --color-2: #ebebeb;
  --color-3: #c1ccde;
  --color-4: #919191;
  --color-5: #d6e5ff;
}

SCSS

$color-1: #ffffff;
$color-2: #ebebeb;
$color-3: #c1ccde;
$color-4: #919191;
$color-5: #d6e5ff;

TAILWIND

colors: {
  'brand-1': '#ffffff',
  'brand-2': '#ebebeb',
  'brand-3': '#c1ccde',
  'brand-4': '#919191',
  'brand-5': '#d6e5ff',
}

RGB Array

[255, 255, 255], [235, 235, 235], [193, 204, 222], [145, 145, 145], [214, 229, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FFFFFF, #EBEBEB, #C1CCDE, #919191, #D6E5FF is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #ffffff; --color-2: #ebebeb; --color-3: #c1ccde; --color-4: #919191; --color-5: #d6e5ff. 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 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