#D73E6D + #ECA996 + #FFF1E1 + #B1BCB6 + #D5E0D2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D73E6D

Dark Violet · MediumVioletRed · Rose Pink

HEX

#D73E6D

RGB

rgb(215, 62, 109)

HSL

hsl(342, 66%, 54%)

HSB

hsb(342, 71%, 84%)

CMYK

cmyk(0%, 71%, 49%, 16%)

Oklch

oklch(60.0% 0.191 6.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#ECA996

Peach Pink · BurlyWood · Coral Red

HEX

#ECA996

RGB

rgb(236, 169, 150)

HSL

hsl(13, 69%, 76%)

HSB

hsb(13, 36%, 93%)

CMYK

cmyk(0%, 28%, 36%, 7%)

Oklch

oklch(79.4% 0.084 36.5)

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

#FFF1E1

Goose Yellow · Linen · Peach Orange

HEX

#FFF1E1

RGB

rgb(255, 241, 225)

HSL

hsl(32, 100%, 94%)

HSB

hsb(32, 12%, 100%)

CMYK

cmyk(0%, 5%, 12%, 0%)

Oklch

oklch(96.5% 0.026 71.2)

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

#B1BCB6

Celadon · Silver · Pearl Gray

HEX

#B1BCB6

RGB

rgb(177, 188, 182)

HSL

hsl(147, 8%, 72%)

HSB

hsb(147, 6%, 74%)

CMYK

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

Oklch

oklch(78.5% 0.015 162.4)

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

#D5E0D2

Celadon · LightGray · Mint Green

HEX

#D5E0D2

RGB

rgb(213, 224, 210)

HSL

hsl(107, 18%, 85%)

HSB

hsb(107, 6%, 88%)

CMYK

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

Oklch

oklch(89.4% 0.022 139.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D73E6D

3CD7A9

Analogous

D73CB8

D73E6D

D75B3C

Triadic

D73E6D

6BD73C

3C6BD7

Split-Comp.

D73E6D

3CD75B

3CB8D7

Tetradic

D73E6D

B8D73C

3CD7A9

5B3CD7

Contrast Matrix WCAG 2.1 Contrast

D73E6D	ECA996	FFF1E1	B1BCB6	D5E0D2
—	2.2 Fail	3.9 AA Large	2.2 Fail	3.2 AA Large
2.2 Fail	—	1.8 Fail	1.0 Fail	1.4 Fail
3.9 AA Large	1.8 Fail	—	1.8 Fail	1.2 Fail
2.2 Fail	1.0 Fail	1.8 Fail	—	1.4 Fail
3.2 AA Large	1.4 Fail	1.2 Fail	1.4 Fail	—

White BG

4.4AA Large

2.0Fail

1.1Fail

2.0Fail

1.4Fail

Black BG

4.8AA

10.7AAA

18.9AAA

10.7AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

959362

CFCE9B

F9F9E5

B6B6B7

DADAD5

Deuteranopia

9EA95F

D3D89C

FAFBE6

B5B4B8

D9D8D6

Tritanopia

CF5957

E99E9F

FEE8E9

B2B9B9

D6D8D9

Achromatopsia

717171

BBBBBB

F3F3F3

B8B8B8

DBDBDB

Shades & Tints Shades & Tints

#D73E6D

Dark

Light

#ECA996

Dark

Light

#FFF1E1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d73e6d;
  --color-2: #eca996;
  --color-3: #fff1e1;
  --color-4: #b1bcb6;
  --color-5: #d5e0d2;
}

SCSS

$color-1: #d73e6d;
$color-2: #eca996;
$color-3: #fff1e1;
$color-4: #b1bcb6;
$color-5: #d5e0d2;

TAILWIND

colors: {
  'brand-1': '#d73e6d',
  'brand-2': '#eca996',
  'brand-3': '#fff1e1',
  'brand-4': '#b1bcb6',
  'brand-5': '#d5e0d2',
}

RGB Array

[215, 62, 109], [236, 169, 150], [255, 241, 225], [177, 188, 182], [213, 224, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D73E6D, #ECA996, #FFF1E1, #B1BCB6, #D5E0D2 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: #d73e6d; --color-2: #eca996; --color-3: #fff1e1; --color-4: #b1bcb6; --color-5: #d5e0d2. 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