← Back to Editor

#FF488A · #CF5B85 · #FF314C · #FC9581 · #FDDE66

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 App

Color Details Color Details

#FF488A

Rouge · DeepPink · Rose Pink

HEX
#FF488A
RGB
rgb(255, 72, 138)
HSL
hsl(338, 100%, 64%)
HSB
hsb(338, 72%, 100%)
CMYK
cmyk(0%, 72%, 46%, 0%)
Oklch
oklch(68.1% 0.222 3.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#CF5B85

Dark Violet · LightCoral · Rose Pink

HEX
#CF5B85
RGB
rgb(207, 91, 133)
HSL
hsl(338, 55%, 58%)
HSB
hsb(338, 56%, 81%)
CMYK
cmyk(0%, 56%, 36%, 19%)
Oklch
oklch(62.8% 0.152 359.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#FF314C

Vermilion · Crimson · Passion Red

HEX
#FF314C
RGB
rgb(255, 49, 76)
HSL
hsl(352, 100%, 60%)
HSB
hsb(352, 81%, 100%)
CMYK
cmyk(0%, 81%, 70%, 0%)
Oklch
oklch(65.1% 0.236 20.9)

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

#FC9581

Peach Pink · LightSalmon · Coral Red

HEX
#FC9581
RGB
rgb(252, 149, 129)
HSL
hsl(10, 95%, 75%)
HSB
hsb(10, 49%, 99%)
CMYK
cmyk(0%, 41%, 49%, 1%)
Oklch
oklch(77.3% 0.128 31.9)

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

#FDDE66

Ginger · Khaki · Sunflower

HEX
#FDDE66
RGB
rgb(253, 222, 102)
HSL
hsl(48, 97%, 70%)
HSB
hsb(48, 60%, 99%)
CMYK
cmyk(0%, 12%, 60%, 1%)
Oklch
oklch(90.4% 0.142 94.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF488A
47FFBC

Analogous

FF47E7
FF488A
FF6047

Triadic

FF488A
8BFF47
478BFF

Split-Comp.

FF488A
47FF60
47E7FF

Tetradic

FF488A
E7FF47
47FFBC
6047FF

Contrast Matrix WCAG 2.1 Contrast

FF488A
CF5B85
FF314C
FC9581
FDDE66
—
1.2
Fail
1.1
Fail
1.5
Fail
2.4
Fail
1.2
Fail
—
1.1
Fail
1.8
Fail
2.9
Fail
1.1
Fail
1.1
Fail
—
1.7
Fail
2.7
Fail
1.5
Fail
1.8
Fail
1.7
Fail
—
1.6
Fail
2.4
Fail
2.9
Fail
2.7
Fail
1.6
Fail
—
White BG
3.2AA Large
3.8AA Large
3.6AA Large
2.2Fail
1.3Fail
Black BG
6.5AA
5.5AA
5.8AA
9.8AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0AE7A
9D9C7B
A6A445
CFCE86
F0EF83

Deuteranopia

BAC876
A4AC78
B2C144
D5DD87
F1F48A

Tritanopia

F66D6B
C97371
F5403F
F78A8B
FB9A9F

Achromatopsia

868686
828282
727272
B2B2B2
DADADA

Shades & Tints Shades & Tints

#FF488A

Dark
Light

#CF5B85

Dark
Light

#FF314C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff488a;
  --color-2: #cf5b85;
  --color-3: #ff314c;
  --color-4: #fc9581;
  --color-5: #fdde66;
}

SCSS

$color-1: #ff488a;
$color-2: #cf5b85;
$color-3: #ff314c;
$color-4: #fc9581;
$color-5: #fdde66;

TAILWIND

colors: {
  'brand-1': '#ff488a',
  'brand-2': '#cf5b85',
  'brand-3': '#ff314c',
  'brand-4': '#fc9581',
  'brand-5': '#fdde66',
}

RGB Array

[255, 72, 138], [207, 91, 133], [255, 49, 76], [252, 149, 129], [253, 222, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #FF488A, #CF5B85, #FF314C, #FC9581, #FDDE66 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. 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: #ff488a; --color-2: #cf5b85; --color-3: #ff314c; --color-4: #fc9581; --color-5: #fdde66. 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. 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