#B8C0D9 + #C5DADE + #DBE3D8 + #FAEDE1 + #FFE4D1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8C0D9

Azure · LightSteelBlue · Cobalt Blue

HEX

#B8C0D9

RGB

rgb(184, 192, 217)

HSL

hsl(225, 30%, 79%)

HSB

hsb(225, 15%, 85%)

CMYK

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

Oklch

oklch(81.0% 0.036 271.5)

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

#C5DADE

Sky Blue · LightGray · Glacier Blue

HEX

#C5DADE

RGB

rgb(197, 218, 222)

HSL

hsl(190, 27%, 82%)

HSB

hsb(190, 11%, 87%)

CMYK

cmyk(11%, 2%, 0%, 13%)

Oklch

oklch(87.4% 0.023 210.4)

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

#DBE3D8

Celadon · LightGray · Mint Green

HEX

#DBE3D8

RGB

rgb(219, 227, 216)

HSL

hsl(104, 16%, 87%)

HSB

hsb(104, 5%, 89%)

CMYK

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

Oklch

oklch(90.7% 0.017 137.0)

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

#FAEDE1

Apricot · Linen · Peach Orange

HEX

#FAEDE1

RGB

rgb(250, 237, 225)

HSL

hsl(29, 71%, 93%)

HSB

hsb(29, 10%, 98%)

CMYK

cmyk(0%, 5%, 10%, 2%)

Oklch

oklch(95.3% 0.021 65.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FFE4D1

Apricot · Bisque · Peach Orange

HEX

#FFE4D1

RGB

rgb(255, 228, 209)

HSL

hsl(25, 100%, 91%)

HSB

hsb(25, 18%, 100%)

CMYK

cmyk(0%, 11%, 18%, 0%)

Oklch

oklch(93.6% 0.039 57.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8C0D9

DAD1B9

Analogous

B9D1DA

B8C0D9

C1B9DA

Triadic

B8C0D9

DAB9C1

C1DAB9

Split-Comp.

B8C0D9

DAC1B9

D1DAB9

Tetradic

B8C0D9

DAB9D1

DAD1B9

B9DAC1

Contrast Matrix WCAG 2.1 Contrast

B8C0D9	C5DADE	DBE3D8	FAEDE1	FFE4D1
—	1.2 Fail	1.4 Fail	1.6 Fail	1.5 Fail
1.2 Fail	—	1.1 Fail	1.3 Fail	1.2 Fail
1.4 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.6 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.8Fail

1.5Fail

1.3Fail

1.1Fail

1.2Fail

Black BG

11.6AAA

14.5AAA

16.0AAA

18.3AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBCD3

CECEDD

DEDFDB

F4F4E4

F3F3D6

Deuteranopia

BBBAD1

CDCBDD

DEDDDB

F5F6E5

F5F7D7

Tritanopia

B8CECD

C6DCDC

DBDDDD

F9E6E7

FED9DA

Achromatopsia

C0C0C0

D4D4D4

DFDFDF

F0F0F0

EAEAEA

Shades & Tints Shades & Tints

#B8C0D9

Dark

Light

#C5DADE

Dark

Light

#DBE3D8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8c0d9;
  --color-2: #c5dade;
  --color-3: #dbe3d8;
  --color-4: #faede1;
  --color-5: #ffe4d1;
}

SCSS

$color-1: #b8c0d9;
$color-2: #c5dade;
$color-3: #dbe3d8;
$color-4: #faede1;
$color-5: #ffe4d1;

TAILWIND

colors: {
  'brand-1': '#b8c0d9',
  'brand-2': '#c5dade',
  'brand-3': '#dbe3d8',
  'brand-4': '#faede1',
  'brand-5': '#ffe4d1',
}

RGB Array

[184, 192, 217], [197, 218, 222], [219, 227, 216], [250, 237, 225], [255, 228, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8C0D9, #C5DADE, #DBE3D8, #FAEDE1, #FFE4D1 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: #b8c0d9; --color-2: #c5dade; --color-3: #dbe3d8; --color-4: #faede1; --color-5: #ffe4d1. 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