#C52551 + #AA275A + #8F2A63 + #742C6C + #592E75 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C52551

Dark Violet · Crimson · Camellia

HEX

#C52551

RGB

rgb(197, 37, 81)

HSL

hsl(344, 68%, 46%)

HSB

hsb(344, 81%, 77%)

CMYK

cmyk(0%, 81%, 59%, 23%)

Oklch

oklch(54.1% 0.194 11.7)

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

#AA275A

Dark Violet · Brown · Camellia

HEX

#AA275A

RGB

rgb(170, 39, 90)

HSL

hsl(337, 63%, 41%)

HSB

hsb(337, 77%, 67%)

CMYK

cmyk(0%, 77%, 47%, 33%)

Oklch

oklch(49.8% 0.170 2.5)

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

#8F2A63

Rose Purple · Purple · Camellia

HEX

#8F2A63

RGB

rgb(143, 42, 99)

HSL

hsl(326, 55%, 36%)

HSB

hsb(326, 71%, 56%)

CMYK

cmyk(0%, 71%, 31%, 44%)

Oklch

oklch(45.7% 0.148 349.8)

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

#742C6C

Rose Purple · Purple · Eggplant

HEX

#742C6C

RGB

rgb(116, 44, 108)

HSL

hsl(307, 45%, 31%)

HSB

hsb(307, 62%, 45%)

CMYK

cmyk(0%, 62%, 7%, 55%)

Oklch

oklch(42.1% 0.130 332.2)

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

#592E75

Dark Plum · DarkSlateBlue · Eggplant

HEX

#592E75

RGB

rgb(89, 46, 117)

HSL

hsl(276, 44%, 32%)

HSB

hsb(276, 61%, 46%)

CMYK

cmyk(24%, 61%, 0%, 54%)

Oklch

oklch(39.1% 0.122 309.9)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C52551

26C59B

Analogous

C526A0

C52551

C54B26

Triadic

C52551

50C526

2650C5

Split-Comp.

C52551

26C54B

26A0C5

Tetradic

C52551

A0C526

26C59B

4B26C5

Contrast Matrix WCAG 2.1 Contrast

C52551	AA275A	8F2A63	742C6C	592E75
—	1.2 Fail	1.4 Fail	1.6 Fail	1.8 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.5 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.3 Fail
1.6 Fail	1.4 Fail	1.2 Fail	—	1.1 Fail
1.8 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

5.6AA

6.7AA

7.8AAA

9.1AAA

10.1AAA

Black BG

3.8AA Large

3.1AA Large

2.7Fail

2.3Fail

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

807E46

71704E

636255

55545D

464664

Deuteranopia

899544

79834B

697152

595E59

494C60

Tritanopia

BD3E3C

A34442

8A4A48

70504E

575653

Achromatopsia

5A5A5A

545454

4F4F4F

494949

434343

Shades & Tints Shades & Tints

#C52551

Dark

Light

#AA275A

Dark

Light

#8F2A63

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c52551;
  --color-2: #aa275a;
  --color-3: #8f2a63;
  --color-4: #742c6c;
  --color-5: #592e75;
}

SCSS

$color-1: #c52551;
$color-2: #aa275a;
$color-3: #8f2a63;
$color-4: #742c6c;
$color-5: #592e75;

TAILWIND

colors: {
  'brand-1': '#c52551',
  'brand-2': '#aa275a',
  'brand-3': '#8f2a63',
  'brand-4': '#742c6c',
  'brand-5': '#592e75',
}

RGB Array

[197, 37, 81], [170, 39, 90], [143, 42, 99], [116, 44, 108], [89, 46, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C52551, #AA275A, #8F2A63, #742C6C, #592E75 is ideal for: tech websites, dark mode UIs, game UIs. 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: #c52551; --color-2: #aa275a; --color-3: #8f2a63; --color-4: #742c6c; --color-5: #592e75. 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. 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