← Back to Editor

#19131C · #321C3B · #483154 · #877191 · #B5F5EC

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#19131C

Dark Plum · Black · Dark Purple

HEX
#19131C
RGB
rgb(25, 19, 28)
HSL
hsl(280, 19%, 9%)
HSB
hsb(280, 32%, 11%)
CMYK
cmyk(11%, 32%, 0%, 89%)
Oklch
oklch(19.8% 0.020 314.3)

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

#321C3B

Dark Plum · DarkSlateGray · Dark Purple

HEX
#321C3B
RGB
rgb(50, 28, 59)
HSL
hsl(283, 36%, 17%)
HSB
hsb(283, 53%, 23%)
CMYK
cmyk(15%, 53%, 0%, 77%)
Oklch
oklch(27.0% 0.062 315.5)

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

#483154

Dark Plum · DarkSlateGray · Eggplant

HEX
#483154
RGB
rgb(72, 49, 84)
HSL
hsl(279, 26%, 26%)
HSB
hsb(279, 42%, 33%)
CMYK
cmyk(14%, 42%, 0%, 67%)
Oklch
oklch(35.5% 0.066 313.5)

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

#877191

Dark Plum · Gray · Violet

HEX
#877191
RGB
rgb(135, 113, 145)
HSL
hsl(281, 13%, 51%)
HSB
hsb(281, 22%, 57%)
CMYK
cmyk(7%, 22%, 0%, 43%)
Oklch
oklch(58.1% 0.055 315.2)

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

#B5F5EC

Jade · LightBlue · Glacier Blue

HEX
#B5F5EC
RGB
rgb(181, 245, 236)
HSL
hsl(172, 76%, 84%)
HSB
hsb(172, 26%, 96%)
CMYK
cmyk(26%, 0%, 4%, 4%)
Oklch
oklch(92.5% 0.065 185.4)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

19131C
151B13

Analogous

14131B
19131C
1B131A

Triadic

19131C
1B1813
131B18

Split-Comp.

19131C
1A1B13
131B14

Tetradic

19131C
1B1413
151B13
131A1B

Contrast Matrix WCAG 2.1 Contrast

19131C
321C3B
483154
877191
B5F5EC
—
1.2
Fail
1.6
Fail
4.2
AA Large
15.0
AAA
1.2
Fail
—
1.4
Fail
3.5
AA Large
12.6
AAA
1.6
Fail
1.4
Fail
—
2.6
Fail
9.4
AAA
4.2
AA Large
3.5
AA Large
2.6
Fail
—
3.6
AA Large
15.0
AAA
12.6
AAA
9.4
AAA
3.6
AA Large
—
White BG
18.2AAA
15.4AAA
11.4AAA
4.4AA Large
1.2Fail
Black BG
1.2Fail
1.4Fail
1.8Fail
4.8AA
17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

16161A
282833
3E3E4C
7D7D89
D1D1EE

Deuteranopia

171719
2A2B32
3F414A
7F8087
CDC8EF

Tritanopia

191818
312E2C
474543
868382
B8F0F0

Achromatopsia

161616
262626
3C3C3C
7B7B7B
E1E1E1

Shades & Tints Shades & Tints

#19131C

Dark
Light

#321C3B

Dark
Light

#483154

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #19131c;
  --color-2: #321c3b;
  --color-3: #483154;
  --color-4: #877191;
  --color-5: #b5f5ec;
}

SCSS

$color-1: #19131c;
$color-2: #321c3b;
$color-3: #483154;
$color-4: #877191;
$color-5: #b5f5ec;

TAILWIND

colors: {
  'brand-1': '#19131c',
  'brand-2': '#321c3b',
  'brand-3': '#483154',
  'brand-4': '#877191',
  'brand-5': '#b5f5ec',
}

RGB Array

[25, 19, 28], [50, 28, 59], [72, 49, 84], [135, 113, 145], [181, 245, 236]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #19131C, #321C3B, #483154, #877191, #B5F5EC 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: #19131c; --color-2: #321c3b; --color-3: #483154; --color-4: #877191; --color-5: #b5f5ec. 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