← Back to Editor

#520F42 · #63324A · #8F5977 · #8F7B59 · #B8CC67

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

#520F42

Rose Purple · MidnightBlue · Dark Purple

HEX
#520F42
RGB
rgb(82, 15, 66)
HSL
hsl(314, 69%, 19%)
HSB
hsb(314, 82%, 32%)
CMYK
cmyk(0%, 82%, 20%, 68%)
Oklch
oklch(30.9% 0.114 339.5)

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

#63324A

Dark Violet · DarkSlateGray · Camellia

HEX
#63324A
RGB
rgb(99, 50, 74)
HSL
hsl(331, 33%, 29%)
HSB
hsb(331, 49%, 39%)
CMYK
cmyk(0%, 49%, 25%, 61%)
Oklch
oklch(38.9% 0.077 350.6)

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

#8F5977

Rose Purple · Gray · Camellia

HEX
#8F5977
RGB
rgb(143, 89, 119)
HSL
hsl(327, 23%, 45%)
HSB
hsb(327, 38%, 56%)
CMYK
cmyk(0%, 38%, 17%, 44%)
Oklch
oklch(53.4% 0.082 345.8)

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

#8F7B59

Ochre · Gray · Amber Brown

HEX
#8F7B59
RGB
rgb(143, 123, 89)
HSL
hsl(38, 23%, 45%)
HSB
hsb(38, 38%, 56%)
CMYK
cmyk(0%, 14%, 38%, 44%)
Oklch
oklch(59.3% 0.054 80.6)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#B8CC67

Grass Green · Tan · Olive Green

HEX
#B8CC67
RGB
rgb(184, 204, 103)
HSL
hsl(72, 50%, 60%)
HSB
hsb(72, 50%, 80%)
CMYK
cmyk(10%, 0%, 50%, 20%)
Oklch
oklch(80.9% 0.129 118.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

520F42
0F521F

Analogous

400F52
520F42
520F21

Triadic

520F42
42520F
0F4252

Split-Comp.

520F42
21520F
0F5240

Tetradic

520F42
52400F
0F521F
0F2152

Contrast Matrix WCAG 2.1 Contrast

520F42
63324A
8F5977
8F7B59
B8CC67
—
1.4
Fail
2.6
Fail
3.4
AA Large
7.9
AAA
1.4
Fail
—
1.9
Fail
2.5
Fail
5.7
AA
2.6
Fail
1.9
Fail
—
1.3
Fail
3.1
AA Large
3.4
AA Large
2.5
Fail
1.3
Fail
—
2.3
Fail
7.9
AAA
5.7
AA
3.1
AA Large
2.3
Fail
—
White BG
13.9AAA
10.1AAA
5.4AA
4.1AA Large
1.8Fail
Black BG
1.5Fail
2.1Fail
3.9AA Large
5.1AA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

353436
4E4D44
787770
868661
C1C17F

Deuteranopia

393E33
515443
7B7F6E
888963
C0BE85

Tritanopia

4F2C2A
61403F
8C6A69
8E6869
B99397

Achromatopsia

292929
434343
6D6D6D
7D7D7D
BBBBBB

Shades & Tints Shades & Tints

#520F42

Dark
Light

#63324A

Dark
Light

#8F5977

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #520f42;
  --color-2: #63324a;
  --color-3: #8f5977;
  --color-4: #8f7b59;
  --color-5: #b8cc67;
}

SCSS

$color-1: #520f42;
$color-2: #63324a;
$color-3: #8f5977;
$color-4: #8f7b59;
$color-5: #b8cc67;

TAILWIND

colors: {
  'brand-1': '#520f42',
  'brand-2': '#63324a',
  'brand-3': '#8f5977',
  'brand-4': '#8f7b59',
  'brand-5': '#b8cc67',
}

RGB Array

[82, 15, 66], [99, 50, 74], [143, 89, 119], [143, 123, 89], [184, 204, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #520F42, #63324A, #8F5977, #8F7B59, #B8CC67 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: #520f42; --color-2: #63324a; --color-3: #8f5977; --color-4: #8f7b59; --color-5: #b8cc67. 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