← Back to Editor

#331934 · #482744 · #642949 · #802A57 · #A83D67

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 Library

Color Details Color Details

#331934

Dark Plum · DarkSlateGray · Dark Purple

HEX
#331934
RGB
rgb(51, 25, 52)
HSL
hsl(298, 35%, 15%)
HSB
hsb(298, 52%, 20%)
CMYK
cmyk(2%, 52%, 0%, 80%)
Oklch
oklch(26.2% 0.060 325.8)

TraditionalDark Plum」· PaintDark Purple」· Creative Blush Sunrise

#482744

Rose Purple · DarkSlateGray · Eggplant

HEX
#482744
RGB
rgb(72, 39, 68)
HSL
hsl(307, 30%, 22%)
HSB
hsb(307, 46%, 28%)
CMYK
cmyk(0%, 46%, 6%, 72%)
Oklch
oklch(32.7% 0.066 331.5)

TraditionalRose Purple」· PaintEggplant」· Creative Blush Sunrise

#642949

Rose Purple · DarkSlateGray · Camellia

HEX
#642949
RGB
rgb(100, 41, 73)
HSL
hsl(327, 42%, 28%)
HSB
hsb(327, 59%, 39%)
CMYK
cmyk(0%, 59%, 27%, 61%)
Oklch
oklch(37.5% 0.094 348.9)

TraditionalRose Purple」· PaintCamellia」· Creative Blush Sunrise

#802A57

Rose Purple · Brown · Camellia

HEX
#802A57
RGB
rgb(128, 42, 87)
HSL
hsl(329, 51%, 33%)
HSB
hsb(329, 67%, 50%)
CMYK
cmyk(0%, 67%, 32%, 50%)
Oklch
oklch(42.8% 0.128 351.5)

TraditionalRose Purple」· PaintCamellia」· Creative Blush Sunrise

#A83D67

Dark Violet · MediumVioletRed · Camellia

HEX
#A83D67
RGB
rgb(168, 61, 103)
HSL
hsl(336, 47%, 45%)
HSB
hsb(336, 64%, 66%)
CMYK
cmyk(0%, 64%, 39%, 34%)
Oklch
oklch(52.1% 0.146 359.2)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

331934
1A3419

Analogous

251934
331934
341927

Triadic

331934
343319
193433

Split-Comp.

331934
273419
193425

Tetradic

331934
342519
1A3419
192734

Contrast Matrix WCAG 2.1 Contrast

331934
482744
642949
802A57
A83D67
1.2
Fail
1.5
Fail
1.8
Fail
2.7
Fail
1.2
Fail
1.2
Fail
1.4
Fail
2.1
Fail
1.5
Fail
1.2
Fail
1.2
Fail
1.8
Fail
1.8
Fail
1.4
Fail
1.2
Fail
1.5
Fail
2.7
Fail
2.1
Fail
1.8
Fail
1.5
Fail
White BG
15.8AAA
12.7AAA
10.7AAA
8.8AAA
6.0AA
Black BG
1.3Fail
1.6Fail
2.0Fail
2.4Fail
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

28282D
3A393D
4A4A41
5B5A4C
7A795D

Deuteranopia

292B2C
3C3E3B
4E523F
60664A
80885A

Tritanopia

322827
463736
613B3A
7C4442
A35553

Achromatopsia

242424
343434
3E3E3E
494949
626262

Shades & Tints Shades & Tints

#331934

Dark
Light

#482744

Dark
Light

#642949

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #331934;
  --color-2: #482744;
  --color-3: #642949;
  --color-4: #802a57;
  --color-5: #a83d67;
}

SCSS

$color-1: #331934;
$color-2: #482744;
$color-3: #642949;
$color-4: #802a57;
$color-5: #a83d67;

TAILWIND

colors: {
  'brand-1': '#331934',
  'brand-2': '#482744',
  'brand-3': '#642949',
  'brand-4': '#802a57',
  'brand-5': '#a83d67',
}

RGB Array

[51, 25, 52], [72, 39, 68], [100, 41, 73], [128, 42, 87], [168, 61, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #331934, #482744, #642949, #802A57, #A83D67 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: #331934; --color-2: #482744; --color-3: #642949; --color-4: #802a57; --color-5: #a83d67. 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