← Back to Editor

#181347 · #0C0456 · #E2E1EA · #272066 · #1E1C38

sunset

A 5-color sunset palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#181347

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#181347
RGB
rgb(24, 19, 71)
HSL
hsl(246, 58%, 18%)
HSB
hsb(246, 73%, 28%)
CMYK
cmyk(66%, 73%, 0%, 72%)
Oklch
oklch(23.2% 0.093 280.6)

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

#0C0456

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#0C0456
RGB
rgb(12, 4, 86)
HSL
hsl(246, 91%, 18%)
HSB
hsb(246, 95%, 34%)
CMYK
cmyk(86%, 95%, 0%, 66%)
Oklch
oklch(21.8% 0.133 271.5)

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

#E2E1EA

Wisteria · Lavender · Sky Blue

HEX
#E2E1EA
RGB
rgb(226, 225, 234)
HSL
hsl(247, 18%, 90%)
HSB
hsb(247, 4%, 92%)
CMYK
cmyk(3%, 4%, 0%, 8%)
Oklch
oklch(91.3% 0.012 291.3)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#272066

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#272066
RGB
rgb(39, 32, 102)
HSL
hsl(246, 52%, 26%)
HSB
hsb(246, 69%, 40%)
CMYK
cmyk(62%, 69%, 0%, 60%)
Oklch
oklch(30.0% 0.118 281.1)

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

#1E1C38

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#1E1C38
RGB
rgb(30, 28, 56)
HSL
hsl(244, 33%, 16%)
HSB
hsb(244, 50%, 22%)
CMYK
cmyk(46%, 50%, 0%, 78%)
Oklch
oklch(24.4% 0.052 285.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

181347
434913

Analogous

132949
181347
331349

Triadic

181347
491913
134919

Split-Comp.

181347
493313
294913

Tetradic

181347
491329
434913
134933

Contrast Matrix WCAG 2.1 Contrast

181347
0C0456
E2E1EA
272066
1E1C38
—
1.0
Fail
13.2
AAA
1.2
Fail
1.0
Fail
1.0
Fail
—
13.9
AAA
1.3
Fail
1.1
Fail
13.2
AAA
13.9
AAA
—
10.9
AAA
12.7
AAA
1.2
Fail
1.3
Fail
10.9
AAA
—
1.2
Fail
1.0
Fail
1.1
Fail
12.7
AAA
1.2
Fail
—
White BG
17.2AAA
18.0AAA
1.3Fail
14.1AAA
16.4AAA
Black BG
1.2Fail
1.2Fail
16.2AAA
1.5Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

16163A
090842
E2E2E8
242455
1D1D31

Deuteranopia

161637
090A3D
E2E2E7
242551
1D1D30

Tritanopia

18302E
0C322F
E2E6E6
274845
1E2C2B

Achromatopsia

1A1A1A
101010
E2E2E2
2A2A2A
202020

Shades & Tints Shades & Tints

#181347

Dark
Light

#0C0456

Dark
Light

#E2E1EA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #181347;
  --color-2: #0c0456;
  --color-3: #e2e1ea;
  --color-4: #272066;
  --color-5: #1e1c38;
}

SCSS

$color-1: #181347;
$color-2: #0c0456;
$color-3: #e2e1ea;
$color-4: #272066;
$color-5: #1e1c38;

TAILWIND

colors: {
  'brand-1': '#181347',
  'brand-2': '#0c0456',
  'brand-3': '#e2e1ea',
  'brand-4': '#272066',
  'brand-5': '#1e1c38',
}

RGB Array

[24, 19, 71], [12, 4, 86], [226, 225, 234], [39, 32, 102], [30, 28, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #181347, #0C0456, #E2E1EA, #272066, #1E1C38 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #181347; --color-2: #0c0456; --color-3: #e2e1ea; --color-4: #272066; --color-5: #1e1c38. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 sunset-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