← Back to Editor

#3D1436 · #04126A · #0534A0 · #3E7087 · #FBBF76

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#3D1436

Rose Purple · DarkSlateGray · Dark Purple

HEX
#3D1436
RGB
rgb(61, 20, 54)
HSL
hsl(310, 51%, 16%)
HSB
hsb(310, 67%, 24%)
CMYK
cmyk(0%, 67%, 11%, 76%)
Oklch
oklch(27.1% 0.081 334.7)

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

#04126A

Indigo · MidnightBlue · Prussian Blue

HEX
#04126A
RGB
rgb(4, 18, 106)
HSL
hsl(232, 93%, 22%)
HSB
hsb(232, 96%, 42%)
CMYK
cmyk(96%, 83%, 0%, 58%)
Oklch
oklch(26.0% 0.149 265.5)

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

#0534A0

Indigo · MidnightBlue · Prussian Blue

HEX
#0534A0
RGB
rgb(5, 52, 160)
HSL
hsl(222, 94%, 32%)
HSB
hsb(222, 97%, 63%)
CMYK
cmyk(97%, 68%, 0%, 37%)
Oklch
oklch(38.1% 0.180 263.0)

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

#3E7087

Slate Blue · SteelBlue · Mint Ice

HEX
#3E7087
RGB
rgb(62, 112, 135)
HSL
hsl(199, 37%, 39%)
HSB
hsb(199, 54%, 53%)
CMYK
cmyk(54%, 17%, 0%, 47%)
Oklch
oklch(52.0% 0.065 229.6)

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

#FBBF76

Goose Yellow · LightSalmon · Warm Sun

HEX
#FBBF76
RGB
rgb(251, 191, 118)
HSL
hsl(33, 94%, 72%)
HSB
hsb(33, 53%, 98%)
CMYK
cmyk(0%, 24%, 53%, 2%)
Oklch
oklch(84.4% 0.114 70.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D1436
143E1B

Analogous

30143E
3D1436
3E1422

Triadic

3D1436
373E14
14373E

Split-Comp.

3D1436
223E14
143E30

Tetradic

3D1436
3E3014
143E1B
14223E

Contrast Matrix WCAG 2.1 Contrast

3D1436
04126A
0534A0
3E7087
FBBF76
—
1.0
Fail
1.5
Fail
2.9
Fail
9.5
AAA
1.0
Fail
—
1.5
Fail
3.0
Fail
9.9
AAA
1.5
Fail
1.5
Fail
—
1.9
Fail
6.4
AA
2.9
Fail
3.0
Fail
1.9
Fail
—
3.3
AA Large
9.5
AAA
9.9
AAA
6.4
AA
3.3
AA Large
—
White BG
15.5AAA
16.2AAA
10.5AAA
5.4AA
1.6Fail
Black BG
1.4Fail
1.3Fail
2.0Fail
3.9AA Large
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2B2E
0A0A55
191A86
545481
E1E088

Deuteranopia

2E312C
090850
171380
514D80
E5E98C

Tritanopia

3B2726
054440
07716D
417D7C
F89699

Achromatopsia

242424
181818
323232
646464
C9C9C9

Shades & Tints Shades & Tints

#3D1436

Dark
Light

#04126A

Dark
Light

#0534A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d1436;
  --color-2: #04126a;
  --color-3: #0534a0;
  --color-4: #3e7087;
  --color-5: #fbbf76;
}

SCSS

$color-1: #3d1436;
$color-2: #04126a;
$color-3: #0534a0;
$color-4: #3e7087;
$color-5: #fbbf76;

TAILWIND

colors: {
  'brand-1': '#3d1436',
  'brand-2': '#04126a',
  'brand-3': '#0534a0',
  'brand-4': '#3e7087',
  'brand-5': '#fbbf76',
}

RGB Array

[61, 20, 54], [4, 18, 106], [5, 52, 160], [62, 112, 135], [251, 191, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #3D1436, #04126A, #0534A0, #3E7087, #FBBF76 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #3d1436; --color-2: #04126a; --color-3: #0534a0; --color-4: #3e7087; --color-5: #fbbf76. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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