#DC5156 + #E77167 + #E09B96 + #D3C6B6 + #CDD9C1 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DC5156

Vermilion · Tomato · Passion Red

HEX

#DC5156

RGB

rgb(220, 81, 86)

HSL

hsl(358, 67%, 59%)

HSB

hsb(358, 63%, 86%)

CMYK

cmyk(0%, 63%, 61%, 14%)

Oklch

oklch(62.3% 0.174 21.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#E77167

Peach Pink · Salmon · Coral Red

HEX

#E77167

RGB

rgb(231, 113, 103)

HSL

hsl(5, 73%, 65%)

HSB

hsb(5, 55%, 91%)

CMYK

cmyk(0%, 51%, 55%, 9%)

Oklch

oklch(68.5% 0.148 26.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E09B96

Peach Pink · DarkSalmon · Coral Red

HEX

#E09B96

RGB

rgb(224, 155, 150)

HSL

hsl(4, 54%, 73%)

HSB

hsb(4, 33%, 88%)

CMYK

cmyk(0%, 31%, 33%, 12%)

Oklch

oklch(75.5% 0.084 23.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D3C6B6

Goose Yellow · Silver · Peach Orange

HEX

#D3C6B6

RGB

rgb(211, 198, 182)

HSL

hsl(33, 25%, 77%)

HSB

hsb(33, 14%, 83%)

CMYK

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

Oklch

oklch(83.3% 0.026 73.1)

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

#CDD9C1

Celadon · LightGray · Apple Green

HEX

#CDD9C1

RGB

rgb(205, 217, 193)

HSL

hsl(90, 24%, 80%)

HSB

hsb(90, 11%, 85%)

CMYK

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

Oklch

oklch(87.0% 0.035 128.9)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DC5156

50DCD8

Analogous

DC509B

DC5156

DC9250

Triadic

DC5156

55DC50

5055DC

Split-Comp.

DC5156

50DC92

509BDC

Tetradic

DC5156

9BDC50

50DCD8

9250DC

Contrast Matrix WCAG 2.1 Contrast

DC5156	E77167	E09B96	D3C6B6	CDD9C1
—	1.3 Fail	1.7 Fail	2.3 Fail	2.7 Fail
1.3 Fail	—	1.3 Fail	1.8 Fail	2.1 Fail
1.7 Fail	1.3 Fail	—	1.3 Fail	1.5 Fail
2.3 Fail	1.8 Fail	1.3 Fail	—	1.1 Fail
2.7 Fail	2.1 Fail	1.5 Fail	1.1 Fail	—

White BG

3.9AA Large

3.0AA Large

2.3Fail

1.7Fail

1.5Fail

Black BG

5.4AA

7.0AA

9.3AAA

12.5AAA

14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09F55

B4B369

C2C297

CDCDBA

D2D2C7

Deuteranopia

A8B255

BBC46A

C6CB98

CECFBB

D2D1C8

Tritanopia

D55454

E16B6C

DD9898

D2BDBE

CECBCC

Achromatopsia

7B7B7B

939393

AFAFAF

C8C8C8

D3D3D3

Shades & Tints Shades & Tints

#DC5156

Dark

Light

#E77167

Dark

Light

#E09B96

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dc5156;
  --color-2: #e77167;
  --color-3: #e09b96;
  --color-4: #d3c6b6;
  --color-5: #cdd9c1;
}

SCSS

$color-1: #dc5156;
$color-2: #e77167;
$color-3: #e09b96;
$color-4: #d3c6b6;
$color-5: #cdd9c1;

TAILWIND

colors: {
  'brand-1': '#dc5156',
  'brand-2': '#e77167',
  'brand-3': '#e09b96',
  'brand-4': '#d3c6b6',
  'brand-5': '#cdd9c1',
}

RGB Array

[220, 81, 86], [231, 113, 103], [224, 155, 150], [211, 198, 182], [205, 217, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #DC5156, #E77167, #E09B96, #D3C6B6, #CDD9C1 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: #dc5156; --color-2: #e77167; --color-3: #e09b96; --color-4: #d3c6b6; --color-5: #cdd9c1. 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