#3B1F3A + #503657 + #673885 + #8E67A6 + #A39834 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B1F3A

Rose Purple · DarkSlateGray · Dark Purple

HEX

#3B1F3A

RGB

rgb(59, 31, 58)

HSL

hsl(302, 31%, 18%)

HSB

hsb(302, 47%, 23%)

CMYK

cmyk(0%, 47%, 2%, 77%)

Oklch

oklch(28.8% 0.061 328.3)

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

#503657

Dark Plum · DarkSlateGray · Eggplant

HEX

#503657

RGB

rgb(80, 54, 87)

HSL

hsl(287, 23%, 28%)

HSB

hsb(287, 38%, 34%)

CMYK

cmyk(8%, 38%, 0%, 66%)

Oklch

oklch(37.6% 0.064 319.0)

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

#673885

Dark Plum · DarkSlateBlue · Eggplant

HEX

#673885

RGB

rgb(103, 56, 133)

HSL

hsl(277, 41%, 37%)

HSB

hsb(277, 58%, 52%)

CMYK

cmyk(23%, 58%, 0%, 48%)

Oklch

oklch(43.5% 0.129 310.3)

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

#8E67A6

Dark Plum · LightSlateGray · Violet

HEX

#8E67A6

RGB

rgb(142, 103, 166)

HSL

hsl(277, 26%, 53%)

HSB

hsb(277, 38%, 65%)

CMYK

cmyk(14%, 38%, 0%, 35%)

Oklch

oklch(57.8% 0.103 311.8)

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

#A39834

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#A39834

RGB

rgb(163, 152, 52)

HSL

hsl(54, 52%, 42%)

HSB

hsb(54, 68%, 64%)

CMYK

cmyk(0%, 7%, 68%, 36%)

Oklch

oklch(67.0% 0.120 103.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B1F3A

203C21

Analogous

2F203C

3B1F3A

3C202D

Triadic

3B1F3A

3B3C20

203B3C

Split-Comp.

3B1F3A

2D3C20

203C2F

Tetradic

3B1F3A

3C2F20

203C21

202D3C

Contrast Matrix WCAG 2.1 Contrast

3B1F3A	503657	673885	8E67A6	A39834
—	1.4 Fail	1.7 Fail	3.2 AA Large	4.9 AA
1.4 Fail	—	1.2 Fail	2.3 Fail	3.5 AA Large
1.7 Fail	1.2 Fail	—	1.9 Fail	2.9 Fail
3.2 AA Large	2.3 Fail	1.9 Fail	—	1.5 Fail
4.9 AA	3.5 AA Large	2.9 Fail	1.5 Fail	—

White BG

14.6AAA

10.5AAA

8.5AAA

4.5AA

3.0Fail

Black BG

1.4Fail

2.0Fail

2.5Fail

4.6AA

7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F33

45454F

535272

7D7D97

9E9E4C

Deuteranopia

313332

46484D

55596E

7F8293

9FA052

Tritanopia

3A2E2D

4F4947

656460

8C8B88

A25F64

Achromatopsia

2A2A2A

424242

4F4F4F

7A7A7A

909090

Shades & Tints Shades & Tints

#3B1F3A

Dark

Light

#503657

Dark

Light

#673885

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b1f3a;
  --color-2: #503657;
  --color-3: #673885;
  --color-4: #8e67a6;
  --color-5: #a39834;
}

SCSS

$color-1: #3b1f3a;
$color-2: #503657;
$color-3: #673885;
$color-4: #8e67a6;
$color-5: #a39834;

TAILWIND

colors: {
  'brand-1': '#3b1f3a',
  'brand-2': '#503657',
  'brand-3': '#673885',
  'brand-4': '#8e67a6',
  'brand-5': '#a39834',
}

RGB Array

[59, 31, 58], [80, 54, 87], [103, 56, 133], [142, 103, 166], [163, 152, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B1F3A, #503657, #673885, #8E67A6, #A39834 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: #3b1f3a; --color-2: #503657; --color-3: #673885; --color-4: #8e67a6; --color-5: #a39834. 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