#314F54 + #292538 + #6E375A + #B93655 + #EA274C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#314F54

Slate Blue · DarkSlateGray · Mint Ice

HEX

#314F54

RGB

rgb(49, 79, 84)

HSL

hsl(189, 26%, 26%)

HSB

hsb(189, 42%, 33%)

CMYK

cmyk(42%, 6%, 0%, 67%)

Oklch

oklch(40.6% 0.037 209.1)

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

#292538

Deep Indigo · DarkSlateGray · Deep Sea Blue

HEX

#292538

RGB

rgb(41, 37, 56)

HSL

hsl(253, 20%, 18%)

HSB

hsb(253, 34%, 22%)

CMYK

cmyk(27%, 34%, 0%, 78%)

Oklch

oklch(27.8% 0.035 293.7)

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

#6E375A

Rose Purple · DimGray · Camellia

HEX

#6E375A

RGB

rgb(110, 55, 90)

HSL

hsl(322, 33%, 32%)

HSB

hsb(322, 50%, 43%)

CMYK

cmyk(0%, 50%, 18%, 57%)

Oklch

oklch(42.0% 0.091 342.9)

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

#B93655

Crimson · Brown · Passion Red

HEX

#B93655

RGB

rgb(185, 54, 85)

HSL

hsl(346, 55%, 47%)

HSB

hsb(346, 71%, 73%)

CMYK

cmyk(0%, 71%, 54%, 27%)

Oklch

oklch(53.6% 0.167 11.0)

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

#EA274C

Vermilion · Crimson · Passion Red

HEX

#EA274C

RGB

rgb(234, 39, 76)

HSL

hsl(349, 82%, 54%)

HSB

hsb(349, 83%, 92%)

CMYK

cmyk(0%, 83%, 68%, 8%)

Oklch

oklch(60.8% 0.224 18.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

314F54

543631

Analogous

315447

314F54

313D54

Triadic

314F54

54314E

4E5431

Split-Comp.

314F54

54313D

544731

Tetradic

314F54

473154

543631

3D5431

Contrast Matrix WCAG 2.1 Contrast

314F54	292538	6E375A	B93655	EA274C
—	1.7 Fail	1.0 Fail	1.6 Fail	2.1 Fail
1.7 Fail	—	1.7 Fail	2.6 Fail	3.5 AA Large
1.0 Fail	1.7 Fail	—	1.6 Fail	2.1 Fail
1.6 Fail	2.6 Fail	1.6 Fail	—	1.3 Fail
2.1 Fail	3.5 AA Large	2.1 Fail	1.3 Fail	—

White BG

8.8AAA

14.8AAA

8.9AAA

5.6AA

4.3AA Large

Black BG

2.4Fail

1.4Fail

2.4Fail

3.7AA Large

4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E53

272733

565652

807F4D

969443

Deuteranopia

3C3A53

282832

595E50

88924C

A1AF41

Tritanopia

335252

29302F

6B4B49

B24846

E03C3A

Achromatopsia

474747

282828

4B4B4B

616161

666666

Shades & Tints Shades & Tints

#314F54

Dark

Light

#292538

Dark

Light

#6E375A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #314f54;
  --color-2: #292538;
  --color-3: #6e375a;
  --color-4: #b93655;
  --color-5: #ea274c;
}

SCSS

$color-1: #314f54;
$color-2: #292538;
$color-3: #6e375a;
$color-4: #b93655;
$color-5: #ea274c;

TAILWIND

colors: {
  'brand-1': '#314f54',
  'brand-2': '#292538',
  'brand-3': '#6e375a',
  'brand-4': '#b93655',
  'brand-5': '#ea274c',
}

RGB Array

[49, 79, 84], [41, 37, 56], [110, 55, 90], [185, 54, 85], [234, 39, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #314F54, #292538, #6E375A, #B93655, #EA274C 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: #314f54; --color-2: #292538; --color-3: #6e375a; --color-4: #b93655; --color-5: #ea274c. 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