← Back to Editor

#DDE1EA · #FAFAFD · #038DBE · #5AB7F2 · #A5E7FD

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#DDE1EA

Azure · Lavender · Sky Blue

HEX
#DDE1EA
RGB
rgb(221, 225, 234)
HSL
hsl(222, 24%, 89%)
HSB
hsb(222, 6%, 92%)
CMYK
cmyk(6%, 4%, 0%, 8%)
Oklch
oklch(90.9% 0.013 266.7)

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

#FAFAFD

Wisteria · Snow · Sky Blue

HEX
#FAFAFD
RGB
rgb(250, 250, 253)
HSL
hsl(240, 43%, 99%)
HSB
hsb(240, 1%, 99%)
CMYK
cmyk(1%, 1%, 0%, 1%)
Oklch
oklch(98.6% 0.004 286.3)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#038DBE

Lake Blue · LightSeaGreen · Mint Ice

HEX
#038DBE
RGB
rgb(3, 141, 190)
HSL
hsl(196, 97%, 38%)
HSB
hsb(196, 98%, 75%)
CMYK
cmyk(98%, 26%, 0%, 25%)
Oklch
oklch(60.5% 0.123 232.1)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#5AB7F2

Sky Blue · CornflowerBlue · Cobalt Blue

HEX
#5AB7F2
RGB
rgb(90, 183, 242)
HSL
hsl(203, 85%, 65%)
HSB
hsb(203, 63%, 95%)
CMYK
cmyk(63%, 24%, 0%, 5%)
Oklch
oklch(74.7% 0.123 239.2)

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

#A5E7FD

Sky Blue · LightBlue · Glacier Blue

HEX
#A5E7FD
RGB
rgb(165, 231, 253)
HSL
hsl(195, 96%, 82%)
HSB
hsb(195, 35%, 99%)
CMYK
cmyk(35%, 9%, 0%, 1%)
Oklch
oklch(89.1% 0.073 220.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDE1EA
EAE6DC

Analogous

DCE7EA
DDE1EA
DFDCEA

Triadic

DDE1EA
EADCE0
E0EADC

Split-Comp.

DDE1EA
EADFDC
E7EADC

Tetradic

DDE1EA
EADCE7
EAE6DC
DCEADF

Contrast Matrix WCAG 2.1 Contrast

DDE1EA
FAFAFD
038DBE
5AB7F2
A5E7FD
—
1.3
Fail
2.9
Fail
1.7
Fail
1.0
Fail
1.3
Fail
—
3.6
AA Large
2.1
Fail
1.3
Fail
2.9
Fail
3.6
AA Large
—
1.7
Fail
2.8
Fail
1.7
Fail
2.1
Fail
1.7
Fail
—
1.6
Fail
1.0
Fail
1.3
Fail
2.8
Fail
1.6
Fail
—
White BG
1.3Fail
1.0Fail
3.8AA Large
2.2Fail
1.4Fail
Black BG
16.0AAA
20.2AAA
5.6AA
9.5AAA
15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFE8
FAFAFC
3F40B2
8283E4
C2C2F8

Deuteranopia

DFDEE7
FAFAFC
372CAF
7D76E0
BEB9F6

Tritanopia

DDE6E6
FAFCFC
0AA9A7
5FD8D6
A8F3F3

Achromatopsia

E1E1E1
FAFAFA
696969
A2A2A2
D6D6D6

Shades & Tints Shades & Tints

#DDE1EA

Dark
Light

#FAFAFD

Dark
Light

#038DBE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dde1ea;
  --color-2: #fafafd;
  --color-3: #038dbe;
  --color-4: #5ab7f2;
  --color-5: #a5e7fd;
}

SCSS

$color-1: #dde1ea;
$color-2: #fafafd;
$color-3: #038dbe;
$color-4: #5ab7f2;
$color-5: #a5e7fd;

TAILWIND

colors: {
  'brand-1': '#dde1ea',
  'brand-2': '#fafafd',
  'brand-3': '#038dbe',
  'brand-4': '#5ab7f2',
  'brand-5': '#a5e7fd',
}

RGB Array

[221, 225, 234], [250, 250, 253], [3, 141, 190], [90, 183, 242], [165, 231, 253]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDE1EA, #FAFAFD, #038DBE, #5AB7F2, #A5E7FD is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dde1ea; --color-2: #fafafd; --color-3: #038dbe; --color-4: #5ab7f2; --color-5: #a5e7fd. 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 general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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