#B0B9DA + #CEE3E6 + #D7C9AE + #FAEBD7 + #FFF5EE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B0B9DA

Azure · LightSteelBlue · Cobalt Blue

HEX

#B0B9DA

RGB

rgb(176, 185, 218)

HSL

hsl(227, 36%, 77%)

HSB

hsb(227, 19%, 85%)

CMYK

cmyk(19%, 15%, 0%, 15%)

Oklch

oklch(79.0% 0.048 273.2)

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

#CEE3E6

Sky Blue · LightGray · Glacier Blue

HEX

#CEE3E6

RGB

rgb(206, 227, 230)

HSL

hsl(188, 32%, 85%)

HSB

hsb(188, 10%, 90%)

CMYK

cmyk(10%, 1%, 0%, 10%)

Oklch

oklch(90.1% 0.023 207.1)

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

#D7C9AE

Goose Yellow · Silver · Lemon Cream

HEX

#D7C9AE

RGB

rgb(215, 201, 174)

HSL

hsl(40, 34%, 76%)

HSB

hsb(40, 19%, 84%)

CMYK

cmyk(0%, 7%, 19%, 16%)

Oklch

oklch(84.0% 0.040 83.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#FAEBD7

Goose Yellow · Beige · Peach Orange

HEX

#FAEBD7

RGB

rgb(250, 235, 215)

HSL

hsl(34, 78%, 91%)

HSB

hsb(34, 14%, 98%)

CMYK

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

Oklch

oklch(94.7% 0.031 75.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFF5EE

Apricot · SeaShell · Peach Orange

HEX

#FFF5EE

RGB

rgb(255, 245, 238)

HSL

hsl(25, 100%, 97%)

HSB

hsb(25, 7%, 100%)

CMYK

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

Oklch

oklch(97.6% 0.014 57.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0B9DA

D9D0AF

Analogous

AFCDD9

B0B9DA

BBAFD9

Triadic

B0B9DA

D9AFB8

B8D9AF

Split-Comp.

B0B9DA

D9BBAF

CDD9AF

Tetradic

B0B9DA

D9AFCD

D9D0AF

AFD9BB

Contrast Matrix WCAG 2.1 Contrast

B0B9DA	CEE3E6	D7C9AE	FAEBD7	FFF5EE
—	1.5 Fail	1.2 Fail	1.7 Fail	1.8 Fail
1.5 Fail	—	1.2 Fail	1.1 Fail	1.2 Fail
1.2 Fail	1.2 Fail	—	1.4 Fail	1.5 Fail
1.7 Fail	1.1 Fail	1.4 Fail	—	1.1 Fail
1.8 Fail	1.2 Fail	1.5 Fail	1.1 Fail	—

White BG

1.9Fail

1.3Fail

1.6Fail

1.2Fail

1.1Fail

Black BG

10.8AAA

15.8AAA

12.9AAA

17.9AAA

19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B4D2

D7D7E5

D1D1B5

F4F3DC

FBFBF0

Deuteranopia

B3B3D0

D6D4E5

D2D3B6

F4F6DD

FBFCF0

Tritanopia

B0CCCA

CFE5E5

D6BABB

F9E0E1

FFF1F1

Achromatopsia

BABABA

DDDDDD

CACACA

EDEDED

F7F7F7

Shades & Tints Shades & Tints

#B0B9DA

Dark

Light

#CEE3E6

Dark

Light

#D7C9AE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0b9da;
  --color-2: #cee3e6;
  --color-3: #d7c9ae;
  --color-4: #faebd7;
  --color-5: #fff5ee;
}

SCSS

$color-1: #b0b9da;
$color-2: #cee3e6;
$color-3: #d7c9ae;
$color-4: #faebd7;
$color-5: #fff5ee;

TAILWIND

colors: {
  'brand-1': '#b0b9da',
  'brand-2': '#cee3e6',
  'brand-3': '#d7c9ae',
  'brand-4': '#faebd7',
  'brand-5': '#fff5ee',
}

RGB Array

[176, 185, 218], [206, 227, 230], [215, 201, 174], [250, 235, 215], [255, 245, 238]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0B9DA, #CEE3E6, #D7C9AE, #FAEBD7, #FFF5EE 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: #b0b9da; --color-2: #cee3e6; --color-3: #d7c9ae; --color-4: #faebd7; --color-5: #fff5ee. 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