← Back to Editor

#04A584 · #623846 · #884451 · #E15234 · #F5A34F

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 App

Color Details Color Details

#04A584

Mineral Blue · Teal · Mint Ice

HEX
#04A584
RGB
rgb(4, 165, 132)
HSL
hsl(168, 95%, 33%)
HSB
hsb(168, 98%, 65%)
CMYK
cmyk(98%, 0%, 20%, 35%)
Oklch
oklch(64.3% 0.124 171.7)

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

#623846

Dark Violet · DarkSlateGray · Camellia

HEX
#623846
RGB
rgb(98, 56, 70)
HSL
hsl(340, 27%, 30%)
HSB
hsb(340, 43%, 38%)
CMYK
cmyk(0%, 43%, 29%, 62%)
Oklch
oklch(39.7% 0.063 358.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#884451

Crimson · Sienna · Wine Red

HEX
#884451
RGB
rgb(136, 68, 81)
HSL
hsl(349, 33%, 40%)
HSB
hsb(349, 50%, 53%)
CMYK
cmyk(0%, 50%, 40%, 47%)
Oklch
oklch(47.5% 0.093 9.2)

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

#E15234

Vermilion · Chocolate · Passion Red

HEX
#E15234
RGB
rgb(225, 82, 52)
HSL
hsl(10, 74%, 54%)
HSB
hsb(10, 77%, 88%)
CMYK
cmyk(0%, 64%, 77%, 12%)
Oklch
oklch(62.7% 0.184 33.6)

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

#F5A34F

Ginger · SandyBrown · Warm Sun

HEX
#F5A34F
RGB
rgb(245, 163, 79)
HSL
hsl(30, 89%, 64%)
HSB
hsb(30, 68%, 96%)
CMYK
cmyk(0%, 33%, 68%, 4%)
Oklch
oklch(78.1% 0.139 63.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

04A584
A40424

Analogous

04A434
04A584
0474A4

Triadic

04A584
8404A4
A48404

Split-Comp.

04A584
A40474
A43404

Tetradic

04A584
3404A4
A40424
74A404

Contrast Matrix WCAG 2.1 Contrast

04A584
623846
884451
E15234
F5A34F
—
3.1
AA Large
2.2
Fail
1.2
Fail
1.5
Fail
3.1
AA Large
—
1.4
Fail
2.5
Fail
4.7
AA
2.2
Fail
1.4
Fail
—
1.8
Fail
3.4
AA Large
1.2
Fail
2.5
Fail
1.8
Fail
—
1.9
Fail
1.5
Fail
4.7
AA
3.4
AA Large
1.9
Fail
—
White BG
3.1AA Large
9.7AAA
7.0AAA
3.8AA Large
2.1Fail
Black BG
6.7AA
2.2Fail
3.0Fail
5.5AA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4B8C
504F43
6B6A4E
A3A23B
D1D163

Deuteranopia

40348E
525542
6F744D
ABB63D
D6DC68

Tritanopia

0C9294
60403F
854B4B
DA4142
F17377

Achromatopsia

717171
464646
5A5A5A
797979
B2B2B2

Shades & Tints Shades & Tints

#04A584

Dark
Light

#623846

Dark
Light

#884451

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #04a584;
  --color-2: #623846;
  --color-3: #884451;
  --color-4: #e15234;
  --color-5: #f5a34f;
}

SCSS

$color-1: #04a584;
$color-2: #623846;
$color-3: #884451;
$color-4: #e15234;
$color-5: #f5a34f;

TAILWIND

colors: {
  'brand-1': '#04a584',
  'brand-2': '#623846',
  'brand-3': '#884451',
  'brand-4': '#e15234',
  'brand-5': '#f5a34f',
}

RGB Array

[4, 165, 132], [98, 56, 70], [136, 68, 81], [225, 82, 52], [245, 163, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #04A584, #623846, #884451, #E15234, #F5A34F is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #04a584; --color-2: #623846; --color-3: #884451; --color-4: #e15234; --color-5: #f5a34f. 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. 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