#1E0026 + #302B36 + #3C374A + #374259 + #0C5263 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1E0026

Royal Purple · Black · Dark Purple

HEX

#1E0026

RGB

rgb(30, 0, 38)

HSL

hsl(287, 100%, 7%)

HSB

hsb(287, 100%, 15%)

CMYK

cmyk(21%, 100%, 0%, 85%)

Oklch

oklch(17.2% 0.083 318.8)

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

#302B36

Deep Indigo · DarkSlateGray · Dark Purple

HEX

#302B36

RGB

rgb(48, 43, 54)

HSL

hsl(267, 11%, 19%)

HSB

hsb(267, 20%, 21%)

CMYK

cmyk(11%, 20%, 0%, 79%)

Oklch

oklch(29.9% 0.021 305.7)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#3C374A

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#3C374A

RGB

rgb(60, 55, 74)

HSL

hsl(256, 15%, 25%)

HSB

hsb(256, 26%, 29%)

CMYK

cmyk(19%, 26%, 0%, 71%)

Oklch

oklch(35.0% 0.033 296.7)

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

#374259

Indigo · DarkSlateGray · Prussian Blue

HEX

#374259

RGB

rgb(55, 66, 89)

HSL

hsl(221, 24%, 28%)

HSB

hsb(221, 38%, 35%)

CMYK

cmyk(38%, 26%, 0%, 65%)

Oklch

oklch(37.9% 0.042 264.6)

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

#0C5263

Lake Blue · DarkSlateGray · Peacock Green

HEX

#0C5263

RGB

rgb(12, 82, 99)

HSL

hsl(192, 78%, 22%)

HSB

hsb(192, 88%, 39%)

CMYK

cmyk(88%, 17%, 0%, 61%)

Oklch

oklch(40.7% 0.069 219.3)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1E0026

082400

Analogous

0A0024

1E0026

24001A

Triadic

1E0026

241C00

00241C

Split-Comp.

1E0026

1A2400

00240A

Tetradic

1E0026

240A00

082400

001A24

Contrast Matrix WCAG 2.1 Contrast

1E0026	302B36	3C374A	374259	0C5263
—	1.4 Fail	1.7 Fail	1.9 Fail	2.2 Fail
1.4 Fail	—	1.2 Fail	1.4 Fail	1.6 Fail
1.7 Fail	1.2 Fail	—	1.1 Fail	1.3 Fail
1.9 Fail	1.4 Fail	1.1 Fail	—	1.2 Fail
2.2 Fail	1.6 Fail	1.3 Fail	1.2 Fail	—

White BG

19.4AAA

13.8AAA

11.4AAA

10.1AAA

8.7AAA

Black BG

1.1Fail

1.5Fail

1.8Fail

2.1Fail

2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

11111D

2E2E33

3A3A45

3C3C53

2A2B5F

Deuteranopia

13151B

2E2E33

3A3B44

3B3A52

26215E

Tritanopia

1D1614

303131

3C4241

384F4E

105C5B

Achromatopsia

0D0D0D

2E2E2E

3B3B3B

414141

3F3F3F

Shades & Tints Shades & Tints

#1E0026

Dark

Light

#302B36

Dark

Light

#3C374A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1e0026;
  --color-2: #302b36;
  --color-3: #3c374a;
  --color-4: #374259;
  --color-5: #0c5263;
}

SCSS

$color-1: #1e0026;
$color-2: #302b36;
$color-3: #3c374a;
$color-4: #374259;
$color-5: #0c5263;

TAILWIND

colors: {
  'brand-1': '#1e0026',
  'brand-2': '#302b36',
  'brand-3': '#3c374a',
  'brand-4': '#374259',
  'brand-5': '#0c5263',
}

RGB Array

[30, 0, 38], [48, 43, 54], [60, 55, 74], [55, 66, 89], [12, 82, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1E0026, #302B36, #3C374A, #374259, #0C5263 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: #1e0026; --color-2: #302b36; --color-3: #3c374a; --color-4: #374259; --color-5: #0c5263. 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