#403637 + #631AA7 + #4240AE + #204DE3 + #413C40 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#403637

Crimson · DarkSlateGray · Dark Stone

HEX

#403637

RGB

rgb(64, 54, 55)

HSL

hsl(354, 8%, 23%)

HSB

hsb(354, 16%, 25%)

CMYK

cmyk(0%, 16%, 14%, 75%)

Oklch

oklch(34.4% 0.014 11.0)

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

#631AA7

Royal Purple · DarkSlateBlue · Eggplant

HEX

#631AA7

RGB

rgb(99, 26, 167)

HSL

hsl(271, 73%, 38%)

HSB

hsb(271, 84%, 65%)

CMYK

cmyk(41%, 84%, 0%, 35%)

Oklch

oklch(42.2% 0.202 300.9)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

#4240AE

Deep Indigo · DarkSlateBlue · Navy Blue

HEX

#4240AE

RGB

rgb(66, 64, 174)

HSL

hsl(241, 46%, 47%)

HSB

hsb(241, 63%, 68%)

CMYK

cmyk(62%, 63%, 0%, 32%)

Oklch

oklch(44.3% 0.170 277.7)

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

#204DE3

Azure · DodgerBlue · Navy Blue

HEX

#204DE3

RGB

rgb(32, 77, 227)

HSL

hsl(226, 78%, 51%)

HSB

hsb(226, 86%, 89%)

CMYK

cmyk(86%, 66%, 0%, 11%)

Oklch

oklch(49.8% 0.231 265.2)

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

#413C40

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#413C40

RGB

rgb(65, 60, 64)

HSL

hsl(312, 4%, 25%)

HSB

hsb(312, 8%, 25%)

CMYK

cmyk(0%, 8%, 2%, 75%)

Oklch

oklch(36.3% 0.010 332.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

403637

363F3E

Analogous

3F363C

403637

3F3A36

Triadic

403637

373F36

36373F

Split-Comp.

403637

363F3A

363C3F

Tetradic

403637

3C3F36

363F3E

3A363F

Contrast Matrix WCAG 2.1 Contrast

403637	631AA7	4240AE	204DE3	413C40
—	1.2 Fail	1.4 Fail	1.8 Fail	1.1 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.1 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	1.3 Fail
1.8 Fail	1.4 Fail	1.3 Fail	—	1.7 Fail
1.1 Fail	1.1 Fail	1.3 Fail	1.7 Fail	—

White BG

11.7AAA

9.4AAA

8.2AAA

6.5AA

10.8AAA

Black BG

1.8Fail

2.2Fail

2.6Fail

3.2AA Large

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C37

434385

414193

3334BF

3F3F3F

Deuteranopia

3C3D37

484D7D

41418D

312EB6

3F403F

Tritanopia

403737

5F6A64

427E7A

22A29C

413E3E

Achromatopsia

393939

404040

4D4D4D

515151

3E3E3E

Shades & Tints Shades & Tints

#403637

Dark

Light

#631AA7

Dark

Light

#4240AE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #403637;
  --color-2: #631aa7;
  --color-3: #4240ae;
  --color-4: #204de3;
  --color-5: #413c40;
}

SCSS

$color-1: #403637;
$color-2: #631aa7;
$color-3: #4240ae;
$color-4: #204de3;
$color-5: #413c40;

TAILWIND

colors: {
  'brand-1': '#403637',
  'brand-2': '#631aa7',
  'brand-3': '#4240ae',
  'brand-4': '#204de3',
  'brand-5': '#413c40',
}

RGB Array

[64, 54, 55], [99, 26, 167], [66, 64, 174], [32, 77, 227], [65, 60, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #403637, #631AA7, #4240AE, #204DE3, #413C40 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: #403637; --color-2: #631aa7; --color-3: #4240ae; --color-4: #204de3; --color-5: #413c40. 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