#D3193C + #F6264D + #FE5C5C + #D2B8BC + #D6D8DC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D3193C

Vermilion · Crimson · Passion Red

HEX

#D3193C

RGB

rgb(211, 25, 60)

HSL

hsl(349, 79%, 46%)

HSB

hsb(349, 88%, 83%)

CMYK

cmyk(0%, 88%, 72%, 17%)

Oklch

oklch(55.6% 0.212 19.7)

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

#F6264D

Vermilion · Crimson · Passion Red

HEX

#F6264D

RGB

rgb(246, 38, 77)

HSL

hsl(349, 92%, 56%)

HSB

hsb(349, 85%, 96%)

CMYK

cmyk(0%, 85%, 69%, 4%)

Oklch

oklch(62.9% 0.235 18.8)

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

#FE5C5C

Peach Pink · Tomato · Coral Red

HEX

#FE5C5C

RGB

rgb(254, 92, 92)

HSL

hsl(0, 99%, 68%)

HSB

hsb(0, 64%, 100%)

CMYK

cmyk(0%, 64%, 64%, 0%)

Oklch

oklch(68.9% 0.198 23.9)

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

#D2B8BC

Peach Pink · Silver · Coral Red

HEX

#D2B8BC

RGB

rgb(210, 184, 188)

HSL

hsl(351, 22%, 77%)

HSB

hsb(351, 12%, 82%)

CMYK

cmyk(0%, 12%, 10%, 18%)

Oklch

oklch(80.6% 0.030 7.3)

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

#D6D8DC

Azure · LightGray · Pearl Gray

HEX

#D6D8DC

RGB

rgb(214, 216, 220)

HSL

hsl(220, 8%, 85%)

HSB

hsb(220, 3%, 86%)

CMYK

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

Oklch

oklch(88.2% 0.006 264.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3193C

19D2B0

Analogous

D21997

D3193C

D25319

Triadic

D3193C

3BD219

193BD2

Split-Comp.

D3193C

19D253

1997D2

Tetradic

D3193C

97D219

19D2B0

5319D2

Contrast Matrix WCAG 2.1 Contrast

D3193C	F6264D	FE5C5C	D2B8BC	D6D8DC
—	1.3 Fail	1.7 Fail	2.8 Fail	3.7 AA Large
1.3 Fail	—	1.3 Fail	2.1 Fail	2.8 Fail
1.7 Fail	1.3 Fail	—	1.6 Fail	2.1 Fail
2.8 Fail	2.1 Fail	1.6 Fail	—	1.3 Fail
3.7 AA Large	2.8 Fail	2.1 Fail	1.3 Fail	—

White BG

5.3AA

4.0AA Large

3.0AA Large

1.9Fail

1.4Fail

Black BG

4.0AA Large

5.3AA

6.9AA

11.3AAA

14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

828134

9C9A44

B8B65C

C7C7BB

D7D7DB

Deuteranopia

8D9B32

A8B841

C1CD5C

C8CABB

D7D7DB

Tritanopia

CA2D2B

EC3C3A

F65C5C

D1BABA

D6DADA

Achromatopsia

555555

696969

8C8C8C

C0C0C0

D8D8D8

Shades & Tints Shades & Tints

#D3193C

Dark

Light

#F6264D

Dark

Light

#FE5C5C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3193c;
  --color-2: #f6264d;
  --color-3: #fe5c5c;
  --color-4: #d2b8bc;
  --color-5: #d6d8dc;
}

SCSS

$color-1: #d3193c;
$color-2: #f6264d;
$color-3: #fe5c5c;
$color-4: #d2b8bc;
$color-5: #d6d8dc;

TAILWIND

colors: {
  'brand-1': '#d3193c',
  'brand-2': '#f6264d',
  'brand-3': '#fe5c5c',
  'brand-4': '#d2b8bc',
  'brand-5': '#d6d8dc',
}

RGB Array

[211, 25, 60], [246, 38, 77], [254, 92, 92], [210, 184, 188], [214, 216, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3193C, #F6264D, #FE5C5C, #D2B8BC, #D6D8DC 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: #d3193c; --color-2: #f6264d; --color-3: #fe5c5c; --color-4: #d2b8bc; --color-5: #d6d8dc. 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