← Back to Editor

#3A3C31 · #EF7F84 · #CE8F7D · #A8A480 · #84B081

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#3A3C31

Grass Green · DarkSlateGray · Forest Green

HEX
#3A3C31
RGB
rgb(58, 60, 49)
HSL
hsl(71, 10%, 21%)
HSB
hsb(71, 18%, 24%)
CMYK
cmyk(3%, 0%, 18%, 76%)
Oklch
oklch(35.1% 0.019 115.7)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#EF7F84

Peach Pink · LightCoral · Coral Red

HEX
#EF7F84
RGB
rgb(239, 127, 132)
HSL
hsl(357, 78%, 72%)
HSB
hsb(357, 47%, 94%)
CMYK
cmyk(0%, 47%, 45%, 6%)
Oklch
oklch(72.3% 0.138 18.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#CE8F7D

Peach Pink · DarkSalmon · Coral Red

HEX
#CE8F7D
RGB
rgb(206, 143, 125)
HSL
hsl(13, 45%, 65%)
HSB
hsb(13, 39%, 81%)
CMYK
cmyk(0%, 31%, 39%, 19%)
Oklch
oklch(70.8% 0.082 36.6)

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

#A8A480

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A8A480
RGB
rgb(168, 164, 128)
HSL
hsl(54, 19%, 58%)
HSB
hsb(54, 24%, 66%)
CMYK
cmyk(0%, 2%, 24%, 34%)
Oklch
oklch(71.3% 0.050 102.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#84B081

Celadon · DarkSeaGreen · Olive Green

HEX
#84B081
RGB
rgb(132, 176, 129)
HSL
hsl(116, 23%, 60%)
HSB
hsb(116, 27%, 69%)
CMYK
cmyk(25%, 0%, 27%, 31%)
Oklch
oklch(71.3% 0.082 143.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A3C31
32303B

Analogous

3B3830
3A3C31
343B30

Triadic

3A3C31
30393B
3B3039

Split-Comp.

3A3C31
30343B
38303B

Tetradic

3A3C31
303B38
32303B
3B3034

Contrast Matrix WCAG 2.1 Contrast

3A3C31
EF7F84
CE8F7D
A8A480
84B081
—
4.3
AA Large
4.2
AA Large
4.4
AA Large
4.5
AA
4.3
AA Large
—
1.0
Fail
1.0
Fail
1.1
Fail
4.2
AA Large
1.0
Fail
—
1.1
Fail
1.1
Fail
4.4
AA Large
1.0
Fail
1.1
Fail
—
1.0
Fail
4.5
AA
1.1
Fail
1.1
Fail
1.0
Fail
—
White BG
11.2AAA
2.6Fail
2.7Fail
2.5Fail
2.5Fail
Black BG
1.9Fail
8.0AAA
7.8AAA
8.3AAA
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B34
BFBD83
B3B281
A6A689
97978C

Deuteranopia

3B3B34
C5CD83
B6BB82
A7A78B
95918F

Tritanopia

3A3636
E98282
CB8586
A89091
869597

Achromatopsia

3A3A3A
A1A1A1
A0A0A0
A1A1A1
9D9D9D

Shades & Tints Shades & Tints

#3A3C31

Dark
Light

#EF7F84

Dark
Light

#CE8F7D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a3c31;
  --color-2: #ef7f84;
  --color-3: #ce8f7d;
  --color-4: #a8a480;
  --color-5: #84b081;
}

SCSS

$color-1: #3a3c31;
$color-2: #ef7f84;
$color-3: #ce8f7d;
$color-4: #a8a480;
$color-5: #84b081;

TAILWIND

colors: {
  'brand-1': '#3a3c31',
  'brand-2': '#ef7f84',
  'brand-3': '#ce8f7d',
  'brand-4': '#a8a480',
  'brand-5': '#84b081',
}

RGB Array

[58, 60, 49], [239, 127, 132], [206, 143, 125], [168, 164, 128], [132, 176, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #3A3C31, #EF7F84, #CE8F7D, #A8A480, #84B081 is ideal for: 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: #3a3c31; --color-2: #ef7f84; --color-3: #ce8f7d; --color-4: #a8a480; --color-5: #84b081. 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. 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