#4E5D03 + #3B4262 + #38498B + #3A54A1 + #3C65B6 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4E5D03

Grass Green · DarkOliveGreen · Dark Green

HEX

#4E5D03

RGB

rgb(78, 93, 3)

HSL

hsl(70, 94%, 19%)

HSB

hsb(70, 97%, 36%)

CMYK

cmyk(16%, 0%, 97%, 64%)

Oklch

oklch(45.0% 0.105 120.1)

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

#3B4262

Indigo · DarkSlateGray · Prussian Blue

HEX

#3B4262

RGB

rgb(59, 66, 98)

HSL

hsl(229, 25%, 31%)

HSB

hsb(229, 40%, 38%)

CMYK

cmyk(40%, 33%, 0%, 62%)

Oklch

oklch(38.7% 0.055 274.1)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#38498B

Indigo · DarkSlateBlue · Prussian Blue

HEX

#38498B

RGB

rgb(56, 73, 139)

HSL

hsl(228, 43%, 38%)

HSB

hsb(228, 60%, 55%)

CMYK

cmyk(60%, 47%, 0%, 45%)

Oklch

oklch(42.6% 0.111 270.3)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#3A54A1

Indigo · DarkSlateBlue · Navy Blue

HEX

#3A54A1

RGB

rgb(58, 84, 161)

HSL

hsl(225, 47%, 43%)

HSB

hsb(225, 64%, 63%)

CMYK

cmyk(64%, 48%, 0%, 37%)

Oklch

oklch(46.7% 0.128 267.3)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#3C65B6

Indigo · SteelBlue · Navy Blue

HEX

#3C65B6

RGB

rgb(60, 101, 182)

HSL

hsl(220, 50%, 47%)

HSB

hsb(220, 67%, 71%)

CMYK

cmyk(67%, 45%, 0%, 29%)

Oklch

oklch(51.9% 0.136 262.4)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4E5D03

12035E

Analogous

5E4003

4E5D03

215E03

Triadic

4E5D03

034F5E

5E034F

Split-Comp.

4E5D03

03215E

40035E

Tetradic

4E5D03

035E40

12035E

5E0321

Contrast Matrix WCAG 2.1 Contrast

4E5D03	3B4262	38498B	3A54A1	3C65B6
—	1.3 Fail	1.2 Fail	1.0 Fail	1.3 Fail
1.3 Fail	—	1.2 Fail	1.4 Fail	1.7 Fail
1.2 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.0 Fail	1.4 Fail	1.2 Fail	—	1.3 Fail
1.3 Fail	1.7 Fail	1.5 Fail	1.3 Fail	—

White BG

7.3AAA

9.8AAA

8.4AAA

7.1AAA

5.6AA

Black BG

2.9Fail

2.1Fail

2.5Fail

3.0Fail

3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

545519

3E3E5A

3F407B

45458E

4E4EA2

Deuteranopia

54531E

3E3D58

3E3D77

44428A

4B489E

Tritanopia

4F2A2E

3B5453

396E6C

3B807C

3E9390

Achromatopsia

4E4E4E

444444

4B4B4B

555555

626262

Shades & Tints Shades & Tints

#4E5D03

Dark

Light

#3B4262

Dark

Light

#38498B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4e5d03;
  --color-2: #3b4262;
  --color-3: #38498b;
  --color-4: #3a54a1;
  --color-5: #3c65b6;
}

SCSS

$color-1: #4e5d03;
$color-2: #3b4262;
$color-3: #38498b;
$color-4: #3a54a1;
$color-5: #3c65b6;

TAILWIND

colors: {
  'brand-1': '#4e5d03',
  'brand-2': '#3b4262',
  'brand-3': '#38498b',
  'brand-4': '#3a54a1',
  'brand-5': '#3c65b6',
}

RGB Array

[78, 93, 3], [59, 66, 98], [56, 73, 139], [58, 84, 161], [60, 101, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #4E5D03, #3B4262, #38498B, #3A54A1, #3C65B6 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: #4e5d03; --color-2: #3b4262; --color-3: #38498b; --color-4: #3a54a1; --color-5: #3c65b6. 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 dark-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