← Back to Editor

#340C24 · #80215F · #A3417D · #B87B9E · #F5AB57

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#340C24

Rose Purple · Black · Raspberry

HEX
#340C24
RGB
rgb(52, 12, 36)
HSL
hsl(324, 63%, 13%)
HSB
hsb(324, 77%, 20%)
CMYK
cmyk(0%, 77%, 31%, 80%)
Oklch
oklch(23.3% 0.071 347.1)

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

#80215F

Rose Purple · Purple · Camellia

HEX
#80215F
RGB
rgb(128, 33, 95)
HSL
hsl(321, 59%, 32%)
HSB
hsb(321, 74%, 50%)
CMYK
cmyk(0%, 74%, 26%, 50%)
Oklch
oklch(42.1% 0.145 345.1)

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

#A3417D

Rose Purple · MediumVioletRed · Camellia

HEX
#A3417D
RGB
rgb(163, 65, 125)
HSL
hsl(323, 43%, 45%)
HSB
hsb(323, 60%, 64%)
CMYK
cmyk(0%, 60%, 23%, 36%)
Oklch
oklch(52.6% 0.146 345.6)

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

#B87B9E

Rose Purple · DarkGray · Rose Pink

HEX
#B87B9E
RGB
rgb(184, 123, 158)
HSL
hsl(326, 30%, 60%)
HSB
hsb(326, 33%, 72%)
CMYK
cmyk(0%, 33%, 14%, 28%)
Oklch
oklch(65.6% 0.089 344.4)

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

#F5AB57

Ginger · SandyBrown · Warm Sun

HEX
#F5AB57
RGB
rgb(245, 171, 87)
HSL
hsl(32, 89%, 65%)
HSB
hsb(32, 64%, 96%)
CMYK
cmyk(0%, 30%, 64%, 4%)
Oklch
oklch(79.7% 0.132 67.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

340C24
0C361D

Analogous

320C36
340C24
360C10

Triadic

340C24
25360C
0C2536

Split-Comp.

340C24
10360C
0C3632

Tetradic

340C24
36320C
0C361D
0C1036

Contrast Matrix WCAG 2.1 Contrast

340C24
80215F
A3417D
B87B9E
F5AB57
—
1.9
Fail
2.9
Fail
5.2
AA
8.9
AAA
1.9
Fail
—
1.6
Fail
2.8
Fail
4.7
AA
2.9
Fail
1.6
Fail
—
1.8
Fail
3.0
AA Large
5.2
AA
2.8
Fail
1.8
Fail
—
1.7
Fail
8.9
AAA
4.7
AA
3.0
AA Large
1.7
Fail
—
White BG
17.2AAA
9.1AAA
5.8AA
3.3AA Large
1.9Fail
Black BG
1.2Fail
2.3Fail
3.6AA Large
6.4AA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

23221E
575650
79786E
9E9D96
D5D46B

Deuteranopia

25281D
5C644C
7E866B
A1A694
D9DF70

Tritanopia

321A19
7B4442
9E6361
B58F8D
F17B7F

Achromatopsia

1B1B1B
444444
656565
919191
B8B8B8

Shades & Tints Shades & Tints

#340C24

Dark
Light

#80215F

Dark
Light

#A3417D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #340c24;
  --color-2: #80215f;
  --color-3: #a3417d;
  --color-4: #b87b9e;
  --color-5: #f5ab57;
}

SCSS

$color-1: #340c24;
$color-2: #80215f;
$color-3: #a3417d;
$color-4: #b87b9e;
$color-5: #f5ab57;

TAILWIND

colors: {
  'brand-1': '#340c24',
  'brand-2': '#80215f',
  'brand-3': '#a3417d',
  'brand-4': '#b87b9e',
  'brand-5': '#f5ab57',
}

RGB Array

[52, 12, 36], [128, 33, 95], [163, 65, 125], [184, 123, 158], [245, 171, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #340C24, #80215F, #A3417D, #B87B9E, #F5AB57 is ideal for: 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: #340c24; --color-2: #80215f; --color-3: #a3417d; --color-4: #b87b9e; --color-5: #f5ab57. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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