← Back to Editor

#574C70 · #FFA8B0 · #FFD3B8 · #F5E9CE · #D8E6ED

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#574C70

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#574C70
RGB
rgb(87, 76, 112)
HSL
hsl(258, 19%, 37%)
HSB
hsb(258, 32%, 44%)
CMYK
cmyk(22%, 32%, 0%, 56%)
Oklch
oklch(44.2% 0.059 298.0)

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

#FFA8B0

Peach Pink · LightPink · Cherry Blossom

HEX
#FFA8B0
RGB
rgb(255, 168, 176)
HSL
hsl(354, 100%, 83%)
HSB
hsb(354, 34%, 100%)
CMYK
cmyk(0%, 34%, 31%, 0%)
Oklch
oklch(81.9% 0.103 13.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#FFD3B8

Apricot · Wheat · Peach Orange

HEX
#FFD3B8
RGB
rgb(255, 211, 184)
HSL
hsl(23, 100%, 86%)
HSB
hsb(23, 28%, 100%)
CMYK
cmyk(0%, 17%, 28%, 0%)
Oklch
oklch(89.8% 0.061 53.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F5E9CE

Goose Yellow · Bisque · Lemon Cream

HEX
#F5E9CE
RGB
rgb(245, 233, 206)
HSL
hsl(42, 66%, 88%)
HSB
hsb(42, 16%, 96%)
CMYK
cmyk(0%, 5%, 16%, 4%)
Oklch
oklch(93.7% 0.038 86.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D8E6ED

Sky Blue · Lavender · Sky Blue

HEX
#D8E6ED
RGB
rgb(216, 230, 237)
HSL
hsl(200, 37%, 89%)
HSB
hsb(200, 9%, 93%)
CMYK
cmyk(9%, 3%, 0%, 7%)
Oklch
oklch(91.6% 0.018 229.0)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

574C70
66704C

Analogous

4C5470
574C70
694C70

Triadic

574C70
70574C
4C7057

Split-Comp.

574C70
70694C
54704C

Tetradic

574C70
704C54
66704C
4C7069

Contrast Matrix WCAG 2.1 Contrast

574C70
FFA8B0
FFD3B8
F5E9CE
D8E6ED
—
4.3
AA Large
5.7
AA
6.5
AA
6.2
AA
4.3
AA Large
—
1.3
Fail
1.5
Fail
1.4
Fail
5.7
AA
1.3
Fail
—
1.1
Fail
1.1
Fail
6.5
AA
1.5
Fail
1.1
Fail
—
1.1
Fail
6.2
AA
1.4
Fail
1.1
Fail
1.1
Fail
—
White BG
7.9AAA
1.8Fail
1.4Fail
1.2Fail
1.3Fail
Black BG
2.7Fail
11.5AAA
15.3AAA
17.4AAA
16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

525267
D9D9AE
ECECBF
F0F0D5
DEDEEB

Deuteranopia

535465
DEE5AE
EFF2C0
F1F1D6
DDDCEB

Tritanopia

56605F
FBADAC
FDC4C5
F4DADB
D9EAEA

Achromatopsia

535353
C3C3C3
DDDDDD
EAEAEA
E3E3E3

Shades & Tints Shades & Tints

#574C70

Dark
Light

#FFA8B0

Dark
Light

#FFD3B8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #574c70;
  --color-2: #ffa8b0;
  --color-3: #ffd3b8;
  --color-4: #f5e9ce;
  --color-5: #d8e6ed;
}

SCSS

$color-1: #574c70;
$color-2: #ffa8b0;
$color-3: #ffd3b8;
$color-4: #f5e9ce;
$color-5: #d8e6ed;

TAILWIND

colors: {
  'brand-1': '#574c70',
  'brand-2': '#ffa8b0',
  'brand-3': '#ffd3b8',
  'brand-4': '#f5e9ce',
  'brand-5': '#d8e6ed',
}

RGB Array

[87, 76, 112], [255, 168, 176], [255, 211, 184], [245, 233, 206], [216, 230, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #574C70, #FFA8B0, #FFD3B8, #F5E9CE, #D8E6ED is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #574c70; --color-2: #ffa8b0; --color-3: #ffd3b8; --color-4: #f5e9ce; --color-5: #d8e6ed. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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