#0037FF + #383838 + #503157 + #712682 + #C7009F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#0037FF

Indigo · Blue · Navy Blue

HEX

#0037FF

RGB

rgb(0, 55, 255)

HSL

hsl(227, 100%, 50%)

HSB

hsb(227, 100%, 100%)

CMYK

cmyk(100%, 78%, 0%, 0%)

Oklch

oklch(49.0% 0.288 264.1)

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

#383838

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#383838

RGB

rgb(56, 56, 56)

HSL

hsl(0, 0%, 22%)

HSB

hsb(0, 0%, 22%)

CMYK

cmyk(0%, 0%, 0%, 78%)

Oklch

oklch(34.1% 0.000 89.9)

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

#503157

Dark Plum · DarkSlateGray · Eggplant

HEX

#503157

RGB

rgb(80, 49, 87)

HSL

hsl(289, 28%, 27%)

HSB

hsb(289, 44%, 34%)

CMYK

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

Oklch

oklch(36.7% 0.074 320.1)

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

#712682

Royal Purple · Purple · Eggplant

HEX

#712682

RGB

rgb(113, 38, 130)

HSL

hsl(289, 55%, 33%)

HSB

hsb(289, 71%, 51%)

CMYK

cmyk(13%, 71%, 0%, 49%)

Oklch

oklch(42.2% 0.158 319.6)

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

#C7009F

Rose Purple · MediumVioletRed · Eggplant

HEX

#C7009F

RGB

rgb(199, 0, 159)

HSL

hsl(312, 100%, 39%)

HSB

hsb(312, 100%, 78%)

CMYK

cmyk(0%, 100%, 20%, 22%)

Oklch

oklch(56.0% 0.243 340.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0037FF

FFC800

Analogous

00B7FF

0037FF

4800FF

Triadic

0037FF

FF0037

37FF00

Split-Comp.

0037FF

FF4800

B7FF00

Tetradic

0037FF

FF00B7

FFC800

00FF48

Contrast Matrix WCAG 2.1 Contrast

0037FF	383838	503157	712682	C7009F
—	1.7 Fail	1.6 Fail	1.3 Fail	1.3 Fail
1.7 Fail	—	1.1 Fail	1.3 Fail	2.2 Fail
1.6 Fail	1.1 Fail	—	1.2 Fail	2.0 Fail
1.3 Fail	1.3 Fail	1.2 Fail	—	1.7 Fail
1.3 Fail	2.2 Fail	2.0 Fail	1.7 Fail	—

White BG

7.0AAA

11.7AAA

10.9AAA

9.1AAA

5.3AA

Black BG

3.0Fail

1.8Fail

1.9Fail

2.3Fail

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

1818CF

383838

43424E

51506C

716F79

Deuteranopia

1511C3

383838

44474C

555B66

7C8B6F

Tritanopia

03A8A0

383838

4E4745

6D5A56

BD5A53

Achromatopsia

3D3D3D

383838

3F3F3F

474747

4E4E4E

Shades & Tints Shades & Tints

#0037FF

Dark

Light

#383838

Dark

Light

#503157

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0037ff;
  --color-2: #383838;
  --color-3: #503157;
  --color-4: #712682;
  --color-5: #c7009f;
}

SCSS

$color-1: #0037ff;
$color-2: #383838;
$color-3: #503157;
$color-4: #712682;
$color-5: #c7009f;

TAILWIND

colors: {
  'brand-1': '#0037ff',
  'brand-2': '#383838',
  'brand-3': '#503157',
  'brand-4': '#712682',
  'brand-5': '#c7009f',
}

RGB Array

[0, 55, 255], [56, 56, 56], [80, 49, 87], [113, 38, 130], [199, 0, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0037FF, #383838, #503157, #712682, #C7009F 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: #0037ff; --color-2: #383838; --color-3: #503157; --color-4: #712682; --color-5: #c7009f. 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