#1E434A + #1D2C33 + #181818 + #630909 + #98141B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1E434A

Slate Blue · DarkSlateGray · Peacock Green

HEX

#1E434A

RGB

rgb(30, 67, 74)

HSL

hsl(190, 42%, 20%)

HSB

hsb(190, 59%, 29%)

CMYK

cmyk(59%, 9%, 0%, 71%)

Oklch

oklch(35.9% 0.044 211.5)

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

#1D2C33

Slate Blue · DarkSlateGray · Peacock Green

HEX

#1D2C33

RGB

rgb(29, 44, 51)

HSL

hsl(199, 28%, 16%)

HSB

hsb(199, 43%, 20%)

CMYK

cmyk(43%, 14%, 0%, 80%)

Oklch

oklch(28.3% 0.024 228.5)

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

#181818

Ink Black · Black · Jet Black

HEX

#181818

RGB

rgb(24, 24, 24)

HSL

hsl(0, 0%, 9%)

HSB

hsb(0, 0%, 9%)

CMYK

cmyk(0%, 0%, 0%, 91%)

Oklch

oklch(20.9% 0.000 89.9)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#630909

Vermilion · Maroon · Wine Red

HEX

#630909

RGB

rgb(99, 9, 9)

HSL

hsl(0, 83%, 21%)

HSB

hsb(0, 91%, 39%)

CMYK

cmyk(0%, 91%, 91%, 61%)

Oklch

oklch(32.1% 0.122 27.6)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#98141B

Vermilion · Brown · Wine Red

HEX

#98141B

RGB

rgb(152, 20, 27)

HSL

hsl(357, 77%, 34%)

HSB

hsb(357, 87%, 60%)

CMYK

cmyk(0%, 87%, 82%, 40%)

Oklch

oklch(43.7% 0.165 25.6)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1E434A

48251E

Analogous

1E483A

1E434A

1E2C48

Triadic

1E434A

481E41

41481E

Split-Comp.

1E434A

481E2C

483A1E

Tetradic

1E434A

3A1E48

48251E

2C481E

Contrast Matrix WCAG 2.1 Contrast

1E434A	1D2C33	181818	630909	98141B
—	1.3 Fail	1.7 Fail	1.2 Fail	1.3 Fail
1.3 Fail	—	1.2 Fail	1.1 Fail	1.7 Fail
1.7 Fail	1.2 Fail	—	1.3 Fail	2.1 Fail
1.2 Fail	1.1 Fail	1.3 Fail	—	1.6 Fail
1.3 Fail	1.7 Fail	2.1 Fail	1.6 Fail	—

White BG

10.7AAA

14.4AAA

17.8AAA

13.3AAA

8.6AAA

Black BG

2.0Fail

1.5Fail

1.2Fail

1.6Fail

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E48

232431

181818

3C3B09

5F5E19

Deuteranopia

2C2948

232231

181818

414809

677019

Tritanopia

204747

1E3030

181818

5F0909

911818

Achromatopsia

393939

282828

181818

242424

3C3C3C

Shades & Tints Shades & Tints

#1E434A

Dark

Light

#1D2C33

Dark

Light

#181818

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1e434a;
  --color-2: #1d2c33;
  --color-3: #181818;
  --color-4: #630909;
  --color-5: #98141b;
}

SCSS

$color-1: #1e434a;
$color-2: #1d2c33;
$color-3: #181818;
$color-4: #630909;
$color-5: #98141b;

TAILWIND

colors: {
  'brand-1': '#1e434a',
  'brand-2': '#1d2c33',
  'brand-3': '#181818',
  'brand-4': '#630909',
  'brand-5': '#98141b',
}

RGB Array

[30, 67, 74], [29, 44, 51], [24, 24, 24], [99, 9, 9], [152, 20, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1E434A, #1D2C33, #181818, #630909, #98141B 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: #1e434a; --color-2: #1d2c33; --color-3: #181818; --color-4: #630909; --color-5: #98141b. 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