← Back to Editor

#8293A7 · #1F1317 · #BF412E · #B78103 · #DAAA18

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

#8293A7

Azure · LightSlateGray · Navy Blue

HEX
#8293A7
RGB
rgb(130, 147, 167)
HSL
hsl(212, 17%, 58%)
HSB
hsb(212, 22%, 65%)
CMYK
cmyk(22%, 12%, 0%, 35%)
Oklch
oklch(65.7% 0.036 252.6)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#1F1317

Dark Violet · Black · Raspberry

HEX
#1F1317
RGB
rgb(31, 19, 23)
HSL
hsl(340, 24%, 10%)
HSB
hsb(340, 39%, 12%)
CMYK
cmyk(0%, 39%, 26%, 88%)
Oklch
oklch(20.4% 0.021 357.4)

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

#BF412E

Vermilion · Brown · Passion Red

HEX
#BF412E
RGB
rgb(191, 65, 46)
HSL
hsl(8, 61%, 46%)
HSB
hsb(8, 76%, 75%)
CMYK
cmyk(0%, 66%, 76%, 25%)
Oklch
oklch(55.1% 0.165 31.3)

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

#B78103

Ochre · DarkGoldenRod · Honey Gold

HEX
#B78103
RGB
rgb(183, 129, 3)
HSL
hsl(42, 97%, 36%)
HSB
hsb(42, 98%, 72%)
CMYK
cmyk(0%, 30%, 98%, 28%)
Oklch
oklch(64.1% 0.132 79.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#DAAA18

Ochre · GoldenRod · Honey Gold

HEX
#DAAA18
RGB
rgb(218, 170, 24)
HSL
hsl(45, 80%, 47%)
HSB
hsb(45, 89%, 85%)
CMYK
cmyk(0%, 22%, 89%, 15%)
Oklch
oklch(76.1% 0.151 87.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8293A7
A69582

Analogous

82A5A6
8293A7
8382A6

Triadic

8293A7
A68293
93A682

Split-Comp.

8293A7
A68382
A5A682

Tetradic

8293A7
A682A5
A69582
82A683

Contrast Matrix WCAG 2.1 Contrast

8293A7
1F1317
BF412E
B78103
DAAA18
—
5.7
AA
1.7
Fail
1.1
Fail
1.5
Fail
5.7
AA
—
3.4
AA Large
5.3
AA
8.4
AAA
1.7
Fail
3.4
AA Large
—
1.5
Fail
2.4
Fail
1.1
Fail
5.3
AA
1.5
Fail
—
1.6
Fail
1.5
Fail
8.4
AAA
2.4
Fail
1.6
Fail
—
White BG
3.1AA Large
18.0AAA
5.2AA
3.4AA Large
2.2Fail
Black BG
6.7AA
1.2Fail
4.0AA Large
6.2AA
9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

898AA2
1A1A16
888733
A09F21
C5C53B

Deuteranopia

8887A1
1B1B16
909934
A3A729
C8CC44

Tritanopia

839E9E
1E1515
B93637
B43A3F
D8575D

Achromatopsia

909090
171717
656565
838383
A8A8A8

Shades & Tints Shades & Tints

#8293A7

Dark
Light

#1F1317

Dark
Light

#BF412E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8293a7;
  --color-2: #1f1317;
  --color-3: #bf412e;
  --color-4: #b78103;
  --color-5: #daaa18;
}

SCSS

$color-1: #8293a7;
$color-2: #1f1317;
$color-3: #bf412e;
$color-4: #b78103;
$color-5: #daaa18;

TAILWIND

colors: {
  'brand-1': '#8293a7',
  'brand-2': '#1f1317',
  'brand-3': '#bf412e',
  'brand-4': '#b78103',
  'brand-5': '#daaa18',
}

RGB Array

[130, 147, 167], [31, 19, 23], [191, 65, 46], [183, 129, 3], [218, 170, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #8293A7, #1F1317, #BF412E, #B78103, #DAAA18 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: #8293a7; --color-2: #1f1317; --color-3: #bf412e; --color-4: #b78103; --color-5: #daaa18. 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