← Back to Editor

#FE4A77 · #DD537C · #BB5D81 · #9A6685 · #786F8A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FE4A77

Peach Pink · Tomato · Coral Red

HEX
#FE4A77
RGB
rgb(254, 74, 119)
HSL
hsl(345, 99%, 64%)
HSB
hsb(345, 71%, 100%)
CMYK
cmyk(0%, 71%, 53%, 0%)
Oklch
oklch(67.6% 0.216 10.5)

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

#DD537C

Dark Violet · LightCoral · Rose Pink

HEX
#DD537C
RGB
rgb(221, 83, 124)
HSL
hsl(342, 67%, 60%)
HSB
hsb(342, 62%, 87%)
CMYK
cmyk(0%, 62%, 44%, 13%)
Oklch
oklch(63.5% 0.175 5.2)

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

#BB5D81

Dark Violet · LightCoral · Rose Pink

HEX
#BB5D81
RGB
rgb(187, 93, 129)
HSL
hsl(337, 41%, 55%)
HSB
hsb(337, 50%, 73%)
CMYK
cmyk(0%, 50%, 31%, 27%)
Oklch
oklch(60.1% 0.127 357.4)

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

#9A6685

Rose Purple · Gray · Camellia

HEX
#9A6685
RGB
rgb(154, 102, 133)
HSL
hsl(324, 20%, 50%)
HSB
hsb(324, 34%, 60%)
CMYK
cmyk(0%, 34%, 14%, 40%)
Oklch
oklch(57.5% 0.079 343.3)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#786F8A

Deep Indigo · SlateGray · Violet

HEX
#786F8A
RGB
rgb(120, 111, 138)
HSL
hsl(260, 11%, 49%)
HSB
hsb(260, 20%, 54%)
CMYK
cmyk(13%, 20%, 0%, 46%)
Oklch
oklch(56.0% 0.042 300.3)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FE4A77
48FED1

Analogous

FE48D1
FE4A77
FE7648

Triadic

FE4A77
76FE48
4876FE

Split-Comp.

FE4A77
48FE76
48D1FE

Tetradic

FE4A77
D1FE48
48FED1
7648FE

Contrast Matrix WCAG 2.1 Contrast

FE4A77
DD537C
BB5D81
9A6685
786F8A
—
1.2
Fail
1.3
Fail
1.4
Fail
1.5
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.5
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
White BG
3.3AA Large
3.7AA Large
4.2AA Large
4.6AA
4.7AA
Black BG
6.5AA
5.6AA
5.0AA
4.6AA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0AE6C
A1A072
929178
83837D
747483

Deuteranopia

BBC86A
A9B470
989F76
878A7C
757582

Tritanopia

F56462
D66A69
B67170
977876
787E7D

Achromatopsia

858585
818181
7D7D7D
797979
757575

Shades & Tints Shades & Tints

#FE4A77

Dark
Light

#DD537C

Dark
Light

#BB5D81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fe4a77;
  --color-2: #dd537c;
  --color-3: #bb5d81;
  --color-4: #9a6685;
  --color-5: #786f8a;
}

SCSS

$color-1: #fe4a77;
$color-2: #dd537c;
$color-3: #bb5d81;
$color-4: #9a6685;
$color-5: #786f8a;

TAILWIND

colors: {
  'brand-1': '#fe4a77',
  'brand-2': '#dd537c',
  'brand-3': '#bb5d81',
  'brand-4': '#9a6685',
  'brand-5': '#786f8a',
}

RGB Array

[254, 74, 119], [221, 83, 124], [187, 93, 129], [154, 102, 133], [120, 111, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FE4A77, #DD537C, #BB5D81, #9A6685, #786F8A 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: #fe4a77; --color-2: #dd537c; --color-3: #bb5d81; --color-4: #9a6685; --color-5: #786f8a. 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