← Back to Editor

#070312 · #FFD414 · #3B3647 · #514766 · #3F3461

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#070312

Deep Indigo · Black · Deep Sea Blue

HEX
#070312
RGB
rgb(7, 3, 18)
HSL
hsl(256, 71%, 4%)
HSB
hsb(256, 83%, 7%)
CMYK
cmyk(61%, 83%, 0%, 93%)
Oklch
oklch(11.9% 0.038 296.4)

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

#FFD414

Ginger · Gold · Sunflower

HEX
#FFD414
RGB
rgb(255, 212, 20)
HSL
hsl(49, 100%, 54%)
HSB
hsb(49, 92%, 100%)
CMYK
cmyk(0%, 17%, 92%, 0%)
Oklch
oklch(88.1% 0.178 93.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#3B3647

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3B3647
RGB
rgb(59, 54, 71)
HSL
hsl(258, 14%, 25%)
HSB
hsb(258, 24%, 28%)
CMYK
cmyk(17%, 24%, 0%, 72%)
Oklch
oklch(34.5% 0.030 298.3)

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

#514766

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#514766
RGB
rgb(81, 71, 102)
HSL
hsl(259, 18%, 34%)
HSB
hsb(259, 30%, 40%)
CMYK
cmyk(21%, 30%, 0%, 60%)
Oklch
oklch(42.1% 0.052 299.0)

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

#3F3461

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3F3461
RGB
rgb(63, 52, 97)
HSL
hsl(255, 30%, 29%)
HSB
hsb(255, 46%, 38%)
CMYK
cmyk(35%, 46%, 0%, 62%)
Oklch
oklch(35.9% 0.077 293.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

070312
0E1103

Analogous

030611
070312
0E0311

Triadic

070312
110703
031107

Split-Comp.

070312
110E03
061103

Tetradic

070312
110306
0E1103
03110E

Contrast Matrix WCAG 2.1 Contrast

070312
FFD414
3B3647
514766
3F3461
—
14.2
AAA
1.8
Fail
2.4
Fail
1.8
Fail
14.2
AAA
—
8.1
AAA
6.0
AA
7.8
AAA
1.8
Fail
8.1
AAA
—
1.4
Fail
1.0
Fail
2.4
Fail
6.0
AA
1.4
Fail
—
1.3
Fail
1.8
Fail
7.8
AAA
1.0
Fail
1.3
Fail
—
White BG
20.4AAA
1.4Fail
11.6AAA
8.6AAA
11.2AAA
Black BG
1.0Fail
14.7AAA
1.8Fail
2.4Fail
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

05050E
ECEC42
393943
4D4D5E
3A3A56

Deuteranopia

06060E
EFF24E
393A42
4D4E5D
3B3C53

Tritanopia

070C0B
FD676F
3B403F
515957
3E4E4C

Achromatopsia

060606
CBCBCB
393939
4E4E4E
3C3C3C

Shades & Tints Shades & Tints

#070312

Dark
Light

#FFD414

Dark
Light

#3B3647

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #070312;
  --color-2: #ffd414;
  --color-3: #3b3647;
  --color-4: #514766;
  --color-5: #3f3461;
}

SCSS

$color-1: #070312;
$color-2: #ffd414;
$color-3: #3b3647;
$color-4: #514766;
$color-5: #3f3461;

TAILWIND

colors: {
  'brand-1': '#070312',
  'brand-2': '#ffd414',
  'brand-3': '#3b3647',
  'brand-4': '#514766',
  'brand-5': '#3f3461',
}

RGB Array

[7, 3, 18], [255, 212, 20], [59, 54, 71], [81, 71, 102], [63, 52, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #070312, #FFD414, #3B3647, #514766, #3F3461 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: #070312; --color-2: #ffd414; --color-3: #3b3647; --color-4: #514766; --color-5: #3f3461. 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