#9E2346 + #5C2432 + #362227 + #1E121F + #050217 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9E2346

Dark Violet · Brown · Camellia

HEX

#9E2346

RGB

rgb(158, 35, 70)

HSL

hsl(343, 64%, 38%)

HSB

hsb(343, 78%, 62%)

CMYK

cmyk(0%, 78%, 56%, 38%)

Oklch

oklch(46.7% 0.159 9.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#5C2432

Crimson · DarkSlateGray · Wine Red

HEX

#5C2432

RGB

rgb(92, 36, 50)

HSL

hsl(345, 44%, 25%)

HSB

hsb(345, 61%, 36%)

CMYK

cmyk(0%, 61%, 46%, 64%)

Oklch

oklch(34.6% 0.083 6.9)

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

#362227

Crimson · DarkSlateGray · Deep Berry

HEX

#362227

RGB

rgb(54, 34, 39)

HSL

hsl(345, 23%, 17%)

HSB

hsb(345, 37%, 21%)

CMYK

cmyk(0%, 37%, 28%, 79%)

Oklch

oklch(27.9% 0.032 3.0)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#1E121F

Dark Plum · Black · Dark Purple

HEX

#1E121F

RGB

rgb(30, 18, 31)

HSL

hsl(295, 27%, 10%)

HSB

hsb(295, 42%, 12%)

CMYK

cmyk(3%, 42%, 0%, 88%)

Oklch

oklch(20.4% 0.031 324.0)

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

#050217

Deep Indigo · Black · Deep Sea Blue

HEX

#050217

RGB

rgb(5, 2, 23)

HSL

hsl(249, 84%, 5%)

HSB

hsb(249, 91%, 9%)

CMYK

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

Oklch

oklch(11.7% 0.051 286.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9E2346

239F7C

Analogous

9F2384

9E2346

9F3E23

Triadic

9E2346

469F23

23469F

Split-Comp.

9E2346

239F3E

23849F

Tetradic

9E2346

849F23

239F7C

3E239F

Contrast Matrix WCAG 2.1 Contrast

9E2346	5C2432	362227	1E121F	050217
—	1.6 Fail	2.0 Fail	2.4 Fail	2.7 Fail
1.6 Fail	—	1.2 Fail	1.5 Fail	1.7 Fail
2.0 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
2.4 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.7 Fail	1.7 Fail	1.4 Fail	1.1 Fail	—

White BG

7.5AAA

12.0AAA

14.8AAA

18.1AAA

20.4AAA

Black BG

2.8Fail

1.8Fail

1.4Fail

1.2Fail

1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

69683E

44432F

2D2D26

19191C

040412

Deuteranopia

70793C

474B2E

2F3026

1A1A1B

040411

Tritanopia

983735

592C2B

352525

1D1919

050E0D

Achromatopsia

4C4C4C

363636

292929

171717

050505

Shades & Tints Shades & Tints

#9E2346

Dark

Light

#5C2432

Dark

Light

#362227

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9e2346;
  --color-2: #5c2432;
  --color-3: #362227;
  --color-4: #1e121f;
  --color-5: #050217;
}

SCSS

$color-1: #9e2346;
$color-2: #5c2432;
$color-3: #362227;
$color-4: #1e121f;
$color-5: #050217;

TAILWIND

colors: {
  'brand-1': '#9e2346',
  'brand-2': '#5c2432',
  'brand-3': '#362227',
  'brand-4': '#1e121f',
  'brand-5': '#050217',
}

RGB Array

[158, 35, 70], [92, 36, 50], [54, 34, 39], [30, 18, 31], [5, 2, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #9E2346, #5C2432, #362227, #1E121F, #050217 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: #9e2346; --color-2: #5c2432; --color-3: #362227; --color-4: #1e121f; --color-5: #050217. 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 summer-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