#DCEBF7 + #E1ECEE + #E7EEE5 + #ECEFDC + #F1F0D3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DCEBF7

Sky Blue · Lavender · Sky Blue

HEX

#DCEBF7

RGB

rgb(220, 235, 247)

HSL

hsl(207, 63%, 92%)

HSB

hsb(207, 11%, 97%)

CMYK

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

Oklch

oklch(93.2% 0.023 241.9)

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

#E1ECEE

Sky Blue · Lavender · Glacier Blue

HEX

#E1ECEE

RGB

rgb(225, 236, 238)

HSL

hsl(189, 28%, 91%)

HSB

hsb(189, 5%, 93%)

CMYK

cmyk(5%, 1%, 0%, 7%)

Oklch

oklch(93.5% 0.012 209.8)

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

#E7EEE5

Celadon · Beige · Mint Green

HEX

#E7EEE5

RGB

rgb(231, 238, 229)

HSL

hsl(107, 21%, 92%)

HSB

hsb(107, 4%, 93%)

CMYK

cmyk(3%, 0%, 4%, 7%)

Oklch

oklch(94.1% 0.014 138.7)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#ECEFDC

Fresh Green · Beige · Lemon Cream

HEX

#ECEFDC

RGB

rgb(236, 239, 220)

HSL

hsl(69, 37%, 90%)

HSB

hsb(69, 8%, 94%)

CMYK

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

Oklch

oklch(94.5% 0.025 114.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F1F0D3

Fresh Green · Beige · Lemon Cream

HEX

#F1F0D3

RGB

rgb(241, 240, 211)

HSL

hsl(58, 52%, 89%)

HSB

hsb(58, 12%, 95%)

CMYK

cmyk(0%, 0%, 12%, 5%)

Oklch

oklch(94.8% 0.038 105.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCEBF7

F7E9DE

Analogous

DEF7F6

DCEBF7

DEDFF7

Triadic

DCEBF7

F7DEEC

ECF7DE

Split-Comp.

DCEBF7

F7DEDF

F7F6DE

Tetradic

DCEBF7

F6DEF7

F7E9DE

DFF7DE

Contrast Matrix WCAG 2.1 Contrast

DCEBF7	E1ECEE	E7EEE5	ECEFDC	F1F0D3
—	1.0 Fail	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

1.2Fail

Black BG

17.3AAA

17.4AAA

17.8AAA

17.9AAA

18.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E3F4

E6E6EE

EAEAE7

EDEDE1

F1F1DA

Deuteranopia

E2E1F3

E5E4ED

EAE9E8

EDEDE2

F1F1DC

Tritanopia

DDF2F1

E2EDED

E7E9E9

ECE4E5

F1E0E1

Achromatopsia

E8E8E8

E9E9E9

EBEBEB

ECECEC

EDEDED

Shades & Tints Shades & Tints

#DCEBF7

Dark

Light

#E1ECEE

Dark

Light

#E7EEE5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcebf7;
  --color-2: #e1ecee;
  --color-3: #e7eee5;
  --color-4: #ecefdc;
  --color-5: #f1f0d3;
}

SCSS

$color-1: #dcebf7;
$color-2: #e1ecee;
$color-3: #e7eee5;
$color-4: #ecefdc;
$color-5: #f1f0d3;

TAILWIND

colors: {
  'brand-1': '#dcebf7',
  'brand-2': '#e1ecee',
  'brand-3': '#e7eee5',
  'brand-4': '#ecefdc',
  'brand-5': '#f1f0d3',
}

RGB Array

[220, 235, 247], [225, 236, 238], [231, 238, 229], [236, 239, 220], [241, 240, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DCEBF7, #E1ECEE, #E7EEE5, #ECEFDC, #F1F0D3 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: #dcebf7; --color-2: #e1ecee; --color-3: #e7eee5; --color-4: #ecefdc; --color-5: #f1f0d3. 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