#F2F1E1 + #C5EBE9 + #A2EBE9 + #A2E0EB + #A2CEEB · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2F1E1

Fresh Green · Beige · Lemon Cream

HEX

#F2F1E1

RGB

rgb(242, 241, 225)

HSL

hsl(56, 40%, 92%)

HSB

hsb(56, 7%, 95%)

CMYK

cmyk(0%, 0%, 7%, 5%)

Oklch

oklch(95.5% 0.021 103.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#C5EBE9

Jade · LightBlue · Glacier Blue

HEX

#C5EBE9

RGB

rgb(197, 235, 233)

HSL

hsl(177, 49%, 85%)

HSB

hsb(177, 16%, 92%)

CMYK

cmyk(16%, 0%, 1%, 8%)

Oklch

oklch(91.2% 0.040 192.6)

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

#A2EBE9

Jade · LightBlue · Glacier Blue

HEX

#A2EBE9

RGB

rgb(162, 235, 233)

HSL

hsl(178, 65%, 78%)

HSB

hsb(178, 31%, 92%)

CMYK

cmyk(31%, 0%, 1%, 8%)

Oklch

oklch(89.2% 0.072 193.8)

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

#A2E0EB

Sky Blue · LightBlue · Glacier Blue

HEX

#A2E0EB

RGB

rgb(162, 224, 235)

HSL

hsl(189, 65%, 78%)

HSB

hsb(189, 31%, 92%)

CMYK

cmyk(31%, 5%, 0%, 8%)

Oklch

oklch(86.8% 0.064 209.7)

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

#A2CEEB

Sky Blue · LightBlue · Cobalt Blue

HEX

#A2CEEB

RGB

rgb(162, 206, 235)

HSL

hsl(204, 65%, 78%)

HSB

hsb(204, 31%, 92%)

CMYK

cmyk(31%, 12%, 0%, 8%)

Oklch

oklch(83.0% 0.062 237.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2F1E1

E2E4F3

Analogous

F3EAE2

F2F1E1

ECF3E2

Triadic

F2F1E1

E2F3F2

F2E2F3

Split-Comp.

F2F1E1

E2ECF3

EAE2F3

Tetradic

F2F1E1

E2F3EA

E2E4F3

F3E2EC

Contrast Matrix WCAG 2.1 Contrast

F2F1E1	C5EBE9	A2EBE9	A2E0EB	A2CEEB
—	1.1 Fail	1.2 Fail	1.3 Fail	1.5 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.3 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.1Fail

1.3Fail

1.5Fail

1.7Fail

Black BG

18.4AAA

16.4AAA

15.6AAA

14.4AAA

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2E5

D5D6E9

C2C2E9

BDBDE8

B5B5E4

Deuteranopia

F2F2E6

D3D0EA

BDB8EA

B9B5E8

B3AFE2

Tritanopia

F2E8E9

C7EAEA

A6EAEA

A5E6E6

A4DEDD

Achromatopsia

EFEFEF

DFDFDF

D5D5D5

CFCFCF

C4C4C4

Shades & Tints Shades & Tints

#F2F1E1

Dark

Light

#C5EBE9

Dark

Light

#A2EBE9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2f1e1;
  --color-2: #c5ebe9;
  --color-3: #a2ebe9;
  --color-4: #a2e0eb;
  --color-5: #a2ceeb;
}

SCSS

$color-1: #f2f1e1;
$color-2: #c5ebe9;
$color-3: #a2ebe9;
$color-4: #a2e0eb;
$color-5: #a2ceeb;

TAILWIND

colors: {
  'brand-1': '#f2f1e1',
  'brand-2': '#c5ebe9',
  'brand-3': '#a2ebe9',
  'brand-4': '#a2e0eb',
  'brand-5': '#a2ceeb',
}

RGB Array

[242, 241, 225], [197, 235, 233], [162, 235, 233], [162, 224, 235], [162, 206, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F2F1E1, #C5EBE9, #A2EBE9, #A2E0EB, #A2CEEB 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: #f2f1e1; --color-2: #c5ebe9; --color-3: #a2ebe9; --color-4: #a2e0eb; --color-5: #a2ceeb. 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 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