← Back to Editor

#FD3C81 · #D3709B · #C2B2BC · #7DDAD1 · #D3E4D2

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FD3C81

Rouge · DeepPink · Rose Pink

HEX
#FD3C81
RGB
rgb(253, 60, 129)
HSL
hsl(339, 98%, 61%)
HSB
hsb(339, 76%, 99%)
CMYK
cmyk(0%, 76%, 49%, 1%)
Oklch
oklch(66.6% 0.230 5.0)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#D3709B

Rouge · LightCoral · Rose Pink

HEX
#D3709B
RGB
rgb(211, 112, 155)
HSL
hsl(334, 53%, 63%)
HSB
hsb(334, 47%, 83%)
CMYK
cmyk(0%, 47%, 27%, 17%)
Oklch
oklch(67.0% 0.133 353.9)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#C2B2BC

Mauve · Silver · Rose Pink

HEX
#C2B2BC
RGB
rgb(194, 178, 188)
HSL
hsl(322, 12%, 73%)
HSB
hsb(322, 8%, 76%)
CMYK
cmyk(0%, 8%, 3%, 24%)
Oklch
oklch(78.0% 0.023 339.7)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#7DDAD1

Jade · SkyBlue · Lake Green

HEX
#7DDAD1
RGB
rgb(125, 218, 209)
HSL
hsl(174, 56%, 67%)
HSB
hsb(174, 43%, 85%)
CMYK
cmyk(43%, 0%, 4%, 15%)
Oklch
oklch(82.8% 0.090 187.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D3E4D2

Celadon · LightGray · Mint Green

HEX
#D3E4D2
RGB
rgb(211, 228, 210)
HSL
hsl(117, 25%, 86%)
HSB
hsb(117, 8%, 89%)
CMYK
cmyk(7%, 0%, 8%, 11%)
Oklch
oklch(90.1% 0.030 143.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD3C81
3AFDB9

Analogous

FD3AE0
FD3C81
FD573A

Triadic

FD3C81
7EFD3A
3A7EFD

Split-Comp.

FD3C81
3AFD57
3AE0FD

Tetradic

FD3C81
E0FD3A
3AFDB9
573AFD

Contrast Matrix WCAG 2.1 Contrast

FD3C81
D3709B
C2B2BC
7DDAD1
D3E4D2
—
1.1
Fail
1.7
Fail
2.1
Fail
2.6
Fail
1.1
Fail
—
1.6
Fail
2.0
Fail
2.4
Fail
1.7
Fail
1.6
Fail
—
1.2
Fail
1.5
Fail
2.1
Fail
2.0
Fail
1.2
Fail
—
1.2
Fail
2.6
Fail
2.4
Fail
1.5
Fail
1.2
Fail
—
White BG
3.4AA Large
3.2AA Large
2.0Fail
1.6Fail
1.3Fail
Black BG
6.1AA
6.6AA
10.4AAA
12.8AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A870
A8A791
BBBBBA
A5A6D3
DADBD6

Deuteranopia

B5C36C
AEB58E
BCBDB9
A099D4
D9D8D7

Tritanopia

F36360
CE8887
C1B8B7
82D5D5
D4DADB

Achromatopsia

7E7E7E
939393
B8B8B8
BDBDBD
DDDDDD

Shades & Tints Shades & Tints

#FD3C81

Dark
Light

#D3709B

Dark
Light

#C2B2BC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd3c81;
  --color-2: #d3709b;
  --color-3: #c2b2bc;
  --color-4: #7ddad1;
  --color-5: #d3e4d2;
}

SCSS

$color-1: #fd3c81;
$color-2: #d3709b;
$color-3: #c2b2bc;
$color-4: #7ddad1;
$color-5: #d3e4d2;

TAILWIND

colors: {
  'brand-1': '#fd3c81',
  'brand-2': '#d3709b',
  'brand-3': '#c2b2bc',
  'brand-4': '#7ddad1',
  'brand-5': '#d3e4d2',
}

RGB Array

[253, 60, 129], [211, 112, 155], [194, 178, 188], [125, 218, 209], [211, 228, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FD3C81, #D3709B, #C2B2BC, #7DDAD1, #D3E4D2 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: #fd3c81; --color-2: #d3709b; --color-3: #c2b2bc; --color-4: #7ddad1; --color-5: #d3e4d2. 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