← Back to Editor

#FC527E · #A91BEE · #DE6075 · #B69189 · #B6B5A7

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

#FC527E

Rouge · LightCoral · Rose Pink

HEX
#FC527E
RGB
rgb(252, 82, 126)
HSL
hsl(344, 97%, 65%)
HSB
hsb(344, 67%, 99%)
CMYK
cmyk(0%, 67%, 50%, 1%)
Oklch
oklch(68.3% 0.207 9.0)

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

#A91BEE

Royal Purple · DarkViolet · Violet

HEX
#A91BEE
RGB
rgb(169, 27, 238)
HSL
hsl(280, 86%, 52%)
HSB
hsb(280, 89%, 93%)
CMYK
cmyk(29%, 89%, 0%, 7%)
Oklch
oklch(57.3% 0.277 309.8)

Traditional「Royal Purple」· Paint「Violet」· Creative Blush Sunrise

#DE6075

Peach Pink · LightCoral · Coral Red

HEX
#DE6075
RGB
rgb(222, 96, 117)
HSL
hsl(350, 66%, 62%)
HSB
hsb(350, 57%, 87%)
CMYK
cmyk(0%, 57%, 47%, 13%)
Oklch
oklch(65.1% 0.158 12.3)

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

#B69189

Peach Pink · DarkGray · Coral Red

HEX
#B69189
RGB
rgb(182, 145, 137)
HSL
hsl(11, 24%, 63%)
HSB
hsb(11, 25%, 71%)
CMYK
cmyk(0%, 20%, 25%, 29%)
Oklch
oklch(68.9% 0.047 32.3)

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

#B6B5A7

Fresh Green · DarkGray · Silver Sand

HEX
#B6B5A7
RGB
rgb(182, 181, 167)
HSL
hsl(56, 9%, 68%)
HSB
hsb(56, 8%, 71%)
CMYK
cmyk(0%, 1%, 8%, 29%)
Oklch
oklch(77.0% 0.020 103.5)

Traditional「Fresh Green」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC527E
4FFCCE

Analogous

FC4FD4
FC527E
FC784F

Triadic

FC527E
7DFC4F
4F7DFC

Split-Comp.

FC527E
4FFC78
4FD4FC

Tetradic

FC527E
D4FC4F
4FFCCE
784FFC

Contrast Matrix WCAG 2.1 Contrast

FC527E
A91BEE
DE6075
B69189
B6B5A7
—
1.6
Fail
1.1
Fail
1.1
Fail
1.5
Fail
1.6
Fail
—
1.5
Fail
1.8
Fail
2.5
Fail
1.1
Fail
1.5
Fail
—
1.2
Fail
1.7
Fail
1.1
Fail
1.8
Fail
1.2
Fail
—
1.4
Fail
1.5
Fail
2.5
Fail
1.7
Fail
1.4
Fail
—
White BG
3.2AA Large
5.1AA
3.5AA Large
2.8Fail
2.1Fail
Black BG
6.6AA
4.1AA Large
6.0AA
7.4AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B173
6C6ABB
A7A670
A6A68B
B6B6AA

Deuteranopia

BCC971
747EAF
AFB86F
A8AB8B
B6B6AB

Tritanopia

F36B69
A2938A
D86C6B
B48C8D
B6ADAE

Achromatopsia

8A8A8A
5E5E5E
888888
9B9B9B
B4B4B4

Shades & Tints Shades & Tints

#FC527E

Dark
Light

#A91BEE

Dark
Light

#DE6075

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc527e;
  --color-2: #a91bee;
  --color-3: #de6075;
  --color-4: #b69189;
  --color-5: #b6b5a7;
}

SCSS

$color-1: #fc527e;
$color-2: #a91bee;
$color-3: #de6075;
$color-4: #b69189;
$color-5: #b6b5a7;

TAILWIND

colors: {
  'brand-1': '#fc527e',
  'brand-2': '#a91bee',
  'brand-3': '#de6075',
  'brand-4': '#b69189',
  'brand-5': '#b6b5a7',
}

RGB Array

[252, 82, 126], [169, 27, 238], [222, 96, 117], [182, 145, 137], [182, 181, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC527E, #A91BEE, #DE6075, #B69189, #B6B5A7 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: #fc527e; --color-2: #a91bee; --color-3: #de6075; --color-4: #b69189; --color-5: #b6b5a7. 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