← Back to Editor

#271518 · #632530 · #9F102C · #CC2909 · #EB4F0D

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 App

Color Details Color Details

#271518

Crimson · Black · Deep Berry

HEX
#271518
RGB
rgb(39, 21, 24)
HSL
hsl(350, 30%, 12%)
HSB
hsb(350, 46%, 15%)
CMYK
cmyk(0%, 46%, 38%, 85%)
Oklch
oklch(22.2% 0.030 8.9)

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

#632530

Crimson · Brown · Wine Red

HEX
#632530
RGB
rgb(99, 37, 48)
HSL
hsl(349, 46%, 27%)
HSB
hsb(349, 63%, 39%)
CMYK
cmyk(0%, 63%, 52%, 61%)
Oklch
oklch(35.9% 0.090 12.0)

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

#9F102C

Vermilion · Brown · Wine Red

HEX
#9F102C
RGB
rgb(159, 16, 44)
HSL
hsl(348, 82%, 34%)
HSB
hsb(348, 90%, 62%)
CMYK
cmyk(0%, 90%, 72%, 38%)
Oklch
oklch(45.1% 0.172 19.3)

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

#CC2909

Vermilion · FireBrick · Passion Red

HEX
#CC2909
RGB
rgb(204, 41, 9)
HSL
hsl(10, 92%, 42%)
HSB
hsb(10, 96%, 80%)
CMYK
cmyk(0%, 80%, 96%, 20%)
Oklch
oklch(54.8% 0.202 32.2)

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

#EB4F0D

Tangerine · OrangeRed · Amber Brown

HEX
#EB4F0D
RGB
rgb(235, 79, 13)
HSL
hsl(18, 90%, 49%)
HSB
hsb(18, 94%, 92%)
CMYK
cmyk(0%, 66%, 94%, 8%)
Oklch
oklch(63.7% 0.202 38.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

271518
152825

Analogous

281522
271518
281C15

Triadic

271518
182815
151828

Split-Comp.

271518
15281C
152228

Tetradic

271518
222815
152825
1C1528

Contrast Matrix WCAG 2.1 Contrast

271518
632530
9F102C
CC2909
EB4F0D
—
1.5
Fail
2.1
Fail
3.2
AA Large
4.7
AA
1.5
Fail
—
1.4
Fail
2.1
Fail
3.1
AA Large
2.1
Fail
1.4
Fail
—
1.5
Fail
2.2
Fail
3.2
AA Large
2.1
Fail
1.5
Fail
—
1.5
Fail
4.7
AA
3.1
AA Large
2.2
Fail
1.5
Fail
—
White BG
17.4AAA
11.4AAA
8.1AAA
5.4AA
3.7AA Large
Black BG
1.2Fail
1.8Fail
2.6Fail
3.9AA Large
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1F17
48482D
616025
858411
A7A61D

Deuteranopia

202217
4C502D
697424
8F9B13
B1BC21

Tritanopia

261717
602B2B
98201F
C41718
E32A2C

Achromatopsia

1B1B1B
393939
3E3E3E
565656
767676

Shades & Tints Shades & Tints

#271518

Dark
Light

#632530

Dark
Light

#9F102C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #271518;
  --color-2: #632530;
  --color-3: #9f102c;
  --color-4: #cc2909;
  --color-5: #eb4f0d;
}

SCSS

$color-1: #271518;
$color-2: #632530;
$color-3: #9f102c;
$color-4: #cc2909;
$color-5: #eb4f0d;

TAILWIND

colors: {
  'brand-1': '#271518',
  'brand-2': '#632530',
  'brand-3': '#9f102c',
  'brand-4': '#cc2909',
  'brand-5': '#eb4f0d',
}

RGB Array

[39, 21, 24], [99, 37, 48], [159, 16, 44], [204, 41, 9], [235, 79, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #271518, #632530, #9F102C, #CC2909, #EB4F0D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. 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: #271518; --color-2: #632530; --color-3: #9f102c; --color-4: #cc2909; --color-5: #eb4f0d. 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. 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