#FBCDD5 + #CAC3DC + #ADD6E2 + #B1E2D6 + #E3EFC0 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FBCDD5

Peach Pink · Pink · Cherry Blossom

HEX

#FBCDD5

RGB

rgb(251, 205, 213)

HSL

hsl(350, 85%, 89%)

HSB

hsb(350, 18%, 98%)

CMYK

cmyk(0%, 18%, 15%, 2%)

Oklch

oklch(89.0% 0.053 6.5)

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

#CAC3DC

Wisteria · LightGray · Sky Blue

HEX

#CAC3DC

RGB

rgb(202, 195, 220)

HSL

hsl(257, 26%, 81%)

HSB

hsb(257, 11%, 86%)

CMYK

cmyk(8%, 11%, 0%, 14%)

Oklch

oklch(83.1% 0.035 298.4)

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

#ADD6E2

Sky Blue · LightBlue · Glacier Blue

HEX

#ADD6E2

RGB

rgb(173, 214, 226)

HSL

hsl(194, 48%, 78%)

HSB

hsb(194, 23%, 89%)

CMYK

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

Oklch

oklch(85.1% 0.046 217.5)

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

#B1E2D6

Jade · LightBlue · Glacier Blue

HEX

#B1E2D6

RGB

rgb(177, 226, 214)

HSL

hsl(165, 46%, 79%)

HSB

hsb(165, 22%, 89%)

CMYK

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

Oklch

oklch(87.5% 0.053 178.3)

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

#E3EFC0

Willow Green · Wheat · Mint Green

HEX

#E3EFC0

RGB

rgb(227, 239, 192)

HSL

hsl(75, 59%, 85%)

HSB

hsb(75, 20%, 94%)

CMYK

cmyk(5%, 0%, 20%, 6%)

Oklch

oklch(93.1% 0.063 119.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBCDD5

CBFBF3

Analogous

FBCBEB

FBCDD5

FBDBCB

Triadic

FBCDD5

D3FBCB

CBD3FB

Split-Comp.

FBCDD5

CBFBDB

CBEBFB

Tetradic

FBCDD5

EBFBCB

CBFBF3

DBCBFB

Contrast Matrix WCAG 2.1 Contrast

FBCDD5	CAC3DC	ADD6E2	B1E2D6	E3EFC0
—	1.2 Fail	1.1 Fail	1.0 Fail	1.2 Fail
1.2 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.0 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.2 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

1.4Fail

1.7Fail

1.6Fail

1.4Fail

1.2Fail

Black BG

14.8AAA

12.4AAA

13.5AAA

14.7AAA

17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7D3

C7C7D6

BFBFDF

C6C7D9

E8E8CB

Deuteranopia

EAEDD3

C7C8D5

BCB9DE

C3C0DA

E8E7CE

Tritanopia

F9D2D1

CAD1D0

AFDDDC

B3DBDC

E4D4D6

Achromatopsia

DCDCDC

C8C8C8

CBCBCB

D2D2D2

E6E6E6

Shades & Tints Shades & Tints

#FBCDD5

Dark

Light

#CAC3DC

Dark

Light

#ADD6E2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbcdd5;
  --color-2: #cac3dc;
  --color-3: #add6e2;
  --color-4: #b1e2d6;
  --color-5: #e3efc0;
}

SCSS

$color-1: #fbcdd5;
$color-2: #cac3dc;
$color-3: #add6e2;
$color-4: #b1e2d6;
$color-5: #e3efc0;

TAILWIND

colors: {
  'brand-1': '#fbcdd5',
  'brand-2': '#cac3dc',
  'brand-3': '#add6e2',
  'brand-4': '#b1e2d6',
  'brand-5': '#e3efc0',
}

RGB Array

[251, 205, 213], [202, 195, 220], [173, 214, 226], [177, 226, 214], [227, 239, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FBCDD5, #CAC3DC, #ADD6E2, #B1E2D6, #E3EFC0 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: #fbcdd5; --color-2: #cac3dc; --color-3: #add6e2; --color-4: #b1e2d6; --color-5: #e3efc0. 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 cool-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