#C2F2FF + #BEE0E8 + #CAD9D8 + #DED0C1 + #FACEAA · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#C2F2FF

Sky Blue · Lavender · Glacier Blue

HEX

#C2F2FF

RGB

rgb(194, 242, 255)

HSL

hsl(193, 100%, 88%)

HSB

hsb(193, 24%, 100%)

CMYK

cmyk(24%, 5%, 0%, 0%)

Oklch

oklch(93.2% 0.052 216.1)

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

#BEE0E8

Sky Blue · LightBlue · Glacier Blue

HEX

#BEE0E8

RGB

rgb(190, 224, 232)

HSL

hsl(191, 48%, 83%)

HSB

hsb(191, 18%, 91%)

CMYK

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

Oklch

oklch(88.5% 0.037 213.5)

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

#CAD9D8

Jade · LightGray · Glacier Blue

HEX

#CAD9D8

RGB

rgb(202, 217, 216)

HSL

hsl(176, 16%, 82%)

HSB

hsb(176, 7%, 85%)

CMYK

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

Oklch

oklch(87.4% 0.016 192.0)

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

#DED0C1

Goose Yellow · LightGray · Peach Orange

HEX

#DED0C1

RGB

rgb(222, 208, 193)

HSL

hsl(31, 31%, 81%)

HSB

hsb(31, 13%, 87%)

CMYK

cmyk(0%, 6%, 13%, 13%)

Oklch

oklch(86.5% 0.026 69.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FACEAA

Apricot · Wheat · Peach Orange

HEX

#FACEAA

RGB

rgb(250, 206, 170)

HSL

hsl(27, 89%, 82%)

HSB

hsb(27, 32%, 98%)

CMYK

cmyk(0%, 18%, 32%, 2%)

Oklch

oklch(88.1% 0.069 61.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2F2FF

FFCFC2

Analogous

C2FFEE

C2F2FF

C2D3FF

Triadic

C2F2FF

FFC2F2

F2FFC2

Split-Comp.

C2F2FF

FFC2D3

FFEEC2

Tetradic

C2F2FF

EEC2FF

FFCFC2

D3FFC2

Contrast Matrix WCAG 2.1 Contrast

C2F2FF	BEE0E8	CAD9D8	DED0C1	FACEAA
—	1.2 Fail	1.2 Fail	1.3 Fail	1.2 Fail
1.2 Fail	—	1.0 Fail	1.1 Fail	1.0 Fail
1.2 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.3 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.2 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

1.2Fail

1.4Fail

1.5Fail

Black BG

17.4AAA

15.0AAA

14.4AAA

13.9AAA

14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7FC

CDCDE6

D0D1D8

D8D8C5

E7E7B3

Deuteranopia

D4D0FB

CBC8E6

D0CED8

D9DAC6

EAEDB5

Tritanopia

C4F9F9

C0E5E4

CBD8D8

DDC7C8

F8BABB

Achromatopsia

E5E5E5

D7D7D7

D4D4D4

D2D2D2

D7D7D7

Shades & Tints Shades & Tints

#C2F2FF

Dark

Light

#BEE0E8

Dark

Light

#CAD9D8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2f2ff;
  --color-2: #bee0e8;
  --color-3: #cad9d8;
  --color-4: #ded0c1;
  --color-5: #faceaa;
}

SCSS

$color-1: #c2f2ff;
$color-2: #bee0e8;
$color-3: #cad9d8;
$color-4: #ded0c1;
$color-5: #faceaa;

TAILWIND

colors: {
  'brand-1': '#c2f2ff',
  'brand-2': '#bee0e8',
  'brand-3': '#cad9d8',
  'brand-4': '#ded0c1',
  'brand-5': '#faceaa',
}

RGB Array

[194, 242, 255], [190, 224, 232], [202, 217, 216], [222, 208, 193], [250, 206, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #C2F2FF, #BEE0E8, #CAD9D8, #DED0C1, #FACEAA 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: #c2f2ff; --color-2: #bee0e8; --color-3: #cad9d8; --color-4: #ded0c1; --color-5: #faceaa. 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 pastel-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