← Back to Editor

#510F39 · #463A54 · #3B656F · #5C9B7B · #D2E469

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#510F39

Rose Purple · Maroon · Raspberry

HEX
#510F39
RGB
rgb(81, 15, 57)
HSL
hsl(322, 69%, 19%)
HSB
hsb(322, 81%, 32%)
CMYK
cmyk(0%, 81%, 30%, 68%)
Oklch
oklch(30.2% 0.107 346.4)

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

#463A54

Deep Indigo · DarkSlateGray · Eggplant

HEX
#463A54
RGB
rgb(70, 58, 84)
HSL
hsl(268, 18%, 28%)
HSB
hsb(268, 31%, 33%)
CMYK
cmyk(17%, 31%, 0%, 67%)
Oklch
oklch(37.2% 0.046 305.3)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#3B656F

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3B656F
RGB
rgb(59, 101, 111)
HSL
hsl(192, 31%, 33%)
HSB
hsb(192, 47%, 44%)
CMYK
cmyk(47%, 9%, 0%, 56%)
Oklch
oklch(48.0% 0.049 214.7)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#5C9B7B

Mineral Blue · CadetBlue · Olive Green

HEX
#5C9B7B
RGB
rgb(92, 155, 123)
HSL
hsl(150, 26%, 48%)
HSB
hsb(150, 41%, 61%)
CMYK
cmyk(41%, 0%, 21%, 39%)
Oklch
oklch(63.8% 0.082 160.7)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#D2E469

Fresh Green · Khaki · Sunflower

HEX
#D2E469
RGB
rgb(210, 228, 105)
HSL
hsl(69, 69%, 65%)
HSB
hsb(69, 54%, 89%)
CMYK
cmyk(8%, 0%, 54%, 11%)
Oklch
oklch(88.1% 0.149 116.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

510F39
0F5228

Analogous

490F52
510F39
520F18

Triadic

510F39
39520F
0F3952

Split-Comp.

510F39
18520F
0F5249

Tetradic

510F39
52490F
0F5228
0F1852

Contrast Matrix WCAG 2.1 Contrast

510F39
463A54
3B656F
5C9B7B
D2E469
—
1.3
Fail
2.2
Fail
4.4
AA Large
10.2
AAA
1.3
Fail
—
1.6
Fail
3.2
AA Large
7.5
AAA
2.2
Fail
1.6
Fail
—
2.0
Fail
4.6
AA
4.4
AA Large
3.2
AA Large
2.0
Fail
—
2.3
Fail
10.2
AAA
7.5
AAA
4.6
AA
2.3
Fail
—
White BG
14.2AAA
10.5AAA
6.4AA
3.3AA Large
1.4Fail
Black BG
1.5Fail
2.0Fail
3.3AA Large
6.4AA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

34342F
41414E
4D4E6D
777883
DADA87

Deuteranopia

383D2C
42424C
4B486C
746F85
D9D78E

Tritanopia

4E2725
454948
3D6B6A
5F898A
D39EA3

Achromatopsia

282828
414141
5A5A5A
858585
D1D1D1

Shades & Tints Shades & Tints

#510F39

Dark
Light

#463A54

Dark
Light

#3B656F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #510f39;
  --color-2: #463a54;
  --color-3: #3b656f;
  --color-4: #5c9b7b;
  --color-5: #d2e469;
}

SCSS

$color-1: #510f39;
$color-2: #463a54;
$color-3: #3b656f;
$color-4: #5c9b7b;
$color-5: #d2e469;

TAILWIND

colors: {
  'brand-1': '#510f39',
  'brand-2': '#463a54',
  'brand-3': '#3b656f',
  'brand-4': '#5c9b7b',
  'brand-5': '#d2e469',
}

RGB Array

[81, 15, 57], [70, 58, 84], [59, 101, 111], [92, 155, 123], [210, 228, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #510F39, #463A54, #3B656F, #5C9B7B, #D2E469 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: #510f39; --color-2: #463a54; --color-3: #3b656f; --color-4: #5c9b7b; --color-5: #d2e469. 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