#B5D4FF + #C8D7EC + #DADADA + #ECDEC8 + #FFE1B5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B5D4FF

Azure · LightBlue · Sky Blue

HEX

#B5D4FF

RGB

rgb(181, 212, 255)

HSL

hsl(215, 100%, 85%)

HSB

hsb(215, 29%, 100%)

CMYK

cmyk(29%, 17%, 0%, 0%)

Oklch

oklch(86.2% 0.069 256.6)

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

#C8D7EC

Azure · LightGray · Sky Blue

HEX

#C8D7EC

RGB

rgb(200, 215, 236)

HSL

hsl(215, 49%, 85%)

HSB

hsb(215, 15%, 93%)

CMYK

cmyk(15%, 9%, 0%, 7%)

Oklch

oklch(87.4% 0.033 256.8)

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

#DADADA

Silver Gray · LightGray · Pearl Gray

HEX

#DADADA

RGB

rgb(218, 218, 218)

HSL

hsl(0, 0%, 85%)

HSB

hsb(0, 0%, 85%)

CMYK

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

Oklch

oklch(88.8% 0.000 89.9)

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

#ECDEC8

Goose Yellow · Bisque · Peach Orange

HEX

#ECDEC8

RGB

rgb(236, 222, 200)

HSL

hsl(37, 49%, 85%)

HSB

hsb(37, 15%, 93%)

CMYK

cmyk(0%, 6%, 15%, 7%)

Oklch

oklch(90.6% 0.033 79.3)

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

#FFE1B5

Goose Yellow · Wheat · Peach Orange

HEX

#FFE1B5

RGB

rgb(255, 225, 181)

HSL

hsl(36, 100%, 85%)

HSB

hsb(36, 29%, 100%)

CMYK

cmyk(0%, 12%, 29%, 0%)

Oklch

oklch(92.4% 0.066 77.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5D4FF

FFDFB3

Analogous

B3F9FF

B5D4FF

B9B3FF

Triadic

B5D4FF

FFB3D2

D2FFB3

Split-Comp.

B5D4FF

FFB9B3

F9FFB3

Tetradic

B5D4FF

FFB3F9

FFDFB3

B3FFB9

Contrast Matrix WCAG 2.1 Contrast

B5D4FF	C8D7EC	DADADA	ECDEC8	FFE1B5
—	1.0 Fail	1.1 Fail	1.1 Fail	1.2 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.2 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.5Fail

1.4Fail

1.3Fail

Black BG

13.8AAA

14.4AAA

15.0AAA

15.8AAA

16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C3F5

CECFE7

DADADA

E6E6CD

F2F2C0

Deuteranopia

C1BEF2

CECDE6

DADADA

E7E8CF

F4F6C2

Tritanopia

B7ECEB

C9E3E2

DADADA

EBD2D2

FEC8CA

Achromatopsia

D0D0D0

D5D5D5

DADADA

E0E0E0

E5E5E5

Shades & Tints Shades & Tints

#B5D4FF

Dark

Light

#C8D7EC

Dark

Light

#DADADA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5d4ff;
  --color-2: #c8d7ec;
  --color-3: #dadada;
  --color-4: #ecdec8;
  --color-5: #ffe1b5;
}

SCSS

$color-1: #b5d4ff;
$color-2: #c8d7ec;
$color-3: #dadada;
$color-4: #ecdec8;
$color-5: #ffe1b5;

TAILWIND

colors: {
  'brand-1': '#b5d4ff',
  'brand-2': '#c8d7ec',
  'brand-3': '#dadada',
  'brand-4': '#ecdec8',
  'brand-5': '#ffe1b5',
}

RGB Array

[181, 212, 255], [200, 215, 236], [218, 218, 218], [236, 222, 200], [255, 225, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B5D4FF, #C8D7EC, #DADADA, #ECDEC8, #FFE1B5 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: #b5d4ff; --color-2: #c8d7ec; --color-3: #dadada; --color-4: #ecdec8; --color-5: #ffe1b5. 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