#D1778E + #DB917D + #DEBB8A + #D9D99E + #BBD1B2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D1778E

Peach Pink · LightCoral · Coral Red

HEX

#D1778E

RGB

rgb(209, 119, 142)

HSL

hsl(345, 49%, 64%)

HSB

hsb(345, 43%, 82%)

CMYK

cmyk(0%, 43%, 32%, 18%)

Oklch

oklch(67.4% 0.115 4.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DB917D

Peach Pink · DarkSalmon · Coral Red

HEX

#DB917D

RGB

rgb(219, 145, 125)

HSL

hsl(13, 57%, 67%)

HSB

hsb(13, 43%, 86%)

CMYK

cmyk(0%, 34%, 43%, 14%)

Oklch

oklch(72.6% 0.095 35.8)

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

#DEBB8A

Goose Yellow · BurlyWood · Warm Sun

HEX

#DEBB8A

RGB

rgb(222, 187, 138)

HSL

hsl(35, 56%, 71%)

HSB

hsb(35, 38%, 87%)

CMYK

cmyk(0%, 16%, 38%, 13%)

Oklch

oklch(81.1% 0.076 75.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D9D99E

Fresh Green · Khaki · Sunflower

HEX

#D9D99E

RGB

rgb(217, 217, 158)

HSL

hsl(60, 44%, 74%)

HSB

hsb(60, 27%, 85%)

CMYK

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

Oklch

oklch(87.1% 0.077 107.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#BBD1B2

Celadon · Silver · Apple Green

HEX

#BBD1B2

RGB

rgb(187, 209, 178)

HSL

hsl(103, 25%, 76%)

HSB

hsb(103, 15%, 82%)

CMYK

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

Oklch

oklch(83.6% 0.049 136.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1778E

76D0BA

Analogous

D076BA

D1778E

D08D76

Triadic

D1778E

8DD076

768DD0

Split-Comp.

D1778E

76D08D

76BAD0

Tetradic

D1778E

BAD076

76D0BA

8D76D0

Contrast Matrix WCAG 2.1 Contrast

D1778E	DB917D	DEBB8A	D9D99E	BBD1B2
—	1.2 Fail	1.7 Fail	2.1 Fail	1.9 Fail
1.2 Fail	—	1.4 Fail	1.7 Fail	1.5 Fail
1.7 Fail	1.4 Fail	—	1.2 Fail	1.1 Fail
2.1 Fail	1.7 Fail	1.2 Fail	—	1.1 Fail
1.9 Fail	1.5 Fail	1.1 Fail	1.1 Fail	—

White BG

3.1AA Large

2.5Fail

1.8Fail

1.5Fail

1.6Fail

Black BG

6.7AA

8.4AAA

11.6AAA

14.4AAA

12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA988

BBBA82

CFCF96

D9D9AC

C5C5BA

Deuteranopia

AFB687

BFC583

D1D399

D9D9B0

C3C2BB

Tritanopia

CC8483

D78687

DC9FA1

D9B8BA

BCBFC1

Achromatopsia

959595

A5A5A5

C0C0C0

D2D2D2

C7C7C7

Shades & Tints Shades & Tints

#D1778E

Dark

Light

#DB917D

Dark

Light

#DEBB8A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1778e;
  --color-2: #db917d;
  --color-3: #debb8a;
  --color-4: #d9d99e;
  --color-5: #bbd1b2;
}

SCSS

$color-1: #d1778e;
$color-2: #db917d;
$color-3: #debb8a;
$color-4: #d9d99e;
$color-5: #bbd1b2;

TAILWIND

colors: {
  'brand-1': '#d1778e',
  'brand-2': '#db917d',
  'brand-3': '#debb8a',
  'brand-4': '#d9d99e',
  'brand-5': '#bbd1b2',
}

RGB Array

[209, 119, 142], [219, 145, 125], [222, 187, 138], [217, 217, 158], [187, 209, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1778E, #DB917D, #DEBB8A, #D9D99E, #BBD1B2 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: #d1778e; --color-2: #db917d; --color-3: #debb8a; --color-4: #d9d99e; --color-5: #bbd1b2. 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