#323C46 + #45595C + #E03C1F + #456D7B + #327F6B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#323C46

Indigo · DarkSlateGray · Prussian Blue

HEX

#323C46

RGB

rgb(50, 60, 70)

HSL

hsl(210, 17%, 24%)

HSB

hsb(210, 29%, 27%)

CMYK

cmyk(29%, 14%, 0%, 73%)

Oklch

oklch(35.1% 0.022 248.5)

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

#45595C

Slate Blue · DarkSlateGray · Mint Ice

HEX

#45595C

RGB

rgb(69, 89, 92)

HSL

hsl(188, 14%, 32%)

HSB

hsb(188, 25%, 36%)

CMYK

cmyk(25%, 3%, 0%, 64%)

Oklch

oklch(44.9% 0.025 207.6)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#E03C1F

Vermilion · OrangeRed · Passion Red

HEX

#E03C1F

RGB

rgb(224, 60, 31)

HSL

hsl(9, 76%, 50%)

HSB

hsb(9, 86%, 88%)

CMYK

cmyk(0%, 73%, 86%, 12%)

Oklch

oklch(60.0% 0.205 32.3)

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

#456D7B

Slate Blue · DimGray · Mint Ice

HEX

#456D7B

RGB

rgb(69, 109, 123)

HSL

hsl(196, 28%, 38%)

HSB

hsb(196, 44%, 48%)

CMYK

cmyk(44%, 11%, 0%, 52%)

Oklch

oklch(51.1% 0.050 222.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#327F6B

Mineral Blue · SeaGreen · Mint Ice

HEX

#327F6B

RGB

rgb(50, 127, 107)

HSL

hsl(164, 44%, 35%)

HSB

hsb(164, 61%, 50%)

CMYK

cmyk(61%, 0%, 16%, 50%)

Oklch

oklch(54.3% 0.082 173.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

323C46

483D33

Analogous

334848

323C46

333348

Triadic

323C46

48333D

3D4833

Split-Comp.

323C46

483333

484833

Tetradic

323C46

483348

483D33

334833

Contrast Matrix WCAG 2.1 Contrast

323C46	45595C	E03C1F	456D7B	327F6B
—	1.5 Fail	2.6 Fail	2.0 Fail	2.3 Fail
1.5 Fail	—	1.7 Fail	1.3 Fail	1.5 Fail
2.6 Fail	1.7 Fail	—	1.3 Fail	1.1 Fail
2.0 Fail	1.3 Fail	1.3 Fail	—	1.2 Fail
2.3 Fail	1.5 Fail	1.1 Fail	1.2 Fail	—

White BG

11.2AAA

7.4AAA

4.3AA Large

5.6AA

4.8AA

Black BG

1.9Fail

2.8Fail

4.8AA

3.7AA Large

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

363644

4E4E5B

999826

565778

535470

Deuteranopia

363543

4D4B5B

A3AF28

545177

4F4971

Tritanopia

334241

465B5B

D82C2D

477574

367475

Achromatopsia

3A3A3A

535353

6A6A6A

636363

666666

Shades & Tints Shades & Tints

#323C46

Dark

Light

#45595C

Dark

Light

#E03C1F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #323c46;
  --color-2: #45595c;
  --color-3: #e03c1f;
  --color-4: #456d7b;
  --color-5: #327f6b;
}

SCSS

$color-1: #323c46;
$color-2: #45595c;
$color-3: #e03c1f;
$color-4: #456d7b;
$color-5: #327f6b;

TAILWIND

colors: {
  'brand-1': '#323c46',
  'brand-2': '#45595c',
  'brand-3': '#e03c1f',
  'brand-4': '#456d7b',
  'brand-5': '#327f6b',
}

RGB Array

[50, 60, 70], [69, 89, 92], [224, 60, 31], [69, 109, 123], [50, 127, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #323C46, #45595C, #E03C1F, #456D7B, #327F6B 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: #323c46; --color-2: #45595c; --color-3: #e03c1f; --color-4: #456d7b; --color-5: #327f6b. 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