Sunset palettes run from a dusk color through red or rose to amber and a pale glow, usually in that order. Keep the order when you use them; it tells you where text can go and where it cannot.
Where sunset palettes work
Travel, hotel and destination hero sections
Summer festival, music and nightlife posters
Photography portfolios and editorial features about places
Read a sunset palette from the top of the sky down
About 72% of the swatches in these 97 palettes are red, orange or magenta, and only one is green. Many palettes are ordered like the sky itself: a dusk color at the top, rose or red in the middle, amber near the horizon and a pale glow at the bottom. Two variants recur.
Golden hour: navy into hot red, amber and yellow, as in #293462, #D61C4E, #FEB139, #FFF80A.
Afterglow: plum into mauve, rose and salmon, as in #513252, #7A4069, #CA4E79, #FFC18E.
Sunset without the dark end: #F76E11, #FF9F45, #FFBC80, #FC4F4F, which needs an outside text color.
Which part of the sky carries the text
The two ends of a sunset palette are easy; the middle is where contrast fails.
White on plum #7A4069 is 7.60:1, and on #513252 10.89:1. Use the dark end for headlines and navigation.
White on rose #CA4E79 is 4.31:1, so it passes only for large text (24px, or about 19px bold).
White on amber #FEB139 is 1.82:1. Use navy #293462 instead, which measures 6.56:1.
Salmon #FFC18E on plum #513252 is 6.88:1 in either direction, a good pairing for buttons on the dark end.
Worked example: a travel hero from the afterglow palette
Run the gradient top to bottom so the navigation and headline sit on plum, and let the warm colors settle behind the photo or the lower half of the section. Keep the copy in roughly the top third, where white text stays above 7:1.
css
.hero {
background: linear-gradient(180deg,
#513252 0%, #7a4069 35%, #ca4e79 70%, #ffc18e 100%);
color: #ffffff; /* keep text in the top ~35% */
}
.hero .cta { background: #ffc18e; color: #513252; } /* 6.88:1 */
Pairing the colors
Anchor the layout on the dark end, navy #293462 or plum #513252, and use the warm swatches as atmosphere or a single button color. A pale peach or sand from the light end can serve as a daytime page background.
Contrast and readability
Rose and red midtones sit near the 4.5:1 line. White on #D61C4E is 5.08:1 and passes; white on #CA4E79 is 4.31:1 and does not. Check every warm swatch that carries text on its own.
Questions
What colors are in a sunset palette?
Usually a dark dusk color (navy #293462 or plum #513252), a red or rose (#D61C4E, #CA4E79), an orange or amber (#FEB139, #F77E21) and a pale yellow or peach for the glow (#FFF80A, #FFC18E). The order matters: dark at one end, light at the other.
Why does my sunset gradient look muddy in the middle?
It usually happens when amber or orange blends straight into navy or blue. Halfway between those hues, sRGB blending passes through a grayish brown. Add the rose or red stop from the palette between them, or set the gradient to interpolate in oklch.