#A0DFF1 + #B8E0EF + #CFE2ED + #E7E3EB + #FEE4E9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A0DFF1

Sky Blue · LightBlue · Glacier Blue

HEX

#A0DFF1

RGB

rgb(160, 223, 241)

HSL

hsl(193, 74%, 79%)

HSB

hsb(193, 34%, 95%)

CMYK

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

Oklch

oklch(86.7% 0.068 217.4)

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

#B8E0EF

Sky Blue · LightBlue · Glacier Blue

HEX

#B8E0EF

RGB

rgb(184, 224, 239)

HSL

hsl(196, 63%, 83%)

HSB

hsb(196, 23%, 94%)

CMYK

cmyk(23%, 6%, 0%, 6%)

Oklch

oklch(88.3% 0.047 222.6)

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

#CFE2ED

Sky Blue · Lavender · Sky Blue

HEX

#CFE2ED

RGB

rgb(207, 226, 237)

HSL

hsl(202, 45%, 87%)

HSB

hsb(202, 13%, 93%)

CMYK

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

Oklch

oklch(90.2% 0.025 233.0)

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

#E7E3EB

Lilac · Lavender · Lavender

HEX

#E7E3EB

RGB

rgb(231, 227, 235)

HSL

hsl(270, 17%, 91%)

HSB

hsb(270, 3%, 92%)

CMYK

cmyk(2%, 3%, 0%, 8%)

Oklch

oklch(92.1% 0.012 308.3)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#FEE4E9

Peach Pink · Linen · Cherry Blossom

HEX

#FEE4E9

RGB

rgb(254, 228, 233)

HSL

hsl(348, 93%, 95%)

HSB

hsb(348, 10%, 100%)

CMYK

cmyk(0%, 10%, 8%, 0%)

Oklch

oklch(94.1% 0.029 4.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A0DFF1

F1B3A2

Analogous

A2F1DB

A0DFF1

A2B8F1

Triadic

A0DFF1

F1A2E0

E0F1A2

Split-Comp.

A0DFF1

F1A2B8

F1DBA2

Tetradic

A0DFF1

DBA2F1

F1B3A2

B8F1A2

Contrast Matrix WCAG 2.1 Contrast

A0DFF1	B8E0EF	CFE2ED	E7E3EB	FEE4E9
—	1.0 Fail	1.1 Fail	1.2 Fail	1.2 Fail
1.0 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.5Fail

1.4Fail

1.3Fail

1.2Fail

Black BG

14.3AAA

14.9AAA

15.8AAA

16.6AAA

17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBCED

C9CAEB

D7D7EA

E5E5E9

F3F3E8

Deuteranopia

B8B3EC

C7C4EB

D6D5EA

E6E6E9

F4F6E8

Tritanopia

A3E9E8

BAE9E8

D0E8E8

E7E8E7

FDE7E7

Achromatopsia

CECECE

D6D6D6

DEDEDE

E5E5E5

ECECEC

Shades & Tints Shades & Tints

#A0DFF1

Dark

Light

#B8E0EF

Dark

Light

#CFE2ED

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a0dff1;
  --color-2: #b8e0ef;
  --color-3: #cfe2ed;
  --color-4: #e7e3eb;
  --color-5: #fee4e9;
}

SCSS

$color-1: #a0dff1;
$color-2: #b8e0ef;
$color-3: #cfe2ed;
$color-4: #e7e3eb;
$color-5: #fee4e9;

TAILWIND

colors: {
  'brand-1': '#a0dff1',
  'brand-2': '#b8e0ef',
  'brand-3': '#cfe2ed',
  'brand-4': '#e7e3eb',
  'brand-5': '#fee4e9',
}

RGB Array

[160, 223, 241], [184, 224, 239], [207, 226, 237], [231, 227, 235], [254, 228, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A0DFF1, #B8E0EF, #CFE2ED, #E7E3EB, #FEE4E9 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: #a0dff1; --color-2: #b8e0ef; --color-3: #cfe2ed; --color-4: #e7e3eb; --color-5: #fee4e9. 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