#BEC0D9 + #C2E1DC + #FDFEEE + #DDBDD5 + #8797CA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BEC0D9

Azure · LightSteelBlue · Cobalt Blue

HEX

#BEC0D9

RGB

rgb(190, 192, 217)

HSL

hsl(236, 26%, 80%)

HSB

hsb(236, 12%, 85%)

CMYK

cmyk(12%, 12%, 0%, 15%)

Oklch

oklch(81.4% 0.035 282.0)

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

#C2E1DC

Jade · LightGray · Glacier Blue

HEX

#C2E1DC

RGB

rgb(194, 225, 220)

HSL

hsl(170, 34%, 82%)

HSB

hsb(170, 14%, 88%)

CMYK

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

Oklch

oklch(88.6% 0.033 184.8)

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

#FDFEEE

Fresh Green · SeaShell · Lemon Cream

HEX

#FDFEEE

RGB

rgb(253, 254, 238)

HSL

hsl(64, 89%, 96%)

HSB

hsb(64, 6%, 100%)

CMYK

cmyk(0%, 0%, 6%, 0%)

Oklch

oklch(99.2% 0.021 109.7)

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

#DDBDD5

Mauve · LightGray · Lilac Purple

HEX

#DDBDD5

RGB

rgb(221, 189, 213)

HSL

hsl(315, 32%, 80%)

HSB

hsb(315, 14%, 87%)

CMYK

cmyk(0%, 14%, 4%, 13%)

Oklch

oklch(83.3% 0.048 334.8)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#8797CA

Azure · CornflowerBlue · Cobalt Blue

HEX

#8797CA

RGB

rgb(135, 151, 202)

HSL

hsl(226, 39%, 66%)

HSB

hsb(226, 33%, 79%)

CMYK

cmyk(33%, 25%, 0%, 21%)

Oklch

oklch(68.3% 0.078 270.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BEC0D9

D9D7BF

Analogous

BFCED9

BEC0D9

CABFD9

Triadic

BEC0D9

D9BFC1

C1D9BF

Split-Comp.

BEC0D9

D9CABF

CED9BF

Tetradic

BEC0D9

D9BFCE

D9D7BF

BFD9CA

Contrast Matrix WCAG 2.1 Contrast

BEC0D9	C2E1DC	FDFEEE	DDBDD5	8797CA
—	1.3 Fail	1.8 Fail	1.0 Fail	1.6 Fail
1.3 Fail	—	1.4 Fail	1.2 Fail	2.1 Fail
1.8 Fail	1.4 Fail	—	1.7 Fail	2.8 Fail
1.0 Fail	1.2 Fail	1.7 Fail	—	1.7 Fail
1.6 Fail	2.1 Fail	2.8 Fail	1.7 Fail	—

White BG

1.8Fail

1.4Fail

1.0Fail

1.7Fail

2.9Fail

Black BG

11.7AAA

15.1AAA

20.6AAA

12.3AAA

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFD3

CFD0DD

FDFDF2

CFCFCF

8E8EBE

Deuteranopia

BFBFD1

CECBDE

FDFDF3

D1D3CE

8D8CBB

Tritanopia

BECECD

C4DEDE

FDF5F6

DBCBCA

88B4B2

Achromatopsia

C2C2C2

D7D7D7

FCFCFC

C9C9C9

989898

Shades & Tints Shades & Tints

#BEC0D9

Dark

Light

#C2E1DC

Dark

Light

#FDFEEE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bec0d9;
  --color-2: #c2e1dc;
  --color-3: #fdfeee;
  --color-4: #ddbdd5;
  --color-5: #8797ca;
}

SCSS

$color-1: #bec0d9;
$color-2: #c2e1dc;
$color-3: #fdfeee;
$color-4: #ddbdd5;
$color-5: #8797ca;

TAILWIND

colors: {
  'brand-1': '#bec0d9',
  'brand-2': '#c2e1dc',
  'brand-3': '#fdfeee',
  'brand-4': '#ddbdd5',
  'brand-5': '#8797ca',
}

RGB Array

[190, 192, 217], [194, 225, 220], [253, 254, 238], [221, 189, 213], [135, 151, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BEC0D9, #C2E1DC, #FDFEEE, #DDBDD5, #8797CA 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: #bec0d9; --color-2: #c2e1dc; --color-3: #fdfeee; --color-4: #ddbdd5; --color-5: #8797ca. 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