#3D2957 + #86B30B + #560BB3 + #493F54 + #302F30 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3D2957

Deep Indigo · DarkSlateGray · Eggplant

HEX

#3D2957

RGB

rgb(61, 41, 87)

HSL

hsl(266, 36%, 25%)

HSB

hsb(266, 53%, 34%)

CMYK

cmyk(30%, 53%, 0%, 66%)

Oklch

oklch(32.8% 0.081 302.2)

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

#86B30B

Grass Green · Olive · Forest Green

HEX

#86B30B

RGB

rgb(134, 179, 11)

HSL

hsl(76, 88%, 37%)

HSB

hsb(76, 94%, 70%)

CMYK

cmyk(25%, 0%, 94%, 30%)

Oklch

oklch(70.8% 0.177 125.8)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#560BB3

Deep Indigo · DarkSlateBlue · Eggplant

HEX

#560BB3

RGB

rgb(86, 11, 179)

HSL

hsl(267, 88%, 37%)

HSB

hsb(267, 94%, 70%)

CMYK

cmyk(52%, 94%, 0%, 30%)

Oklch

oklch(40.9% 0.221 292.7)

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

#493F54

Deep Indigo · DarkSlateGray · Eggplant

HEX

#493F54

RGB

rgb(73, 63, 84)

HSL

hsl(269, 14%, 29%)

HSB

hsb(269, 25%, 33%)

CMYK

cmyk(13%, 25%, 0%, 67%)

Oklch

oklch(38.6% 0.037 306.3)

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

#302F30

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#302F30

RGB

rgb(48, 47, 48)

HSL

hsl(300, 1%, 19%)

HSB

hsb(300, 2%, 19%)

CMYK

cmyk(0%, 2%, 0%, 81%)

Oklch

oklch(30.7% 0.002 325.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D2957

435729

Analogous

292C57

3D2957

542957

Triadic

3D2957

573D29

29573D

Split-Comp.

3D2957

575429

2C5729

Tetradic

3D2957

57292C

435729

295754

Contrast Matrix WCAG 2.1 Contrast

3D2957	86B30B	560BB3	493F54	302F30
—	5.1 AA	1.3 Fail	1.3 Fail	1.0 Fail
5.1 AA	—	4.0 AA Large	4.0 AA Large	5.4 AA
1.3 Fail	4.0 AA Large	—	1.0 Fail	1.3 Fail
1.3 Fail	4.0 AA Large	1.0 Fail	—	1.3 Fail
1.0 Fail	5.4 AA	1.3 Fail	1.3 Fail	—

White BG

12.7AAA

2.5Fail

10.0AAA

9.9AAA

13.3AAA

Black BG

1.7Fail

8.5AAA

2.1Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

34344C

999A34

36358A

45454F

303030

Deuteranopia

363749

97943D

3A3F81

45464E

303030

Tritanopia

3C4341

88545B

526A63

494B4A

303030

Achromatopsia

343434

929292

353535

444444

2F2F2F

Shades & Tints Shades & Tints

#3D2957

Dark

Light

#86B30B

Dark

Light

#560BB3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d2957;
  --color-2: #86b30b;
  --color-3: #560bb3;
  --color-4: #493f54;
  --color-5: #302f30;
}

SCSS

$color-1: #3d2957;
$color-2: #86b30b;
$color-3: #560bb3;
$color-4: #493f54;
$color-5: #302f30;

TAILWIND

colors: {
  'brand-1': '#3d2957',
  'brand-2': '#86b30b',
  'brand-3': '#560bb3',
  'brand-4': '#493f54',
  'brand-5': '#302f30',
}

RGB Array

[61, 41, 87], [134, 179, 11], [86, 11, 179], [73, 63, 84], [48, 47, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D2957, #86B30B, #560BB3, #493F54, #302F30 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: #3d2957; --color-2: #86b30b; --color-3: #560bb3; --color-4: #493f54; --color-5: #302f30. 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