#E2F3FF + #9CA9BA + #BED4EC + #ACBDCF + #D1E3F7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E2F3FF

Sky Blue · Lavender · Sky Blue

HEX

#E2F3FF

RGB

rgb(226, 243, 255)

HSL

hsl(205, 100%, 94%)

HSB

hsb(205, 11%, 100%)

CMYK

cmyk(11%, 5%, 0%, 0%)

Oklch

oklch(95.5% 0.024 238.4)

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

#9CA9BA

Azure · DarkGray · Cobalt Blue

HEX

#9CA9BA

RGB

rgb(156, 169, 186)

HSL

hsl(214, 18%, 67%)

HSB

hsb(214, 16%, 73%)

CMYK

cmyk(16%, 9%, 0%, 27%)

Oklch

oklch(73.0% 0.029 255.1)

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

#BED4EC

Azure · LightBlue · Sky Blue

HEX

#BED4EC

RGB

rgb(190, 212, 236)

HSL

hsl(211, 55%, 84%)

HSB

hsb(211, 19%, 93%)

CMYK

cmyk(19%, 10%, 0%, 7%)

Oklch

oklch(86.1% 0.041 250.6)

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

#ACBDCF

Azure · LightSteelBlue · Cobalt Blue

HEX

#ACBDCF

RGB

rgb(172, 189, 207)

HSL

hsl(211, 27%, 74%)

HSB

hsb(211, 17%, 81%)

CMYK

cmyk(17%, 9%, 0%, 19%)

Oklch

oklch(79.1% 0.032 249.8)

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

#D1E3F7

Azure · Lavender · Sky Blue

HEX

#D1E3F7

RGB

rgb(209, 227, 247)

HSL

hsl(212, 70%, 89%)

HSB

hsb(212, 15%, 97%)

CMYK

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

Oklch

oklch(90.9% 0.034 251.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2F3FF

FFEDE0

Analogous

E0FFFC

E2F3FF

E0E3FF

Triadic

E2F3FF

FFE0F2

F2FFE0

Split-Comp.

E2F3FF

FFE0E3

FFFCE0

Tetradic

E2F3FF

FCE0FF

FFEDE0

E3FFE0

Contrast Matrix WCAG 2.1 Contrast

E2F3FF	9CA9BA	BED4EC	ACBDCF	D1E3F7
—	2.1 Fail	1.3 Fail	1.7 Fail	1.2 Fail
2.1 Fail	—	1.6 Fail	1.2 Fail	1.8 Fail
1.3 Fail	1.6 Fail	—	1.3 Fail	1.2 Fail
1.7 Fail	1.2 Fail	1.3 Fail	—	1.5 Fail
1.2 Fail	1.8 Fail	1.2 Fail	1.5 Fail	—

White BG

1.1Fail

2.4Fail

1.5Fail

1.9Fail

1.3Fail

Black BG

18.5AAA

8.8AAA

13.8AAA

10.9AAA

16.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9EAFC

A2A2B6

C8C8E6

B3B4CB

D9D9F2

Deuteranopia

E8E7FB

A1A0B5

C6C5E5

B2B1CA

D8D6F1

Tritanopia

E3FAF9

9DB3B2

BFE2E1

ADC7C6

D2EEEE

Achromatopsia

EFEFEF

A7A7A7

D0D0D0

BABABA

E0E0E0

Shades & Tints Shades & Tints

#E2F3FF

Dark

Light

#9CA9BA

Dark

Light

#BED4EC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2f3ff;
  --color-2: #9ca9ba;
  --color-3: #bed4ec;
  --color-4: #acbdcf;
  --color-5: #d1e3f7;
}

SCSS

$color-1: #e2f3ff;
$color-2: #9ca9ba;
$color-3: #bed4ec;
$color-4: #acbdcf;
$color-5: #d1e3f7;

TAILWIND

colors: {
  'brand-1': '#e2f3ff',
  'brand-2': '#9ca9ba',
  'brand-3': '#bed4ec',
  'brand-4': '#acbdcf',
  'brand-5': '#d1e3f7',
}

RGB Array

[226, 243, 255], [156, 169, 186], [190, 212, 236], [172, 189, 207], [209, 227, 247]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2F3FF, #9CA9BA, #BED4EC, #ACBDCF, #D1E3F7 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: #e2f3ff; --color-2: #9ca9ba; --color-3: #bed4ec; --color-4: #acbdcf; --color-5: #d1e3f7. 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