#99D6F2 + #CBD9DF + #FCDBCC + #FCEECC + #F5F5F5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#99D6F2

Sky Blue · SkyBlue · Glacier Blue

HEX

#99D6F2

RGB

rgb(153, 214, 242)

HSL

hsl(199, 77%, 77%)

HSB

hsb(199, 37%, 95%)

CMYK

cmyk(37%, 12%, 0%, 5%)

Oklch

oklch(84.4% 0.073 228.2)

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

#CBD9DF

Sky Blue · LightGray · Glacier Blue

HEX

#CBD9DF

RGB

rgb(203, 217, 223)

HSL

hsl(198, 24%, 84%)

HSB

hsb(198, 9%, 87%)

CMYK

cmyk(9%, 3%, 0%, 13%)

Oklch

oklch(87.6% 0.017 225.2)

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

#FCDBCC

Apricot · Bisque · Peach Orange

HEX

#FCDBCC

RGB

rgb(252, 219, 204)

HSL

hsl(19, 89%, 89%)

HSB

hsb(19, 19%, 99%)

CMYK

cmyk(0%, 13%, 19%, 1%)

Oklch

oklch(91.5% 0.042 45.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FCEECC

Goose Yellow · Bisque · Lemon Cream

HEX

#FCEECC

RGB

rgb(252, 238, 204)

HSL

hsl(42, 89%, 89%)

HSB

hsb(42, 19%, 99%)

CMYK

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

Oklch

oklch(95.2% 0.047 88.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F5F5F5

Moonlight White · SeaShell · Cloud White

HEX

#F5F5F5

RGB

rgb(245, 245, 245)

HSL

hsl(0, 0%, 96%)

HSB

hsb(0, 0%, 96%)

CMYK

cmyk(0%, 0%, 0%, 4%)

Oklch

oklch(97.0% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99D6F2

F2B497

Analogous

97F2E1

99D6F2

97A8F2

Triadic

99D6F2

F297D5

D5F297

Split-Comp.

99D6F2

F297A8

F2E197

Tetradic

99D6F2

E197F2

F2B497

A8F297

Contrast Matrix WCAG 2.1 Contrast

99D6F2	CBD9DF	FCDBCC	FCEECC	F5F5F5
—	1.1 Fail	1.2 Fail	1.4 Fail	1.5 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.6Fail

1.4Fail

1.3Fail

1.2Fail

1.1Fail

Black BG

13.3AAA

14.5AAA

16.1AAA

18.2AAA

19.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B4EB

D1D1DE

EEEDD0

F6F6D4

F5F5F5

Deuteranopia

B0ABEA

D0CFDD

F0F2D1

F7F8D6

F5F5F5

Tritanopia

9CE6E5

CCDCDC

FAD2D3

FBDBDC

F5F5F5

Achromatopsia

C7C7C7

D5D5D5

E3E3E3

EEEEEE

F5F5F5

Shades & Tints Shades & Tints

#99D6F2

Dark

Light

#CBD9DF

Dark

Light

#FCDBCC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99d6f2;
  --color-2: #cbd9df;
  --color-3: #fcdbcc;
  --color-4: #fceecc;
  --color-5: #f5f5f5;
}

SCSS

$color-1: #99d6f2;
$color-2: #cbd9df;
$color-3: #fcdbcc;
$color-4: #fceecc;
$color-5: #f5f5f5;

TAILWIND

colors: {
  'brand-1': '#99d6f2',
  'brand-2': '#cbd9df',
  'brand-3': '#fcdbcc',
  'brand-4': '#fceecc',
  'brand-5': '#f5f5f5',
}

RGB Array

[153, 214, 242], [203, 217, 223], [252, 219, 204], [252, 238, 204], [245, 245, 245]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99D6F2, #CBD9DF, #FCDBCC, #FCEECC, #F5F5F5 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: #99d6f2; --color-2: #cbd9df; --color-3: #fcdbcc; --color-4: #fceecc; --color-5: #f5f5f5. 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 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