← Back to Editor

#F75277 · #CC7D7B · #BC8774 · #B29589 · #D39AA6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F75277

Peach Pink · Salmon · Coral Red

HEX
#F75277
RGB
rgb(247, 82, 119)
HSL
hsl(347, 91%, 65%)
HSB
hsb(347, 67%, 97%)
CMYK
cmyk(0%, 67%, 52%, 3%)
Oklch
oklch(67.3% 0.201 11.1)

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

#CC7D7B

Peach Pink · LightCoral · Coral Red

HEX
#CC7D7B
RGB
rgb(204, 125, 123)
HSL
hsl(1, 44%, 64%)
HSB
hsb(1, 40%, 80%)
CMYK
cmyk(0%, 39%, 40%, 20%)
Oklch
oklch(67.3% 0.099 21.6)

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

#BC8774

Tangerine · DarkSalmon · Warm Sun

HEX
#BC8774
RGB
rgb(188, 135, 116)
HSL
hsl(16, 35%, 60%)
HSB
hsb(16, 38%, 74%)
CMYK
cmyk(0%, 28%, 38%, 26%)
Oklch
oklch(67.1% 0.071 40.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#B29589

Apricot · DarkGray · Warm Sun

HEX
#B29589
RGB
rgb(178, 149, 137)
HSL
hsl(18, 21%, 62%)
HSB
hsb(18, 23%, 70%)
CMYK
cmyk(0%, 16%, 23%, 30%)
Oklch
oklch(69.3% 0.039 43.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D39AA6

Peach Pink · Tan · Coral Red

HEX
#D39AA6
RGB
rgb(211, 154, 166)
HSL
hsl(347, 39%, 72%)
HSB
hsb(347, 27%, 83%)
CMYK
cmyk(0%, 27%, 21%, 17%)
Oklch
oklch(74.4% 0.070 5.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F75277
55F7D4

Analogous

F755C9
F75277
F78355

Triadic

F75277
78F755
5578F7

Split-Comp.

F75277
55F783
55C9F7

Tetradic

F75277
C9F755
55F7D4
8355F7

Contrast Matrix WCAG 2.1 Contrast

F75277
CC7D7B
BC8774
B29589
D39AA6
—
1.1
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.2
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.3
Fail
1.3
Fail
1.2
Fail
—
White BG
3.3AA Large
3.1AA Large
3.1AA Large
2.8Fail
2.3Fail
Black BG
6.4AA
6.8AA
6.9AA
7.6AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0AE6E
AAA97B
A5A579
A5A58C
BABAA3

Deuteranopia

B9C56C
AEB47C
A8AC7A
A7A98D
BEC2A2

Tritanopia

EF6765
C87C7C
B97C7D
B18E8F
D0A1A0

Achromatopsia

888888
949494
959595
9C9C9C
ACACAC

Shades & Tints Shades & Tints

#F75277

Dark
Light

#CC7D7B

Dark
Light

#BC8774

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f75277;
  --color-2: #cc7d7b;
  --color-3: #bc8774;
  --color-4: #b29589;
  --color-5: #d39aa6;
}

SCSS

$color-1: #f75277;
$color-2: #cc7d7b;
$color-3: #bc8774;
$color-4: #b29589;
$color-5: #d39aa6;

TAILWIND

colors: {
  'brand-1': '#f75277',
  'brand-2': '#cc7d7b',
  'brand-3': '#bc8774',
  'brand-4': '#b29589',
  'brand-5': '#d39aa6',
}

RGB Array

[247, 82, 119], [204, 125, 123], [188, 135, 116], [178, 149, 137], [211, 154, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F75277, #CC7D7B, #BC8774, #B29589, #D39AA6 is ideal for: corporate websites, product showcases, portfolios. 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: #f75277; --color-2: #cc7d7b; --color-3: #bc8774; --color-4: #b29589; --color-5: #d39aa6. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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