#C5D9D5 + #D4D0CD + #E2C6C4 + #F1BDBC + #FFB3B3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C5D9D5

Jade · LightGray · Glacier Blue

HEX

#C5D9D5

RGB

rgb(197, 217, 213)

HSL

hsl(168, 21%, 81%)

HSB

hsb(168, 9%, 85%)

CMYK

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

Oklch

oklch(86.9% 0.022 182.5)

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

#D4D0CD

Apricot · LightGray · Pearl Gray

HEX

#D4D0CD

RGB

rgb(212, 208, 205)

HSL

hsl(26, 8%, 82%)

HSB

hsb(26, 3%, 83%)

CMYK

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

Oklch

oklch(86.0% 0.006 59.6)

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

#E2C6C4

Peach Pink · LightGray · Cherry Blossom

HEX

#E2C6C4

RGB

rgb(226, 198, 196)

HSL

hsl(4, 34%, 83%)

HSB

hsb(4, 13%, 89%)

CMYK

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

Oklch

oklch(85.0% 0.032 22.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F1BDBC

Peach Pink · LightPink · Cherry Blossom

HEX

#F1BDBC

RGB

rgb(241, 189, 188)

HSL

hsl(1, 65%, 84%)

HSB

hsb(1, 22%, 95%)

CMYK

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

Oklch

oklch(84.4% 0.060 19.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FFB3B3

Peach Pink · LightPink · Cherry Blossom

HEX

#FFB3B3

RGB

rgb(255, 179, 179)

HSL

hsl(0, 100%, 85%)

HSB

hsb(0, 30%, 100%)

CMYK

cmyk(0%, 30%, 30%, 0%)

Oklch

oklch(83.9% 0.089 19.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5D9D5

D9C4C8

Analogous

C4D9CA

C5D9D5

C4D3D9

Triadic

C5D9D5

D5C4D9

D9D5C4

Split-Comp.

C5D9D5

D9C4D3

D9CAC4

Tetradic

C5D9D5

CAC4D9

D9C4C8

D3D9C4

Contrast Matrix WCAG 2.1 Contrast

C5D9D5	D4D0CD	E2C6C4	F1BDBC	FFB3B3
—	1.0 Fail	1.1 Fail	1.1 Fail	1.2 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.5Fail

1.6Fail

1.7Fail

Black BG

14.3AAA

13.7AAA

13.1AAA

12.7AAA

12.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECED6

D2D2CE

D6D6C4

DADABC

DEDDB3

Deuteranopia

CDCBD6

D3D3CE

D8DAC5

DEE1BC

E3E8B3

Tritanopia

C6D7D7

D4CECE

E1C5C5

EEBCBC

FBB3B3

Achromatopsia

D3D3D3

D1D1D1

CECECE

CCCCCC

CACACA

Shades & Tints Shades & Tints

#C5D9D5

Dark

Light

#D4D0CD

Dark

Light

#E2C6C4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5d9d5;
  --color-2: #d4d0cd;
  --color-3: #e2c6c4;
  --color-4: #f1bdbc;
  --color-5: #ffb3b3;
}

SCSS

$color-1: #c5d9d5;
$color-2: #d4d0cd;
$color-3: #e2c6c4;
$color-4: #f1bdbc;
$color-5: #ffb3b3;

TAILWIND

colors: {
  'brand-1': '#c5d9d5',
  'brand-2': '#d4d0cd',
  'brand-3': '#e2c6c4',
  'brand-4': '#f1bdbc',
  'brand-5': '#ffb3b3',
}

RGB Array

[197, 217, 213], [212, 208, 205], [226, 198, 196], [241, 189, 188], [255, 179, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5D9D5, #D4D0CD, #E2C6C4, #F1BDBC, #FFB3B3 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: #c5d9d5; --color-2: #d4d0cd; --color-3: #e2c6c4; --color-4: #f1bdbc; --color-5: #ffb3b3. 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