← Back to Editor

#573F49 · #734557 · #F77839 · #F7A839 · #FCC27E

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#573F49

Dark Violet · DarkSlateGray · Camellia

HEX
#573F49
RGB
rgb(87, 63, 73)
HSL
hsl(335, 16%, 29%)
HSB
hsb(335, 28%, 34%)
CMYK
cmyk(0%, 28%, 16%, 66%)
Oklch
oklch(39.8% 0.037 352.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#734557

Dark Violet · DimGray · Camellia

HEX
#734557
RGB
rgb(115, 69, 87)
HSL
hsl(337, 25%, 36%)
HSB
hsb(337, 40%, 45%)
CMYK
cmyk(0%, 40%, 24%, 55%)
Oklch
oklch(45.0% 0.068 355.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#F77839

Tangerine · Coral · Warm Sun

HEX
#F77839
RGB
rgb(247, 120, 57)
HSL
hsl(20, 92%, 60%)
HSB
hsb(20, 77%, 97%)
CMYK
cmyk(0%, 51%, 77%, 3%)
Oklch
oklch(71.1% 0.173 44.5)

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

#F7A839

Ginger · GoldenRod · Warm Sun

HEX
#F7A839
RGB
rgb(247, 168, 57)
HSL
hsl(35, 92%, 60%)
HSB
hsb(35, 77%, 97%)
CMYK
cmyk(0%, 32%, 77%, 3%)
Oklch
oklch(79.1% 0.151 70.7)

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

#FCC27E

Goose Yellow · BurlyWood · Warm Sun

HEX
#FCC27E
RGB
rgb(252, 194, 126)
HSL
hsl(32, 95%, 74%)
HSB
hsb(32, 50%, 99%)
CMYK
cmyk(0%, 23%, 50%, 1%)
Oklch
oklch(85.2% 0.108 70.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

573F49
3E564C

Analogous

563E54
573F49
56403E

Triadic

573F49
48563E
3E4856

Split-Comp.

573F49
3E5640
3E5456

Tetradic

573F49
54563E
3E564C
403E56

Contrast Matrix WCAG 2.1 Contrast

573F49
734557
F77839
F7A839
FCC27E
—
1.2
Fail
3.5
AA Large
4.8
AA
5.9
AA
1.2
Fail
—
2.8
Fail
3.9
AA Large
4.8
AA
3.5
AA Large
2.8
Fail
—
1.4
Fail
1.7
Fail
4.8
AA
3.9
AA Large
1.4
Fail
—
1.2
Fail
5.9
AA
4.8
AA
1.7
Fail
1.2
Fail
—
White BG
9.5AAA
7.7AAA
2.7Fail
2.0Fail
1.6Fail
Black BG
2.2Fail
2.7Fail
7.7AAA
10.6AAA
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4C47
5F5F53
C0BF48
D5D454
E3E28E

Deuteranopia

4E5046
626552
C7D14C
D9DF5A
E6EB92

Tritanopia

564544
714F4E
F15457
F3696E
F99B9E

Achromatopsia

474747
555555
979797
B3B3B3
CCCCCC

Shades & Tints Shades & Tints

#573F49

Dark
Light

#734557

Dark
Light

#F77839

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #573f49;
  --color-2: #734557;
  --color-3: #f77839;
  --color-4: #f7a839;
  --color-5: #fcc27e;
}

SCSS

$color-1: #573f49;
$color-2: #734557;
$color-3: #f77839;
$color-4: #f7a839;
$color-5: #fcc27e;

TAILWIND

colors: {
  'brand-1': '#573f49',
  'brand-2': '#734557',
  'brand-3': '#f77839',
  'brand-4': '#f7a839',
  'brand-5': '#fcc27e',
}

RGB Array

[87, 63, 73], [115, 69, 87], [247, 120, 57], [247, 168, 57], [252, 194, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #573F49, #734557, #F77839, #F7A839, #FCC27E is ideal for: social media posters, mobile apps, e-commerce promos, 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: #573f49; --color-2: #734557; --color-3: #f77839; --color-4: #f7a839; --color-5: #fcc27e. 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. 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