#F5366E + #E6779B + #DEC2B2 + #CCDBBA + #ACE6D5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5366E

Dark Violet · DeepPink · Rose Pink

HEX

#F5366E

RGB

rgb(245, 54, 110)

HSL

hsl(342, 91%, 59%)

HSB

hsb(342, 78%, 96%)

CMYK

cmyk(0%, 78%, 55%, 4%)

Oklch

oklch(64.3% 0.225 9.8)

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

#E6779B

Rouge · LightCoral · Rose Pink

HEX

#E6779B

RGB

rgb(230, 119, 155)

HSL

hsl(341, 69%, 68%)

HSB

hsb(341, 48%, 90%)

CMYK

cmyk(0%, 48%, 33%, 10%)

Oklch

oklch(70.5% 0.142 0.8)

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

#DEC2B2

Apricot · Silver · Peach Orange

HEX

#DEC2B2

RGB

rgb(222, 194, 178)

HSL

hsl(22, 40%, 78%)

HSB

hsb(22, 20%, 87%)

CMYK

cmyk(0%, 13%, 20%, 13%)

Oklch

oklch(83.4% 0.039 51.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CCDBBA

Willow Green · LightGray · Apple Green

HEX

#CCDBBA

RGB

rgb(204, 219, 186)

HSL

hsl(87, 31%, 79%)

HSB

hsb(87, 15%, 86%)

CMYK

cmyk(7%, 0%, 15%, 14%)

Oklch

oklch(87.1% 0.047 127.3)

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

#ACE6D5

Jade · LightBlue · Glacier Blue

HEX

#ACE6D5

RGB

rgb(172, 230, 213)

HSL

hsl(162, 54%, 79%)

HSB

hsb(162, 25%, 90%)

CMYK

cmyk(25%, 0%, 7%, 10%)

Oklch

oklch(88.1% 0.064 174.8)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5366E

37F6BD

Analogous

F637D0

F5366E

F65D37

Triadic

F5366E

70F637

3770F6

Split-Comp.

F5366E

37F65D

37D0F6

Tetradic

F5366E

D0F637

37F6BD

5D37F6

Contrast Matrix WCAG 2.1 Contrast

F5366E	E6779B	DEC2B2	CCDBBA	ACE6D5
—	1.3 Fail	2.2 Fail	2.6 Fail	2.7 Fail
1.3 Fail	—	1.7 Fail	1.9 Fail	2.0 Fail
2.2 Fail	1.7 Fail	—	1.2 Fail	1.2 Fail
2.6 Fail	1.9 Fail	1.2 Fail	—	1.0 Fail
2.7 Fail	2.0 Fail	1.2 Fail	1.0 Fail	—

White BG

3.7AA Large

2.8Fail

1.7Fail

1.5Fail

1.4Fail

Black BG

5.6AA

7.5AAA

12.5AAA

14.4AAA

15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A160

B6B592

D2D2B6

D2D3C2

C5C6D9

Deuteranopia

ADBC5D

BCC590

D4D6B7

D2D1C4

C2BDDA

Tritanopia

EB5653

E08B8A

DDB9BA

CDC8CA

AFDCDD

Achromatopsia

757575

9C9C9C

C9C9C9

D3D3D3

Shades & Tints Shades & Tints

#F5366E

Dark

Light

#E6779B

Dark

Light

#DEC2B2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5366e;
  --color-2: #e6779b;
  --color-3: #dec2b2;
  --color-4: #ccdbba;
  --color-5: #ace6d5;
}

SCSS

$color-1: #f5366e;
$color-2: #e6779b;
$color-3: #dec2b2;
$color-4: #ccdbba;
$color-5: #ace6d5;

TAILWIND

colors: {
  'brand-1': '#f5366e',
  'brand-2': '#e6779b',
  'brand-3': '#dec2b2',
  'brand-4': '#ccdbba',
  'brand-5': '#ace6d5',
}

RGB Array

[245, 54, 110], [230, 119, 155], [222, 194, 178], [204, 219, 186], [172, 230, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5366E, #E6779B, #DEC2B2, #CCDBBA, #ACE6D5 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: #f5366e; --color-2: #e6779b; --color-3: #dec2b2; --color-4: #ccdbba; --color-5: #ace6d5. 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