← Back to Editor

#FC024C · #CC617A · #BF8BAB · #A0A5B9 · #ACCACB

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

#FC024C

Dark Violet · Crimson · Camellia

HEX
#FC024C
RGB
rgb(252, 2, 76)
HSL
hsl(342, 98%, 50%)
HSB
hsb(342, 99%, 99%)
CMYK
cmyk(0%, 99%, 70%, 1%)
Oklch
oklch(62.9% 0.251 17.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#CC617A

Crimson · LightCoral · Passion Red

HEX
#CC617A
RGB
rgb(204, 97, 122)
HSL
hsl(346, 51%, 59%)
HSB
hsb(346, 52%, 80%)
CMYK
cmyk(0%, 52%, 40%, 20%)
Oklch
oklch(62.8% 0.137 7.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#BF8BAB

Mauve · DarkGray · Rose Pink

HEX
#BF8BAB
RGB
rgb(191, 139, 171)
HSL
hsl(323, 29%, 65%)
HSB
hsb(323, 27%, 75%)
CMYK
cmyk(0%, 27%, 10%, 25%)
Oklch
oklch(69.7% 0.076 341.8)

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

#A0A5B9

Azure · DarkGray · Cobalt Blue

HEX
#A0A5B9
RGB
rgb(160, 165, 185)
HSL
hsl(228, 15%, 68%)
HSB
hsb(228, 14%, 73%)
CMYK
cmyk(14%, 11%, 0%, 27%)
Oklch
oklch(72.4% 0.029 274.5)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#ACCACB

Sky Blue · LightSteelBlue · Lake Green

HEX
#ACCACB
RGB
rgb(172, 202, 203)
HSL
hsl(182, 23%, 74%)
HSB
hsb(182, 15%, 80%)
CMYK
cmyk(15%, 0%, 0%, 20%)
Oklch
oklch(81.7% 0.032 199.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC024C
03FCB1

Analogous

FC03CA
FC024C
FC3503

Triadic

FC024C
4EFC03
034EFC

Split-Comp.

FC024C
03FC35
03CAFC

Tetradic

FC024C
CAFC03
03FCB1
3503FC

Contrast Matrix WCAG 2.1 Contrast

FC024C
CC617A
BF8BAB
A0A5B9
ACCACB
—
1.1
Fail
1.4
Fail
1.6
Fail
2.3
Fail
1.1
Fail
—
1.3
Fail
1.5
Fail
2.2
Fail
1.4
Fail
1.3
Fail
—
1.1
Fail
1.6
Fail
1.6
Fail
1.5
Fail
1.1
Fail
—
1.4
Fail
2.3
Fail
2.2
Fail
1.6
Fail
1.4
Fail
—
White BG
4.0AA Large
3.8AA Large
2.8Fail
2.4Fail
1.7Fail
Black BG
5.3AA
5.6AA
7.5AAA
8.6AAA
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

908E3A
9E9D74
A8A8A3
A2A2B4
B9B9CB

Deuteranopia

9EB136
A4AC72
ACAFA1
A2A2B3
B7B5CB

Tritanopia

EF2C29
C76F6E
BC9D9C
A0B0B0
AECBCB

Achromatopsia

555555
848484
9E9E9E
A6A6A6
C1C1C1

Shades & Tints Shades & Tints

#FC024C

Dark
Light

#CC617A

Dark
Light

#BF8BAB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc024c;
  --color-2: #cc617a;
  --color-3: #bf8bab;
  --color-4: #a0a5b9;
  --color-5: #accacb;
}

SCSS

$color-1: #fc024c;
$color-2: #cc617a;
$color-3: #bf8bab;
$color-4: #a0a5b9;
$color-5: #accacb;

TAILWIND

colors: {
  'brand-1': '#fc024c',
  'brand-2': '#cc617a',
  'brand-3': '#bf8bab',
  'brand-4': '#a0a5b9',
  'brand-5': '#accacb',
}

RGB Array

[252, 2, 76], [204, 97, 122], [191, 139, 171], [160, 165, 185], [172, 202, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC024C, #CC617A, #BF8BAB, #A0A5B9, #ACCACB 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: #fc024c; --color-2: #cc617a; --color-3: #bf8bab; --color-4: #a0a5b9; --color-5: #accacb. 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