← Back to Editor

#8ACDC5 · #C3A620 · #D58937 · #A6755B · #725343

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8ACDC5

Jade · SkyBlue · Lake Green

HEX
#8ACDC5
RGB
rgb(138, 205, 197)
HSL
hsl(173, 40%, 67%)
HSB
hsb(173, 33%, 80%)
CMYK
cmyk(33%, 0%, 4%, 20%)
Oklch
oklch(80.1% 0.069 186.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#C3A620

Ochre · GoldenRod · Honey Gold

HEX
#C3A620
RGB
rgb(195, 166, 32)
HSL
hsl(49, 72%, 45%)
HSB
hsb(49, 84%, 76%)
CMYK
cmyk(0%, 15%, 84%, 24%)
Oklch
oklch(73.0% 0.142 95.6)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#D58937

Ginger · GoldenRod · Warm Sun

HEX
#D58937
RGB
rgb(213, 137, 55)
HSL
hsl(31, 65%, 53%)
HSB
hsb(31, 74%, 84%)
CMYK
cmyk(0%, 36%, 74%, 16%)
Oklch
oklch(69.4% 0.133 64.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#A6755B

Tangerine · Gray · Amber Brown

HEX
#A6755B
RGB
rgb(166, 117, 91)
HSL
hsl(21, 30%, 50%)
HSB
hsb(21, 45%, 65%)
CMYK
cmyk(0%, 30%, 45%, 35%)
Oklch
oklch(60.6% 0.073 48.9)

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

#725343

Tangerine · DarkOliveGreen · Amber Brown

HEX
#725343
RGB
rgb(114, 83, 67)
HSL
hsl(20, 26%, 35%)
HSB
hsb(20, 41%, 45%)
CMYK
cmyk(0%, 27%, 41%, 55%)
Oklch
oklch(47.1% 0.049 48.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8ACDC5
CD8991

Analogous

89CDA3
8ACDC5
89B3CD

Triadic

8ACDC5
C589CD
CDC589

Split-Comp.

8ACDC5
CD89B3
CDA389

Tetradic

8ACDC5
A389CD
CD8991
B3CD89

Contrast Matrix WCAG 2.1 Contrast

8ACDC5
C3A620
D58937
A6755B
725343
—
1.3
Fail
1.6
Fail
2.2
Fail
3.8
AA Large
1.3
Fail
—
1.2
Fail
1.7
Fail
2.9
Fail
1.6
Fail
1.2
Fail
—
1.4
Fail
2.5
Fail
2.2
Fail
1.7
Fail
1.4
Fail
—
1.8
Fail
3.8
AA Large
2.9
Fail
2.5
Fail
1.8
Fail
—
White BG
1.8Fail
2.4Fail
2.8Fail
3.9AA Large
6.9AA
Black BG
11.6AAA
8.8AAA
7.5AAA
5.3AA
3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A8C7
B6B640
B4B34B
919061
656447

Deuteranopia

A39EC7
B8BA48
B9BE50
949763
666948

Tritanopia

8DC8C9
C25A60
D15B5E
A46667
704A4B

Achromatopsia

B8B8B8
9F9F9F
969696
818181
5A5A5A

Shades & Tints Shades & Tints

#8ACDC5

Dark
Light

#C3A620

Dark
Light

#D58937

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8acdc5;
  --color-2: #c3a620;
  --color-3: #d58937;
  --color-4: #a6755b;
  --color-5: #725343;
}

SCSS

$color-1: #8acdc5;
$color-2: #c3a620;
$color-3: #d58937;
$color-4: #a6755b;
$color-5: #725343;

TAILWIND

colors: {
  'brand-1': '#8acdc5',
  'brand-2': '#c3a620',
  'brand-3': '#d58937',
  'brand-4': '#a6755b',
  'brand-5': '#725343',
}

RGB Array

[138, 205, 197], [195, 166, 32], [213, 137, 55], [166, 117, 91], [114, 83, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #8ACDC5, #C3A620, #D58937, #A6755B, #725343 is ideal for: corporate websites, product showcases, portfolios. 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: #8acdc5; --color-2: #c3a620; --color-3: #d58937; --color-4: #a6755b; --color-5: #725343. 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 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