← Back to Editor

#4D4342 · #211312 · #D13401 · #E37631 · #FF9B28

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

#4D4342

Crimson · DarkSlateGray · Charcoal

HEX
#4D4342
RGB
rgb(77, 67, 66)
HSL
hsl(5, 8%, 28%)
HSB
hsb(5, 14%, 30%)
CMYK
cmyk(0%, 13%, 14%, 70%)
Oklch
oklch(39.3% 0.014 24.6)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#211312

Crimson · Black · Deep Berry

HEX
#211312
RGB
rgb(33, 19, 18)
HSL
hsl(4, 29%, 10%)
HSB
hsb(4, 45%, 13%)
CMYK
cmyk(0%, 42%, 45%, 87%)
Oklch
oklch(20.5% 0.024 23.8)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#D13401

Tangerine · FireBrick · Amber Brown

HEX
#D13401
RGB
rgb(209, 52, 1)
HSL
hsl(15, 99%, 41%)
HSB
hsb(15, 100%, 82%)
CMYK
cmyk(0%, 75%, 100%, 18%)
Oklch
oklch(56.6% 0.199 34.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#E37631

Tangerine · Chocolate · Warm Sun

HEX
#E37631
RGB
rgb(227, 118, 49)
HSL
hsl(23, 76%, 54%)
HSB
hsb(23, 78%, 89%)
CMYK
cmyk(0%, 48%, 78%, 11%)
Oklch
oklch(68.0% 0.157 49.3)

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

#FF9B28

Ginger · GoldenRod · Warm Sun

HEX
#FF9B28
RGB
rgb(255, 155, 40)
HSL
hsl(32, 100%, 58%)
HSB
hsb(32, 84%, 100%)
CMYK
cmyk(0%, 39%, 84%, 0%)
Oklch
oklch(77.6% 0.166 62.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D4342
424C4D

Analogous

4D4246
4D4342
4D4842

Triadic

4D4342
424D43
43424D

Split-Comp.

4D4342
424D48
42464D

Tetradic

4D4342
464D42
424C4D
48424D

Contrast Matrix WCAG 2.1 Contrast

4D4342
211312
D13401
E37631
FF9B28
—
1.9
Fail
1.9
Fail
3.1
AA Large
4.5
AA
1.9
Fail
—
3.6
AA Large
5.9
AA
8.5
AAA
1.9
Fail
3.6
AA Large
—
1.6
Fail
2.4
Fail
3.1
AA Large
5.9
AA
1.6
Fail
—
1.4
Fail
4.5
AA
8.5
AAA
2.4
Fail
1.4
Fail
—
White BG
9.6AAA
18.0AAA
5.0AA
3.0AA Large
2.1Fail
Black BG
2.2Fail
1.2Fail
4.2AA Large
6.9AA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

494942
1B1B12
8D8C0D
B4B342
D4D344

Deuteranopia

494A42
1C1D12
96A210
BAC246
DAE14B

Tritanopia

4C4242
201212
C91719
DE4F52
FA5A5F

Achromatopsia

464646
171717
5D5D5D
8F8F8F
ACACAC

Shades & Tints Shades & Tints

#4D4342

Dark
Light

#211312

Dark
Light

#D13401

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d4342;
  --color-2: #211312;
  --color-3: #d13401;
  --color-4: #e37631;
  --color-5: #ff9b28;
}

SCSS

$color-1: #4d4342;
$color-2: #211312;
$color-3: #d13401;
$color-4: #e37631;
$color-5: #ff9b28;

TAILWIND

colors: {
  'brand-1': '#4d4342',
  'brand-2': '#211312',
  'brand-3': '#d13401',
  'brand-4': '#e37631',
  'brand-5': '#ff9b28',
}

RGB Array

[77, 67, 66], [33, 19, 18], [209, 52, 1], [227, 118, 49], [255, 155, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #4D4342, #211312, #D13401, #E37631, #FF9B28 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: #4d4342; --color-2: #211312; --color-3: #d13401; --color-4: #e37631; --color-5: #ff9b28. 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