← Back to Editor

#CAD55D · #8F9376 · #615A77 · #3E295F · #270030

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CAD55D

Autumn Sage · BurlyWood · Sunflower

HEX
#CAD55D
RGB
rgb(202, 213, 93)
HSL
hsl(66, 59%, 60%)
HSB
hsb(66, 56%, 84%)
CMYK
cmyk(5%, 0%, 56%, 16%)
Oklch
oklch(84.1% 0.144 113.9)

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

#8F9376

Autumn Sage · Gray · Sunflower

HEX
#8F9376
RGB
rgb(143, 147, 118)
HSL
hsl(68, 12%, 52%)
HSB
hsb(68, 20%, 58%)
CMYK
cmyk(3%, 0%, 20%, 42%)
Oklch
oklch(65.2% 0.042 113.9)

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

#615A77

Deep Indigo · DimGray · Navy Blue

HEX
#615A77
RGB
rgb(97, 90, 119)
HSL
hsl(254, 14%, 41%)
HSB
hsb(254, 24%, 47%)
CMYK
cmyk(18%, 24%, 0%, 53%)
Oklch
oklch(48.5% 0.047 295.7)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#3E295F

Deep Indigo · MidnightBlue · Eggplant

HEX
#3E295F
RGB
rgb(62, 41, 95)
HSL
hsl(263, 40%, 27%)
HSB
hsb(263, 57%, 37%)
CMYK
cmyk(35%, 57%, 0%, 63%)
Oklch
oklch(33.5% 0.093 299.3)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#270030

Royal Purple · Black · Dark Purple

HEX
#270030
RGB
rgb(39, 0, 48)
HSL
hsl(289, 100%, 9%)
HSB
hsb(289, 100%, 19%)
CMYK
cmyk(19%, 100%, 0%, 81%)
Oklch
oklch(19.9% 0.096 319.4)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAD55D
695DD5

Analogous

D5A55D
CAD55D
8DD55D

Triadic

CAD55D
5DC9D5
D55DC9

Split-Comp.

CAD55D
5D8DD5
A55DD5

Tetradic

CAD55D
5DD5A5
695DD5
D55D8D

Contrast Matrix WCAG 2.1 Contrast

CAD55D
8F9376
615A77
3E295F
270030
—
2.0
Fail
4.1
AA Large
7.8
AAA
11.7
AAA
2.0
Fail
—
2.0
Fail
3.9
AA Large
5.8
AA
4.1
AA Large
2.0
Fail
—
1.9
Fail
2.9
Fail
7.8
AAA
3.9
AA Large
1.9
Fail
—
1.5
Fail
11.7
AAA
5.8
AA
2.9
Fail
1.5
Fail
—
White BG
1.6Fail
3.2AA Large
6.5AA
12.4AAA
18.6AAA
Black BG
13.2AAA
6.6AA
3.2AA Large
1.7Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCF7A
91917D
5E5E70
353552
161624

Deuteranopia

CECD81
91907F
5E5F6E
36384F
181B22

Tritanopia

CB9196
8F8384
616A69
3D4845
251B19

Achromatopsia

C4C4C4
8E8E8E
5F5F5F
353535
111111

Shades & Tints Shades & Tints

#CAD55D

Dark
Light

#8F9376

Dark
Light

#615A77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cad55d;
  --color-2: #8f9376;
  --color-3: #615a77;
  --color-4: #3e295f;
  --color-5: #270030;
}

SCSS

$color-1: #cad55d;
$color-2: #8f9376;
$color-3: #615a77;
$color-4: #3e295f;
$color-5: #270030;

TAILWIND

colors: {
  'brand-1': '#cad55d',
  'brand-2': '#8f9376',
  'brand-3': '#615a77',
  'brand-4': '#3e295f',
  'brand-5': '#270030',
}

RGB Array

[202, 213, 93], [143, 147, 118], [97, 90, 119], [62, 41, 95], [39, 0, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #CAD55D, #8F9376, #615A77, #3E295F, #270030 is ideal for: tech websites, dark mode UIs, game UIs, 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: #cad55d; --color-2: #8f9376; --color-3: #615a77; --color-4: #3e295f; --color-5: #270030. 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 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