← Back to Editor

#565263 · #A4605D · #EA735F · #DF5B57 · #BA5658

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

#565263

Deep Indigo · DimGray · Charcoal

HEX
#565263
RGB
rgb(86, 82, 99)
HSL
hsl(254, 9%, 35%)
HSB
hsb(254, 17%, 39%)
CMYK
cmyk(13%, 17%, 0%, 61%)
Oklch
oklch(44.9% 0.028 296.0)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#A4605D

Crimson · Sienna · Passion Red

HEX
#A4605D
RGB
rgb(164, 96, 93)
HSL
hsl(3, 28%, 50%)
HSB
hsb(3, 43%, 64%)
CMYK
cmyk(0%, 41%, 43%, 36%)
Oklch
oklch(56.5% 0.089 23.0)

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

#EA735F

Peach Pink · Salmon · Coral Red

HEX
#EA735F
RGB
rgb(234, 115, 95)
HSL
hsl(9, 77%, 65%)
HSB
hsb(9, 59%, 92%)
CMYK
cmyk(0%, 51%, 59%, 8%)
Oklch
oklch(69.1% 0.151 31.1)

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

#DF5B57

Peach Pink · Tomato · Coral Red

HEX
#DF5B57
RGB
rgb(223, 91, 87)
HSL
hsl(2, 68%, 61%)
HSB
hsb(2, 61%, 87%)
CMYK
cmyk(0%, 59%, 61%, 13%)
Oklch
oklch(64.0% 0.166 24.7)

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

#BA5658

Crimson · Sienna · Passion Red

HEX
#BA5658
RGB
rgb(186, 86, 88)
HSL
hsl(359, 42%, 53%)
HSB
hsb(359, 54%, 73%)
CMYK
cmyk(0%, 54%, 53%, 27%)
Oklch
oklch(57.8% 0.130 20.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

565263
5E6151

Analogous

515661
565263
5D5161

Triadic

565263
615551
516155

Split-Comp.

565263
615D51
566151

Tetradic

565263
615156
5E6151
51615D

Contrast Matrix WCAG 2.1 Contrast

565263
A4605D
EA735F
DF5B57
BA5658
—
1.6
Fail
2.6
Fail
2.1
Fail
1.6
Fail
1.6
Fail
—
1.6
Fail
1.3
Fail
1.0
Fail
2.6
Fail
1.6
Fail
—
1.2
Fail
1.6
Fail
2.1
Fail
1.3
Fail
1.2
Fail
—
1.3
Fail
1.6
Fail
1.0
Fail
1.6
Fail
1.3
Fail
—
White BG
7.5AAA
4.8AA
3.0Fail
3.6AA Large
4.6AA
Black BG
2.8Fail
4.4AA Large
7.1AAA
5.8AA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

54545F
87865E
B6B564
A6A558
8F8E58

Deuteranopia

55555E
8B905E
BDC665
AEB758
959C57

Tritanopia

565C5B
A15E5E
E46869
D85959
B55757

Achromatopsia

555555
747474
949494
828282
747474

Shades & Tints Shades & Tints

#565263

Dark
Light

#A4605D

Dark
Light

#EA735F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #565263;
  --color-2: #a4605d;
  --color-3: #ea735f;
  --color-4: #df5b57;
  --color-5: #ba5658;
}

SCSS

$color-1: #565263;
$color-2: #a4605d;
$color-3: #ea735f;
$color-4: #df5b57;
$color-5: #ba5658;

TAILWIND

colors: {
  'brand-1': '#565263',
  'brand-2': '#a4605d',
  'brand-3': '#ea735f',
  'brand-4': '#df5b57',
  'brand-5': '#ba5658',
}

RGB Array

[86, 82, 99], [164, 96, 93], [234, 115, 95], [223, 91, 87], [186, 86, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #565263, #A4605D, #EA735F, #DF5B57, #BA5658 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: #565263; --color-2: #a4605d; --color-3: #ea735f; --color-4: #df5b57; --color-5: #ba5658. 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