#91BCD6 + #C4D4E9 + #E3DFE8 + #F9E8E9 + #FAF2EB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#91BCD6

Sky Blue · SkyBlue · Cobalt Blue

HEX

#91BCD6

RGB

rgb(145, 188, 214)

HSL

hsl(203, 46%, 70%)

HSB

hsb(203, 32%, 84%)

CMYK

cmyk(32%, 12%, 0%, 16%)

Oklch

oklch(77.3% 0.059 235.1)

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

#C4D4E9

Azure · LightBlue · Sky Blue

HEX

#C4D4E9

RGB

rgb(196, 212, 233)

HSL

hsl(214, 46%, 84%)

HSB

hsb(214, 16%, 91%)

CMYK

cmyk(16%, 9%, 0%, 9%)

Oklch

oklch(86.4% 0.034 255.2)

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

#E3DFE8

Wisteria · Lavender · Lavender

HEX

#E3DFE8

RGB

rgb(227, 223, 232)

HSL

hsl(267, 16%, 89%)

HSB

hsb(267, 4%, 91%)

CMYK

cmyk(2%, 4%, 0%, 9%)

Oklch

oklch(90.9% 0.013 306.0)

Traditional「Wisteria」· Paint「Lavender」· Creative Lavender Dream

#F9E8E9

Peach Pink · Linen · Cherry Blossom

HEX

#F9E8E9

RGB

rgb(249, 232, 233)

HSL

hsl(356, 59%, 94%)

HSB

hsb(356, 7%, 98%)

CMYK

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

Oklch

oklch(94.5% 0.019 13.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#FAF2EB

Apricot · Linen · Peach Orange

HEX

#FAF2EB

RGB

rgb(250, 242, 235)

HSL

hsl(28, 60%, 95%)

HSB

hsb(28, 6%, 98%)

CMYK

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

Oklch

oklch(96.5% 0.013 63.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

91BCD6

D6AA8F

Analogous

8FD6CD

91BCD6

8F98D6

Triadic

91BCD6

D68FBB

BBD68F

Split-Comp.

91BCD6

D68F98

D6CD8F

Tetradic

91BCD6

CD8FD6

D6AA8F

98D68F

Contrast Matrix WCAG 2.1 Contrast

91BCD6	C4D4E9	E3DFE8	F9E8E9	FAF2EB
—	1.3 Fail	1.5 Fail	1.7 Fail	1.8 Fail
1.3 Fail	—	1.1 Fail	1.3 Fail	1.4 Fail
1.5 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.7 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.8 Fail	1.4 Fail	1.2 Fail	1.1 Fail	—

White BG

2.0Fail

1.5Fail

1.3Fail

1.2Fail

1.1Fail

Black BG

10.4AAA

13.9AAA

16.0AAA

17.7AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A4D0

CBCBE4

E1E1E6

F2F1E9

F7F6ED

Deuteranopia

A19ECE

CAC9E3

E2E2E5

F3F4E9

F7F8ED

Tritanopia

93CBCA

C5E0DF

E3E4E4

F8E9E9

FAEEEE

Achromatopsia

B2B2B2

D2D2D2

E1E1E1

EDEDED

F4F4F4

Shades & Tints Shades & Tints

#91BCD6

Dark

Light

#C4D4E9

Dark

Light

#E3DFE8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #91bcd6;
  --color-2: #c4d4e9;
  --color-3: #e3dfe8;
  --color-4: #f9e8e9;
  --color-5: #faf2eb;
}

SCSS

$color-1: #91bcd6;
$color-2: #c4d4e9;
$color-3: #e3dfe8;
$color-4: #f9e8e9;
$color-5: #faf2eb;

TAILWIND

colors: {
  'brand-1': '#91bcd6',
  'brand-2': '#c4d4e9',
  'brand-3': '#e3dfe8',
  'brand-4': '#f9e8e9',
  'brand-5': '#faf2eb',
}

RGB Array

[145, 188, 214], [196, 212, 233], [227, 223, 232], [249, 232, 233], [250, 242, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #91BCD6, #C4D4E9, #E3DFE8, #F9E8E9, #FAF2EB 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: #91bcd6; --color-2: #c4d4e9; --color-3: #e3dfe8; --color-4: #f9e8e9; --color-5: #faf2eb. 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