← Back to Editor

#281133 · #4D1A42 · #8C3042 · #D9794A · #F7C154

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#281133

Dark Plum · MidnightBlue · Dark Purple

HEX
#281133
RGB
rgb(40, 17, 51)
HSL
hsl(281, 50%, 13%)
HSB
hsb(281, 67%, 20%)
CMYK
cmyk(22%, 67%, 0%, 80%)
Oklch
oklch(23.0% 0.068 313.5)

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

#4D1A42

Rose Purple · DarkSlateGray · Dark Purple

HEX
#4D1A42
RGB
rgb(77, 26, 66)
HSL
hsl(313, 50%, 20%)
HSB
hsb(313, 66%, 30%)
CMYK
cmyk(0%, 66%, 14%, 70%)
Oklch
oklch(31.3% 0.094 336.9)

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

#8C3042

Crimson · Brown · Wine Red

HEX
#8C3042
RGB
rgb(140, 48, 66)
HSL
hsl(348, 49%, 37%)
HSB
hsb(348, 66%, 55%)
CMYK
cmyk(0%, 66%, 53%, 45%)
Oklch
oklch(44.8% 0.125 12.0)

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

#D9794A

Tangerine · Coral · Warm Sun

HEX
#D9794A
RGB
rgb(217, 121, 74)
HSL
hsl(20, 65%, 57%)
HSB
hsb(20, 66%, 85%)
CMYK
cmyk(0%, 44%, 66%, 15%)
Oklch
oklch(67.4% 0.135 45.7)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#F7C154

Ginger · SandyBrown · Sunflower

HEX
#F7C154
RGB
rgb(247, 193, 84)
HSL
hsl(40, 91%, 65%)
HSB
hsb(40, 66%, 97%)
CMYK
cmyk(0%, 22%, 66%, 3%)
Oklch
oklch(84.0% 0.139 82.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

281133
1B3211

Analogous

171132
281133
32112C

Triadic

281133
322711
113227

Split-Comp.

281133
2C3211
113217

Tetradic

281133
321711
1B3211
112C32

Contrast Matrix WCAG 2.1 Contrast

281133
4D1A42
8C3042
D9794A
F7C154
—
1.3
Fail
2.1
Fail
5.6
AA
10.4
AAA
1.3
Fail
—
1.7
Fail
4.4
AA Large
8.2
AAA
2.1
Fail
1.7
Fail
—
2.6
Fail
4.9
AA
5.6
AA
4.4
AA Large
2.6
Fail
—
1.9
Fail
10.4
AAA
8.2
AAA
4.9
AA
1.9
Fail
—
White BG
17.2AAA
13.6AAA
8.0AAA
3.1AA Large
1.7Fail
Black BG
1.2Fail
1.5Fail
2.6Fail
6.8AA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1E1E2B
373638
64633E
AFAF55
E0DF6E

Deuteranopia

1F2129
3A3E36
6A703D
B5BC58
E3E775

Tritanopia

272423
4A312F
873A39
D45E60
F48388

Achromatopsia

1C1C1C
2E2E2E
4E4E4E
909090
C5C5C5

Shades & Tints Shades & Tints

#281133

Dark
Light

#4D1A42

Dark
Light

#8C3042

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #281133;
  --color-2: #4d1a42;
  --color-3: #8c3042;
  --color-4: #d9794a;
  --color-5: #f7c154;
}

SCSS

$color-1: #281133;
$color-2: #4d1a42;
$color-3: #8c3042;
$color-4: #d9794a;
$color-5: #f7c154;

TAILWIND

colors: {
  'brand-1': '#281133',
  'brand-2': '#4d1a42',
  'brand-3': '#8c3042',
  'brand-4': '#d9794a',
  'brand-5': '#f7c154',
}

RGB Array

[40, 17, 51], [77, 26, 66], [140, 48, 66], [217, 121, 74], [247, 193, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #281133, #4D1A42, #8C3042, #D9794A, #F7C154 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: #281133; --color-2: #4d1a42; --color-3: #8c3042; --color-4: #d9794a; --color-5: #f7c154. 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