#F77884 + #E0818E + #C98A97 + #B2939E + #A498A3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F77884

Peach Pink · LightCoral · Coral Red

HEX

#F77884

RGB

rgb(247, 120, 132)

HSL

hsl(354, 89%, 72%)

HSB

hsb(354, 51%, 97%)

CMYK

cmyk(0%, 51%, 47%, 3%)

Oklch

oklch(72.3% 0.156 15.9)

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

#E0818E

Peach Pink · LightCoral · Coral Red

HEX

#E0818E

RGB

rgb(224, 129, 142)

HSL

hsl(352, 61%, 69%)

HSB

hsb(352, 42%, 88%)

CMYK

cmyk(0%, 42%, 37%, 12%)

Oklch

oklch(70.9% 0.118 11.7)

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

#C98A97

Peach Pink · Tan · Coral Red

HEX

#C98A97

RGB

rgb(201, 138, 151)

HSL

hsl(348, 37%, 66%)

HSB

hsb(348, 31%, 79%)

CMYK

cmyk(0%, 31%, 25%, 21%)

Oklch

oklch(70.0% 0.079 5.7)

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

#B2939E

Rouge · DarkGray · Rose Pink

HEX

#B2939E

RGB

rgb(178, 147, 158)

HSL

hsl(339, 17%, 64%)

HSB

hsb(339, 17%, 70%)

CMYK

cmyk(0%, 17%, 11%, 30%)

Oklch

oklch(69.5% 0.040 354.9)

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

#A498A3

Ash · DarkGray · Silver Sand

HEX

#A498A3

RGB

rgb(164, 152, 163)

HSL

hsl(305, 6%, 62%)

HSB

hsb(305, 7%, 64%)

CMYK

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

Oklch

oklch(69.3% 0.021 328.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F77884

78F7EA

Analogous

F778C4

F77884

F7AB78

Triadic

F77884

85F778

7885F7

Split-Comp.

F77884

78F7AB

78C4F7

Tetradic

F77884

C4F778

78F7EA

AB78F7

Contrast Matrix WCAG 2.1 Contrast

F77884	E0818E	C98A97	B2939E	A498A3
—	1.0 Fail	1.1 Fail	1.1 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.1 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

2.6Fail

2.7Fail

2.8Fail

Black BG

8.0AAA

7.7AAA

7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0BF81

B7B68B

AEAD94

A5A49B

9F9FA0

Deuteranopia

C7D180

BCC38A

B1B693

A6A99B

A0A0A0

Tritanopia

F17F7E

DB8888

C69191

B09999

A39E9E

Achromatopsia

9F9F9F

9E9E9E

9D9D9D

Shades & Tints Shades & Tints

#F77884

Dark

Light

#E0818E

Dark

Light

#C98A97

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f77884;
  --color-2: #e0818e;
  --color-3: #c98a97;
  --color-4: #b2939e;
  --color-5: #a498a3;
}

SCSS

$color-1: #f77884;
$color-2: #e0818e;
$color-3: #c98a97;
$color-4: #b2939e;
$color-5: #a498a3;

TAILWIND

colors: {
  'brand-1': '#f77884',
  'brand-2': '#e0818e',
  'brand-3': '#c98a97',
  'brand-4': '#b2939e',
  'brand-5': '#a498a3',
}

RGB Array

[247, 120, 132], [224, 129, 142], [201, 138, 151], [178, 147, 158], [164, 152, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F77884, #E0818E, #C98A97, #B2939E, #A498A3 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: #f77884; --color-2: #e0818e; --color-3: #c98a97; --color-4: #b2939e; --color-5: #a498a3. 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