← Back to Editor

#E4F1F1 · #BACDCF · #BAC0CF · #BAAFC9 · #AB97BF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E4F1F1

Sky Blue · Lavender · Glacier Blue

HEX
#E4F1F1
RGB
rgb(228, 241, 241)
HSL
hsl(180, 32%, 92%)
HSB
hsb(180, 5%, 95%)
CMYK
cmyk(5%, 0%, 0%, 5%)
Oklch
oklch(94.8% 0.014 196.9)

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

#BACDCF

Sky Blue · LightSteelBlue · Glacier Blue

HEX
#BACDCF
RGB
rgb(186, 205, 207)
HSL
hsl(186, 18%, 77%)
HSB
hsb(186, 10%, 81%)
CMYK
cmyk(10%, 1%, 0%, 19%)
Oklch
oklch(83.5% 0.021 204.4)

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

#BAC0CF

Azure · Silver · Cobalt Blue

HEX
#BAC0CF
RGB
rgb(186, 192, 207)
HSL
hsl(223, 18%, 77%)
HSB
hsb(223, 10%, 81%)
CMYK
cmyk(10%, 7%, 0%, 19%)
Oklch
oklch(80.8% 0.022 268.4)

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

#BAAFC9

Wisteria · Silver · Lilac Purple

HEX
#BAAFC9
RGB
rgb(186, 175, 201)
HSL
hsl(265, 19%, 74%)
HSB
hsb(265, 13%, 79%)
CMYK
cmyk(7%, 13%, 0%, 21%)
Oklch
oklch(77.1% 0.038 304.6)

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

#AB97BF

Lilac · DarkGray · Lilac Purple

HEX
#AB97BF
RGB
rgb(171, 151, 191)
HSL
hsl(270, 24%, 67%)
HSB
hsb(270, 21%, 75%)
CMYK
cmyk(10%, 21%, 0%, 25%)
Oklch
oklch(70.8% 0.061 307.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4F1F1
F1E4E4

Analogous

E4F1EB
E4F1F1
E4EBF1

Triadic

E4F1F1
F1E4F1
F1F1E4

Split-Comp.

E4F1F1
F1E4EB
F1EBE4

Tetradic

E4F1F1
EBE4F1
F1E4E4
EBF1E4

Contrast Matrix WCAG 2.1 Contrast

E4F1F1
BACDCF
BAC0CF
BAAFC9
AB97BF
—
1.4
Fail
1.6
Fail
1.8
Fail
2.3
Fail
1.4
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
1.6
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
1.8
Fail
1.3
Fail
1.1
Fail
—
1.3
Fail
2.3
Fail
1.6
Fail
1.5
Fail
1.3
Fail
—
White BG
1.2Fail
1.7Fail
1.8Fail
2.1Fail
2.7Fail
Black BG
18.2AAA
12.7AAA
11.5AAA
10.1AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAF1
C2C2CF
BDBDCB
B5B5C3
A2A2B5

Deuteranopia

E9E8F1
C1C0CE
BCBCCA
B6B7C1
A4A5B3

Tritanopia

E5F1F1
BBCECE
BAC9C8
B9BEBD
AAAEAC

Achromatopsia

EDEDED
C8C8C8
C0C0C0
B5B5B5
A2A2A2

Shades & Tints Shades & Tints

#E4F1F1

Dark
Light

#BACDCF

Dark
Light

#BAC0CF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4f1f1;
  --color-2: #bacdcf;
  --color-3: #bac0cf;
  --color-4: #baafc9;
  --color-5: #ab97bf;
}

SCSS

$color-1: #e4f1f1;
$color-2: #bacdcf;
$color-3: #bac0cf;
$color-4: #baafc9;
$color-5: #ab97bf;

TAILWIND

colors: {
  'brand-1': '#e4f1f1',
  'brand-2': '#bacdcf',
  'brand-3': '#bac0cf',
  'brand-4': '#baafc9',
  'brand-5': '#ab97bf',
}

RGB Array

[228, 241, 241], [186, 205, 207], [186, 192, 207], [186, 175, 201], [171, 151, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4F1F1, #BACDCF, #BAC0CF, #BAAFC9, #AB97BF is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e4f1f1; --color-2: #bacdcf; --color-3: #bac0cf; --color-4: #baafc9; --color-5: #ab97bf. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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