← Back to Editor

#E8F4FA · #A9CCD6 · #C5D7DE · #90A8C0 · #4783BB

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#E8F4FA

Sky Blue · Lavender · Sky Blue

HEX
#E8F4FA
RGB
rgb(232, 244, 250)
HSL
hsl(200, 64%, 95%)
HSB
hsb(200, 7%, 98%)
CMYK
cmyk(7%, 2%, 0%, 2%)
Oklch
oklch(96.0% 0.015 229.0)

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

#A9CCD6

Sky Blue · LightSteelBlue · Lake Green

HEX
#A9CCD6
RGB
rgb(169, 204, 214)
HSL
hsl(193, 35%, 75%)
HSB
hsb(193, 21%, 84%)
CMYK
cmyk(21%, 5%, 0%, 16%)
Oklch
oklch(82.3% 0.040 217.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#C5D7DE

Sky Blue · LightGray · Glacier Blue

HEX
#C5D7DE
RGB
rgb(197, 215, 222)
HSL
hsl(197, 27%, 82%)
HSB
hsb(197, 11%, 87%)
CMYK
cmyk(11%, 3%, 0%, 13%)
Oklch
oklch(86.8% 0.022 223.0)

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

#90A8C0

Azure · DarkGray · Cobalt Blue

HEX
#90A8C0
RGB
rgb(144, 168, 192)
HSL
hsl(210, 28%, 66%)
HSB
hsb(210, 25%, 75%)
CMYK
cmyk(25%, 13%, 0%, 25%)
Oklch
oklch(72.1% 0.044 248.4)

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

#4783BB

Slate Blue · SteelBlue · Navy Blue

HEX
#4783BB
RGB
rgb(71, 131, 187)
HSL
hsl(209, 46%, 51%)
HSB
hsb(209, 62%, 73%)
CMYK
cmyk(62%, 30%, 0%, 27%)
Oklch
oklch(59.4% 0.107 248.6)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8F4FA
FAF0EA

Analogous

EAFAF8
E8F4FA
EAEDFA

Triadic

E8F4FA
FAEAF5
F5FAEA

Split-Comp.

E8F4FA
FAEAED
FAF8EA

Tetradic

E8F4FA
F8EAFA
FAF0EA
EDFAEA

Contrast Matrix WCAG 2.1 Contrast

E8F4FA
A9CCD6
C5D7DE
90A8C0
4783BB
—
1.5
Fail
1.3
Fail
2.2
Fail
3.6
AA Large
1.5
Fail
—
1.2
Fail
1.4
Fail
2.3
Fail
1.3
Fail
1.2
Fail
—
1.7
Fail
2.7
Fail
2.2
Fail
1.4
Fail
1.7
Fail
—
1.6
Fail
3.6
AA Large
2.3
Fail
2.7
Fail
1.6
Fail
—
White BG
1.1Fail
1.7Fail
1.5Fail
2.5Fail
4.0AA Large
Black BG
18.8AAA
12.3AAA
14.1AAA
8.5AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDF9
B8B8D4
CDCDDC
9A9BBA
6162AD

Deuteranopia

EDECF8
B6B4D3
CCCADC
9997B9
5E59AA

Tritanopia

E9F7F7
ABD2D1
C6DBDB
91B6B5
4AA3A0

Achromatopsia

F1F1F1
C3C3C3
D2D2D2
A4A4A4
777777

Shades & Tints Shades & Tints

#E8F4FA

Dark
Light

#A9CCD6

Dark
Light

#C5D7DE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8f4fa;
  --color-2: #a9ccd6;
  --color-3: #c5d7de;
  --color-4: #90a8c0;
  --color-5: #4783bb;
}

SCSS

$color-1: #e8f4fa;
$color-2: #a9ccd6;
$color-3: #c5d7de;
$color-4: #90a8c0;
$color-5: #4783bb;

TAILWIND

colors: {
  'brand-1': '#e8f4fa',
  'brand-2': '#a9ccd6',
  'brand-3': '#c5d7de',
  'brand-4': '#90a8c0',
  'brand-5': '#4783bb',
}

RGB Array

[232, 244, 250], [169, 204, 214], [197, 215, 222], [144, 168, 192], [71, 131, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #E8F4FA, #A9CCD6, #C5D7DE, #90A8C0, #4783BB is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #e8f4fa; --color-2: #a9ccd6; --color-3: #c5d7de; --color-4: #90a8c0; --color-5: #4783bb. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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