← Back to Editor

#210518 · #3D1C33 · #5E4B55 · #7C917F · #93BD9A

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

#210518

Rose Purple · Black · Dark Purple

HEX
#210518
RGB
rgb(33, 5, 24)
HSL
hsl(319, 74%, 7%)
HSB
hsb(319, 85%, 13%)
CMYK
cmyk(0%, 85%, 27%, 87%)
Oklch
oklch(17.8% 0.057 342.3)

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

#3D1C33

Rose Purple · DarkSlateGray · Dark Purple

HEX
#3D1C33
RGB
rgb(61, 28, 51)
HSL
hsl(318, 37%, 17%)
HSB
hsb(318, 54%, 24%)
CMYK
cmyk(0%, 54%, 16%, 76%)
Oklch
oklch(28.2% 0.062 339.8)

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

#5E4B55

Rose Purple · DimGray · Camellia

HEX
#5E4B55
RGB
rgb(94, 75, 85)
HSL
hsl(328, 11%, 33%)
HSB
hsb(328, 20%, 37%)
CMYK
cmyk(0%, 20%, 10%, 63%)
Oklch
oklch(43.6% 0.030 345.4)

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

#7C917F

Celadon · Gray · Warm Gray

HEX
#7C917F
RGB
rgb(124, 145, 127)
HSL
hsl(129, 9%, 53%)
HSB
hsb(129, 14%, 57%)
CMYK
cmyk(14%, 0%, 12%, 43%)
Oklch
oklch(63.5% 0.036 149.3)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

#93BD9A

Celadon · DarkSeaGreen · Apple Green

HEX
#93BD9A
RGB
rgb(147, 189, 154)
HSL
hsl(130, 24%, 66%)
HSB
hsb(130, 22%, 74%)
CMYK
cmyk(22%, 0%, 19%, 26%)
Oklch
oklch(75.8% 0.067 149.5)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

210518
051F0D

Analogous

1A051F
210518
1F0509

Triadic

210518
171F05
05171F

Split-Comp.

210518
091F05
051F1A

Tetradic

210518
1F1A05
051F0D
05091F

Contrast Matrix WCAG 2.1 Contrast

210518
3D1C33
5E4B55
7C917F
93BD9A
—
1.3
Fail
2.4
Fail
5.7
AA
9.1
AAA
1.3
Fail
—
1.9
Fail
4.4
AA Large
7.1
AAA
2.4
Fail
1.9
Fail
—
2.4
Fail
3.8
AA Large
5.7
AA
4.4
AA Large
2.4
Fail
—
1.6
Fail
9.1
AAA
7.1
AAA
3.8
AA Large
1.6
Fail
—
White BG
19.1AAA
14.9AAA
8.0AAA
3.4AA Large
2.1Fail
Black BG
1.1Fail
1.4Fail
2.6Fail
6.2AA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

151513
2F2E2D
565653
858583
A5A6A2

Deuteranopia

171912
31332C
575852
848284
A3A0A5

Tritanopia

20100F
3B2928
5D5150
7D8788
95A9AB

Achromatopsia

101010
282828
525252
898989
ACACAC

Shades & Tints Shades & Tints

#210518

Dark
Light

#3D1C33

Dark
Light

#5E4B55

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #210518;
  --color-2: #3d1c33;
  --color-3: #5e4b55;
  --color-4: #7c917f;
  --color-5: #93bd9a;
}

SCSS

$color-1: #210518;
$color-2: #3d1c33;
$color-3: #5e4b55;
$color-4: #7c917f;
$color-5: #93bd9a;

TAILWIND

colors: {
  'brand-1': '#210518',
  'brand-2': '#3d1c33',
  'brand-3': '#5e4b55',
  'brand-4': '#7c917f',
  'brand-5': '#93bd9a',
}

RGB Array

[33, 5, 24], [61, 28, 51], [94, 75, 85], [124, 145, 127], [147, 189, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #210518, #3D1C33, #5E4B55, #7C917F, #93BD9A 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: #210518; --color-2: #3d1c33; --color-3: #5e4b55; --color-4: #7c917f; --color-5: #93bd9a. 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