← Back to Editor

#63CDFF · #6EE4FE · #B0F0FC · #ECF3FB · #FDFFFC

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#63CDFF

Sky Blue · LightSkyBlue · Lake Green

HEX
#63CDFF
RGB
rgb(99, 205, 255)
HSL
hsl(199, 100%, 69%)
HSB
hsb(199, 61%, 100%)
CMYK
cmyk(61%, 20%, 0%, 0%)
Oklch
oklch(80.5% 0.120 231.4)

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

#6EE4FE

Sky Blue · LightSkyBlue · Lake Green

HEX
#6EE4FE
RGB
rgb(110, 228, 254)
HSL
hsl(191, 99%, 71%)
HSB
hsb(191, 57%, 100%)
CMYK
cmyk(57%, 10%, 0%, 0%)
Oklch
oklch(86.0% 0.112 214.2)

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

#B0F0FC

Sky Blue · LightBlue · Glacier Blue

HEX
#B0F0FC
RGB
rgb(176, 240, 252)
HSL
hsl(189, 93%, 84%)
HSB
hsb(189, 30%, 99%)
CMYK
cmyk(30%, 5%, 0%, 1%)
Oklch
oklch(91.6% 0.066 210.4)

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

#ECF3FB

Azure · Lavender · Sky Blue

HEX
#ECF3FB
RGB
rgb(236, 243, 251)
HSL
hsl(212, 65%, 95%)
HSB
hsb(212, 6%, 98%)
CMYK
cmyk(6%, 3%, 0%, 2%)
Oklch
oklch(96.1% 0.013 251.6)

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

#FDFFFC

Emerald · White · Mint Green

HEX
#FDFFFC
RGB
rgb(253, 255, 252)
HSL
hsl(100, 100%, 99%)
HSB
hsb(100, 1%, 100%)
CMYK
cmyk(1%, 0%, 1%, 0%)
Oklch
oklch(99.8% 0.004 134.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

63CDFF
FF9361

Analogous

61FFE2
63CDFF
617EFF

Triadic

63CDFF
FF61CD
CDFF61

Split-Comp.

63CDFF
FF617E
FFE261

Tetradic

63CDFF
E261FF
FF9361
7EFF61

Contrast Matrix WCAG 2.1 Contrast

63CDFF
6EE4FE
B0F0FC
ECF3FB
FDFFFC
—
1.2
Fail
1.4
Fail
1.6
Fail
1.8
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
1.6
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.8
Fail
1.5
Fail
1.2
Fail
1.1
Fail
—
White BG
1.8Fail
1.5Fail
1.3Fail
1.1Fail
1.0Fail
Black BG
11.7AAA
14.2AAA
16.7AAA
18.8AAA
20.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9192F3
A1A2F8
CCCCF9
EFEFF9
FEFEFD

Deuteranopia

8B83F0
9A91F6
C8C3F8
EFEEF9
FEFEFD

Tritanopia

68E9E7
74F3F2
B3F7F6
ECF8F7
FDFDFD

Achromatopsia

B3B3B3
C4C4C4
DEDEDE
F2F2F2
FEFEFE

Shades & Tints Shades & Tints

#63CDFF

Dark
Light

#6EE4FE

Dark
Light

#B0F0FC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #63cdff;
  --color-2: #6ee4fe;
  --color-3: #b0f0fc;
  --color-4: #ecf3fb;
  --color-5: #fdfffc;
}

SCSS

$color-1: #63cdff;
$color-2: #6ee4fe;
$color-3: #b0f0fc;
$color-4: #ecf3fb;
$color-5: #fdfffc;

TAILWIND

colors: {
  'brand-1': '#63cdff',
  'brand-2': '#6ee4fe',
  'brand-3': '#b0f0fc',
  'brand-4': '#ecf3fb',
  'brand-5': '#fdfffc',
}

RGB Array

[99, 205, 255], [110, 228, 254], [176, 240, 252], [236, 243, 251], [253, 255, 252]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #63CDFF, #6EE4FE, #B0F0FC, #ECF3FB, #FDFFFC is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #63cdff; --color-2: #6ee4fe; --color-3: #b0f0fc; --color-4: #ecf3fb; --color-5: #fdfffc. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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