#F32266 + #C2557B + #C792AE + #E7B9B8 + #CCF4D7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F32266

Dark Violet · DeepPink · Rose Pink

HEX

#F32266

RGB

rgb(243, 34, 102)

HSL

hsl(340, 90%, 54%)

HSB

hsb(340, 86%, 95%)

CMYK

cmyk(0%, 86%, 58%, 5%)

Oklch

oklch(62.6% 0.236 10.3)

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

#C2557B

Dark Violet · LightCoral · Rose Pink

HEX

#C2557B

RGB

rgb(194, 85, 123)

HSL

hsl(339, 47%, 55%)

HSB

hsb(339, 56%, 76%)

CMYK

cmyk(0%, 56%, 37%, 24%)

Oklch

oklch(59.8% 0.145 0.6)

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

#C792AE

Mauve · DarkGray · Rose Pink

HEX

#C792AE

RGB

rgb(199, 146, 174)

HSL

hsl(328, 32%, 68%)

HSB

hsb(328, 27%, 78%)

CMYK

cmyk(0%, 27%, 13%, 22%)

Oklch

oklch(71.9% 0.074 346.1)

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

#E7B9B8

Peach Pink · LightPink · Cherry Blossom

HEX

#E7B9B8

RGB

rgb(231, 185, 184)

HSL

hsl(1, 49%, 81%)

HSB

hsb(1, 20%, 91%)

CMYK

cmyk(0%, 20%, 20%, 9%)

Oklch

oklch(82.6% 0.053 19.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#CCF4D7

Emerald · LightGray · Mint Green

HEX

#CCF4D7

RGB

rgb(204, 244, 215)

HSL

hsl(137, 65%, 88%)

HSB

hsb(137, 16%, 96%)

CMYK

cmyk(16%, 0%, 12%, 4%)

Oklch

oklch(93.1% 0.057 153.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F32266

20F3AD

Analogous

F320D0

F32266

F34320

Triadic

F32266

67F320

2067F3

Split-Comp.

F32266

20F343

20D0F3

Tetradic

F32266

D0F320

20F3AD

4320F3

Contrast Matrix WCAG 2.1 Contrast

F32266	C2557B	C792AE	E7B9B8	CCF4D7
—	1.1 Fail	1.6 Fail	2.3 Fail	3.3 AA Large
1.1 Fail	—	1.7 Fail	2.5 Fail	3.6 AA Large
1.6 Fail	1.7 Fail	—	1.5 Fail	2.1 Fail
2.3 Fail	2.5 Fail	1.5 Fail	—	1.5 Fail
3.3 AA Large	3.6 AA Large	2.1 Fail	1.5 Fail	—

White BG

4.0AA Large

4.3AA Large

2.6Fail

1.7Fail

1.2Fail

Black BG

5.2AA

4.9AA

8.2AAA

12.0AAA

17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

999756

939272

B0B0A7

D3D3B8

DDDEDE

Deuteranopia

A5B452

99A170

B3B7A6

D6D9B8

DBD8E0

Tritanopia

E94946

BD6B69

C4A2A1

E5B8B8

CEE4E5

Achromatopsia

686868

7A7A7A

A5A5A5

C7C7C7

E5E5E5

Shades & Tints Shades & Tints

#F32266

Dark

Light

#C2557B

Dark

Light

#C792AE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f32266;
  --color-2: #c2557b;
  --color-3: #c792ae;
  --color-4: #e7b9b8;
  --color-5: #ccf4d7;
}

SCSS

$color-1: #f32266;
$color-2: #c2557b;
$color-3: #c792ae;
$color-4: #e7b9b8;
$color-5: #ccf4d7;

TAILWIND

colors: {
  'brand-1': '#f32266',
  'brand-2': '#c2557b',
  'brand-3': '#c792ae',
  'brand-4': '#e7b9b8',
  'brand-5': '#ccf4d7',
}

RGB Array

[243, 34, 102], [194, 85, 123], [199, 146, 174], [231, 185, 184], [204, 244, 215]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F32266, #C2557B, #C792AE, #E7B9B8, #CCF4D7 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: #f32266; --color-2: #c2557b; --color-3: #c792ae; --color-4: #e7b9b8; --color-5: #ccf4d7. 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