#DDE1E0 + #4CC9F5 + #2698FB + #7380A2 + #B0BCBA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DDE1E0

Plain White · LightGray · Cloud White

HEX

#DDE1E0

RGB

rgb(221, 225, 224)

HSL

hsl(165, 6%, 87%)

HSB

hsb(165, 2%, 88%)

CMYK

cmyk(2%, 0%, 0%, 12%)

Oklch

oklch(90.6% 0.005 179.7)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#4CC9F5

Sky Blue · MediumTurquoise · Lake Green

HEX

#4CC9F5

RGB

rgb(76, 201, 245)

HSL

hsl(196, 89%, 63%)

HSB

hsb(196, 69%, 96%)

CMYK

cmyk(69%, 18%, 0%, 4%)

Oklch

oklch(78.5% 0.125 225.3)

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

#2698FB

Lake Blue · DodgerBlue · Navy Blue

HEX

#2698FB

RGB

rgb(38, 152, 251)

HSL

hsl(208, 96%, 57%)

HSB

hsb(208, 85%, 98%)

CMYK

cmyk(85%, 39%, 0%, 2%)

Oklch

oklch(66.8% 0.176 250.3)

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

#7380A2

Azure · LightSlateGray · Navy Blue

HEX

#7380A2

RGB

rgb(115, 128, 162)

HSL

hsl(223, 20%, 54%)

HSB

hsb(223, 29%, 64%)

CMYK

cmyk(29%, 21%, 0%, 36%)

Oklch

oklch(60.2% 0.054 268.4)

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

#B0BCBA

Jade · Silver · Pearl Gray

HEX

#B0BCBA

RGB

rgb(176, 188, 186)

HSL

hsl(170, 8%, 71%)

HSB

hsb(170, 6%, 74%)

CMYK

cmyk(6%, 0%, 1%, 26%)

Oklch

oklch(78.5% 0.014 185.0)

Traditional「Jade」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDE1E0

E0DCDD

Analogous

DCE0DD

DDE1E0

DCDFE0

Triadic

DDE1E0

DFDCE0

E0DFDC

Split-Comp.

DDE1E0

E0DCDF

E0DDDC

Tetradic

DDE1E0

DDDCE0

E0DCDD

DFE0DC

Contrast Matrix WCAG 2.1 Contrast

DDE1E0	4CC9F5	2698FB	7380A2	B0BCBA
—	1.4 Fail	2.3 Fail	3.0 Fail	1.5 Fail
1.4 Fail	—	1.6 Fail	2.1 Fail	1.0 Fail
2.3 Fail	1.6 Fail	—	1.3 Fail	1.5 Fail
3.0 Fail	2.1 Fail	1.3 Fail	—	2.0 Fail
1.5 Fail	1.0 Fail	1.5 Fail	2.0 Fail	—

White BG

1.3Fail

1.9Fail

3.0AA Large

3.9AA Large

2.0Fail

Black BG

15.9AAA

11.0AAA

7.0AA

5.3AA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFE0

8283EA

5758E3

79799A

B5B5BA

Deuteranopia

DFDEE0

7B72E8

5148DD

787798

B5B4BB

Tritanopia

DDE0E0

52E2E0

2CD0CC

749392

B1BBBB

Achromatopsia

E0E0E0

A9A9A9

818181

808080

B8B8B8

Shades & Tints Shades & Tints

#DDE1E0

Dark

Light

#4CC9F5

Dark

Light

#2698FB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dde1e0;
  --color-2: #4cc9f5;
  --color-3: #2698fb;
  --color-4: #7380a2;
  --color-5: #b0bcba;
}

SCSS

$color-1: #dde1e0;
$color-2: #4cc9f5;
$color-3: #2698fb;
$color-4: #7380a2;
$color-5: #b0bcba;

TAILWIND

colors: {
  'brand-1': '#dde1e0',
  'brand-2': '#4cc9f5',
  'brand-3': '#2698fb',
  'brand-4': '#7380a2',
  'brand-5': '#b0bcba',
}

RGB Array

[221, 225, 224], [76, 201, 245], [38, 152, 251], [115, 128, 162], [176, 188, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDE1E0, #4CC9F5, #2698FB, #7380A2, #B0BCBA 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: #dde1e0; --color-2: #4cc9f5; --color-3: #2698fb; --color-4: #7380a2; --color-5: #b0bcba. 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