#FF0051 + #FC3574 + #C96786 + #B38190 + #A69499 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF0051

Dark Violet · Crimson · Camellia

HEX

#FF0051

RGB

rgb(255, 0, 81)

HSL

hsl(341, 100%, 50%)

HSB

hsb(341, 100%, 100%)

CMYK

cmyk(0%, 100%, 68%, 0%)

Oklch

oklch(63.5% 0.254 16.6)

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

#FC3574

Dark Violet · DeepPink · Rose Pink

HEX

#FC3574

RGB

rgb(252, 53, 116)

HSL

hsl(341, 97%, 60%)

HSB

hsb(341, 79%, 99%)

CMYK

cmyk(0%, 79%, 54%, 1%)

Oklch

oklch(65.6% 0.233 8.6)

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

#C96786

Dark Violet · LightCoral · Rose Pink

HEX

#C96786

RGB

rgb(201, 103, 134)

HSL

hsl(341, 48%, 60%)

HSB

hsb(341, 49%, 79%)

CMYK

cmyk(0%, 49%, 33%, 21%)

Oklch

oklch(63.7% 0.128 1.3)

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

#B38190

Dark Violet · DarkGray · Rose Pink

HEX

#B38190

RGB

rgb(179, 129, 144)

HSL

hsl(342, 25%, 60%)

HSB

hsb(342, 28%, 70%)

CMYK

cmyk(0%, 28%, 20%, 30%)

Oklch

oklch(65.7% 0.065 359.4)

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

#A69499

Rouge · DarkGray · Silver Sand

HEX

#A69499

RGB

rgb(166, 148, 153)

HSL

hsl(343, 9%, 62%)

HSB

hsb(343, 11%, 65%)

CMYK

cmyk(0%, 11%, 8%, 35%)

Oklch

oklch(68.4% 0.022 359.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF0051

00FFAE

Analogous

FF00D0

FF0051

FF2F00

Triadic

FF0051

51FF00

0051FF

Split-Comp.

FF0051

00FF2F

00D0FF

Tetradic

FF0051

D0FF00

00FFAE

2F00FF

Contrast Matrix WCAG 2.1 Contrast

FF0051	FC3574	C96786	B38190	A69499
—	1.1 Fail	1.1 Fail	1.2 Fail	1.4 Fail
1.1 Fail	—	1.0 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.3 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.2 Fail	1.3 Fail	1.1 Fail	—

White BG

3.9AA Large

3.6AA Large

3.3AA Large

2.9Fail

Black BG

5.4AA

5.9AA

5.8AA

6.5AA

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

918E3D

A6A465

9F9E7E

9D9D8C

9E9E98

Deuteranopia

9FB339

B1C061

A4AC7D

A0A48C

9FA198

Tritanopia

F22E2B

F25956

C47977

B08A89

A59797

Achromatopsia

555555

787878

888888

929292

9A9A9A

Shades & Tints Shades & Tints

#FF0051

Dark

Light

#FC3574

Dark

Light

#C96786

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff0051;
  --color-2: #fc3574;
  --color-3: #c96786;
  --color-4: #b38190;
  --color-5: #a69499;
}

SCSS

$color-1: #ff0051;
$color-2: #fc3574;
$color-3: #c96786;
$color-4: #b38190;
$color-5: #a69499;

TAILWIND

colors: {
  'brand-1': '#ff0051',
  'brand-2': '#fc3574',
  'brand-3': '#c96786',
  'brand-4': '#b38190',
  'brand-5': '#a69499',
}

RGB Array

[255, 0, 81], [252, 53, 116], [201, 103, 134], [179, 129, 144], [166, 148, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FF0051, #FC3574, #C96786, #B38190, #A69499 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: #ff0051; --color-2: #fc3574; --color-3: #c96786; --color-4: #b38190; --color-5: #a69499. 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 cool-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