← Back to Editor

#D67854 · #C5716B · #A67676 · #887E81 · #728384

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

#D67854

Tangerine · Coral · Warm Sun

HEX
#D67854
RGB
rgb(214, 120, 84)
HSL
hsl(17, 61%, 58%)
HSB
hsb(17, 61%, 84%)
CMYK
cmyk(0%, 44%, 61%, 16%)
Oklch
oklch(67.0% 0.128 41.4)

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

#C5716B

Crimson · LightCoral · Passion Red

HEX
#C5716B
RGB
rgb(197, 113, 107)
HSL
hsl(4, 44%, 60%)
HSB
hsb(4, 46%, 77%)
CMYK
cmyk(0%, 43%, 46%, 23%)
Oklch
oklch(64.0% 0.107 24.8)

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

#A67676

Crimson · Gray · Passion Red

HEX
#A67676
RGB
rgb(166, 118, 118)
HSL
hsl(0, 21%, 56%)
HSB
hsb(0, 29%, 65%)
CMYK
cmyk(0%, 29%, 29%, 35%)
Oklch
oklch(61.4% 0.061 19.0)

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

#887E81

Ash · Gray · Warm Gray

HEX
#887E81
RGB
rgb(136, 126, 129)
HSL
hsl(342, 4%, 51%)
HSB
hsb(342, 7%, 53%)
CMYK
cmyk(0%, 7%, 5%, 47%)
Oklch
oklch(60.3% 0.013 357.3)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#728384

Ink Gray · SlateGray · Warm Gray

HEX
#728384
RGB
rgb(114, 131, 132)
HSL
hsl(183, 7%, 48%)
HSB
hsb(183, 14%, 52%)
CMYK
cmyk(14%, 1%, 0%, 48%)
Oklch
oklch(59.7% 0.020 201.0)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D67854
53B0D5

Analogous

D5536F
D67854
D5B953

Triadic

D67854
53D578
7853D5

Split-Comp.

D67854
53D5B9
536FD5

Tetradic

D67854
6FD553
53B0D5
B953D5

Contrast Matrix WCAG 2.1 Contrast

D67854
C5716B
A67676
887E81
728384
—
1.1
Fail
1.2
Fail
1.2
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.0
Fail
1.2
Fail
1.1
Fail
1.0
Fail
—
1.0
Fail
1.3
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
White BG
3.1AA Large
3.5AA Large
3.8AA Large
3.9AA Large
4.0AA Large
Black BG
6.7AA
5.9AA
5.5AA
5.3AA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAC5D
A1A06C
919176
848480
797A84

Deuteranopia

B3BA5F
A6AC6D
949876
848580
787784

Tritanopia

D16465
C16E6E
A47676
888080
738484

Achromatopsia

909090
898989
848484
818181
7E7E7E

Shades & Tints Shades & Tints

#D67854

Dark
Light

#C5716B

Dark
Light

#A67676

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d67854;
  --color-2: #c5716b;
  --color-3: #a67676;
  --color-4: #887e81;
  --color-5: #728384;
}

SCSS

$color-1: #d67854;
$color-2: #c5716b;
$color-3: #a67676;
$color-4: #887e81;
$color-5: #728384;

TAILWIND

colors: {
  'brand-1': '#d67854',
  'brand-2': '#c5716b',
  'brand-3': '#a67676',
  'brand-4': '#887e81',
  'brand-5': '#728384',
}

RGB Array

[214, 120, 84], [197, 113, 107], [166, 118, 118], [136, 126, 129], [114, 131, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #D67854, #C5716B, #A67676, #887E81, #728384 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d67854; --color-2: #c5716b; --color-3: #a67676; --color-4: #887e81; --color-5: #728384. 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. Restrained colors convey professionalism and trust. 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