← Back to Editor

#081E20 · #1E4C4C · #447B78 · #A4C20C · #E5FDB4

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#081E20

Lake Blue · Black · Peacock Green

HEX
#081E20
RGB
rgb(8, 30, 32)
HSL
hsl(185, 60%, 8%)
HSB
hsb(185, 75%, 13%)
CMYK
cmyk(75%, 6%, 0%, 87%)
Oklch
oklch(21.8% 0.028 203.3)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#1E4C4C

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1E4C4C
RGB
rgb(30, 76, 76)
HSL
hsl(180, 43%, 21%)
HSB
hsb(180, 61%, 30%)
CMYK
cmyk(61%, 0%, 0%, 70%)
Oklch
oklch(38.5% 0.050 195.3)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#447B78

Mineral Blue · SeaGreen · Mint Ice

HEX
#447B78
RGB
rgb(68, 123, 120)
HSL
hsl(177, 29%, 37%)
HSB
hsb(177, 45%, 48%)
CMYK
cmyk(45%, 0%, 2%, 52%)
Oklch
oklch(54.4% 0.059 191.0)

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

#A4C20C

Grass Green · DarkGoldenRod · Forest Green

HEX
#A4C20C
RGB
rgb(164, 194, 12)
HSL
hsl(70, 88%, 40%)
HSB
hsb(70, 94%, 76%)
CMYK
cmyk(15%, 0%, 94%, 24%)
Oklch
oklch(76.5% 0.180 120.3)

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

#E5FDB4

Willow Green · Wheat · Mint Green

HEX
#E5FDB4
RGB
rgb(229, 253, 180)
HSL
hsl(80, 95%, 85%)
HSB
hsb(80, 29%, 99%)
CMYK
cmyk(9%, 0%, 29%, 1%)
Oklch
oklch(95.9% 0.097 123.0)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

081E20
210A08

Analogous

082116
081E20
081221

Triadic

081E20
21081F
1F2108

Split-Comp.

081E20
210812
211608

Tetradic

081E20
160821
210A08
122108

Contrast Matrix WCAG 2.1 Contrast

081E20
1E4C4C
447B78
A4C20C
E5FDB4
—
1.8
Fail
3.6
AA Large
8.5
AAA
15.6
AAA
1.8
Fail
—
2.0
Fail
4.7
AA
8.7
AAA
3.6
AA Large
2.0
Fail
—
2.4
Fail
4.4
AA Large
8.5
AAA
4.7
AA
2.4
Fail
—
1.8
Fail
15.6
AAA
8.7
AAA
4.4
AA Large
1.8
Fail
—
White BG
17.3AAA
9.6AAA
4.8AA
2.0Fail
1.1Fail
Black BG
1.2Fail
2.2Fail
4.4AA Large
10.3AAA
19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

121220
32324C
5C5C79
B1B138
EFF0C6

Deuteranopia

100F1F
2F2C4C
595579
AFAD43
EEECCA

Tritanopia

091F1F
204C4C
477979
A55B62
E6D4D7

Achromatopsia

181818
3E3E3E
6A6A6A
A4A4A4
EEEEEE

Shades & Tints Shades & Tints

#081E20

Dark
Light

#1E4C4C

Dark
Light

#447B78

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #081e20;
  --color-2: #1e4c4c;
  --color-3: #447b78;
  --color-4: #a4c20c;
  --color-5: #e5fdb4;
}

SCSS

$color-1: #081e20;
$color-2: #1e4c4c;
$color-3: #447b78;
$color-4: #a4c20c;
$color-5: #e5fdb4;

TAILWIND

colors: {
  'brand-1': '#081e20',
  'brand-2': '#1e4c4c',
  'brand-3': '#447b78',
  'brand-4': '#a4c20c',
  'brand-5': '#e5fdb4',
}

RGB Array

[8, 30, 32], [30, 76, 76], [68, 123, 120], [164, 194, 12], [229, 253, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #081E20, #1E4C4C, #447B78, #A4C20C, #E5FDB4 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: #081e20; --color-2: #1e4c4c; --color-3: #447b78; --color-4: #a4c20c; --color-5: #e5fdb4. 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