← Back to Editor

#D18F81 · #A85A58 · #533444 · #392437 · #21294E

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

#D18F81

Peach Pink · DarkSalmon · Coral Red

HEX
#D18F81
RGB
rgb(209, 143, 129)
HSL
hsl(11, 47%, 66%)
HSB
hsb(11, 38%, 82%)
CMYK
cmyk(0%, 32%, 38%, 18%)
Oklch
oklch(71.2% 0.084 32.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#A85A58

Crimson · Sienna · Passion Red

HEX
#A85A58
RGB
rgb(168, 90, 88)
HSL
hsl(2, 31%, 50%)
HSB
hsb(2, 48%, 66%)
CMYK
cmyk(0%, 46%, 48%, 34%)
Oklch
oklch(55.9% 0.103 22.4)

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

#533444

Rose Purple · DarkSlateGray · Camellia

HEX
#533444
RGB
rgb(83, 52, 68)
HSL
hsl(329, 23%, 26%)
HSB
hsb(329, 37%, 33%)
CMYK
cmyk(0%, 37%, 18%, 67%)
Oklch
oklch(36.8% 0.051 347.6)

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

#392437

Rose Purple · DarkSlateGray · Dark Purple

HEX
#392437
RGB
rgb(57, 36, 55)
HSL
hsl(306, 23%, 18%)
HSB
hsb(306, 37%, 22%)
CMYK
cmyk(0%, 37%, 4%, 78%)
Oklch
oklch(29.4% 0.045 330.0)

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

#21294E

Indigo · MidnightBlue · Prussian Blue

HEX
#21294E
RGB
rgb(33, 41, 78)
HSL
hsl(229, 41%, 22%)
HSB
hsb(229, 58%, 31%)
CMYK
cmyk(58%, 47%, 0%, 69%)
Oklch
oklch(29.4% 0.068 272.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D18F81
80C2D1

Analogous

D18099
D18F81
D1B780

Triadic

D18F81
80D18E
8E80D1

Split-Comp.

D18F81
80D1B7
8099D1

Tetradic

D18F81
99D180
80C2D1
B780D1

Contrast Matrix WCAG 2.1 Contrast

D18F81
A85A58
533444
392437
21294E
—
1.9
Fail
4.1
AA Large
5.4
AA
5.3
AA
1.9
Fail
—
2.2
Fail
2.9
Fail
2.9
Fail
4.1
AA Large
2.2
Fail
—
1.3
Fail
1.3
Fail
5.4
AA
2.9
Fail
1.3
Fail
—
1.0
Fail
5.3
AA
2.9
Fail
1.3
Fail
1.0
Fail
—
White BG
2.6Fail
4.9AA
10.8AAA
14.2AAA
14.1AAA
Black BG
8.0AAA
4.3AA Large
1.9Fail
1.5Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B484
868658
464540
303032
242545

Deuteranopia

B8BD85
8B9159
474A3F
313331
242343

Tritanopia

CE8788
A45959
513D3C
382F2E
213E3C

Achromatopsia

A1A1A1
717171
3F3F3F
2C2C2C
2B2B2B

Shades & Tints Shades & Tints

#D18F81

Dark
Light

#A85A58

Dark
Light

#533444

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d18f81;
  --color-2: #a85a58;
  --color-3: #533444;
  --color-4: #392437;
  --color-5: #21294e;
}

SCSS

$color-1: #d18f81;
$color-2: #a85a58;
$color-3: #533444;
$color-4: #392437;
$color-5: #21294e;

TAILWIND

colors: {
  'brand-1': '#d18f81',
  'brand-2': '#a85a58',
  'brand-3': '#533444',
  'brand-4': '#392437',
  'brand-5': '#21294e',
}

RGB Array

[209, 143, 129], [168, 90, 88], [83, 52, 68], [57, 36, 55], [33, 41, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #D18F81, #A85A58, #533444, #392437, #21294E 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: #d18f81; --color-2: #a85a58; --color-3: #533444; --color-4: #392437; --color-5: #21294e. 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