← Back to Editor

#FF527F · #CA2269 · #632248 · #201220 · #0D0A0D

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 LibraryData Visualization

Color Details Color Details

#FF527F

Rouge · Salmon · Rose Pink

HEX
#FF527F
RGB
rgb(255, 82, 127)
HSL
hsl(344, 100%, 66%)
HSB
hsb(344, 68%, 100%)
CMYK
cmyk(0%, 68%, 50%, 0%)
Oklch
oklch(68.7% 0.210 9.0)

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

#CA2269

Dark Violet · MediumVioletRed · Camellia

HEX
#CA2269
RGB
rgb(202, 34, 105)
HSL
hsl(335, 71%, 46%)
HSB
hsb(335, 83%, 79%)
CMYK
cmyk(0%, 83%, 48%, 21%)
Oklch
oklch(55.5% 0.205 2.3)

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

#632248

Rose Purple · DarkSlateGray · Camellia

HEX
#632248
RGB
rgb(99, 34, 72)
HSL
hsl(325, 49%, 26%)
HSB
hsb(325, 66%, 39%)
CMYK
cmyk(0%, 66%, 27%, 61%)
Oklch
oklch(36.3% 0.105 347.4)

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

#201220

Rose Purple · Black · Dark Purple

HEX
#201220
RGB
rgb(32, 18, 32)
HSL
hsl(300, 28%, 10%)
HSB
hsb(300, 44%, 13%)
CMYK
cmyk(0%, 44%, 0%, 87%)
Oklch
oklch(20.8% 0.034 326.7)

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

#0D0A0D

Rose Purple · Black · Dark Purple

HEX
#0D0A0D
RGB
rgb(13, 10, 13)
HSL
hsl(300, 13%, 5%)
HSB
hsb(300, 23%, 5%)
CMYK
cmyk(0%, 23%, 0%, 95%)
Oklch
oklch(15.0% 0.008 326.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF527F
52FFD1

Analogous

FF52D7
FF527F
FF7A52

Triadic

FF527F
80FF52
5280FF

Split-Comp.

FF527F
52FF7A
52D7FF

Tetradic

FF527F
D7FF52
52FFD1
7A52FF

Contrast Matrix WCAG 2.1 Contrast

FF527F
CA2269
632248
201220
0D0A0D
—
1.7
Fail
3.7
AA Large
5.8
AA
6.3
AA
1.7
Fail
—
2.1
Fail
3.4
AA Large
3.7
AA Large
3.7
AA Large
2.1
Fail
—
1.6
Fail
1.7
Fail
5.8
AA
3.4
AA Large
1.6
Fail
—
1.1
Fail
6.3
AA
3.7
AA Large
1.7
Fail
1.1
Fail
—
White BG
3.1AA Large
5.3AA
11.3AAA
18.0AAA
19.7AAA
Black BG
6.8AA
3.9AA Large
1.9Fail
1.2Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B374
818058
47463F
1A1A1D
0C0C0C

Deuteranopia

BECB71
8B9854
4B503D
1B1C1C
0C0C0C

Tritanopia

F66C6A
C24A47
603836
1F1A19
0D0C0C

Achromatopsia

8B8B8B
5C5C5C
3A3A3A
181818
0B0B0B

Shades & Tints Shades & Tints

#FF527F

Dark
Light

#CA2269

Dark
Light

#632248

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff527f;
  --color-2: #ca2269;
  --color-3: #632248;
  --color-4: #201220;
  --color-5: #0d0a0d;
}

SCSS

$color-1: #ff527f;
$color-2: #ca2269;
$color-3: #632248;
$color-4: #201220;
$color-5: #0d0a0d;

TAILWIND

colors: {
  'brand-1': '#ff527f',
  'brand-2': '#ca2269',
  'brand-3': '#632248',
  'brand-4': '#201220',
  'brand-5': '#0d0a0d',
}

RGB Array

[255, 82, 127], [202, 34, 105], [99, 34, 72], [32, 18, 32], [13, 10, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF527F, #CA2269, #632248, #201220, #0D0A0D is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ff527f; --color-2: #ca2269; --color-3: #632248; --color-4: #201220; --color-5: #0d0a0d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. High-contrast palettes naturally meet WCAG accessibility standards. 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