Sunset color palette
Sunset palettes span a wider hue range than most mood palettes, from violet through coral to gold, because an actual sunset does the same across the sky. This set holds that range together with matched saturation so it reads as a gradient family rather than four unrelated accent colors.
Updated 2026-07-15
- Dusk PurpleText#2B1B4D
- Twilight VioletPrimary#6D2E7A
- Magenta BlushAccent#C13E82
- CoralHighlight#F0704B
- Gold FlareAccent 2#FBB03B
- GlowBackground#FFEBC7
Where this palette works
Hero sections and marketing gradients
The hue range is built for gradient backgrounds, dusk purple through gold reads as a natural sky gradient without extra design work.
Music, entertainment, and creative tools
A wide, saturated hue range signals a more expressive, less corporate product register.
Evening or golden-hour photography brands
The palette matches the actual color temperature shift of golden hour, useful for photo and travel products.
Accessible pairings
Dusk purple is dark enough to serve as the palette's text color, reaching AAA against gold flare and glow. Everything lighter than twilight violet needs dusk purple behind or in front of it to stay legible.
Use these tokens
Copy as CSS custom properties or a Tailwind v4 @theme block.
:root {
--palette-text: #2B1B4D; /* Dusk Purple */
--palette-primary: #6D2E7A; /* Twilight Violet */
--palette-accent: #C13E82; /* Magenta Blush */
--palette-highlight: #F0704B; /* Coral */
--palette-accent-2: #FBB03B; /* Gold Flare */
--palette-background: #FFEBC7; /* Glow */
}Frequently asked questions
Related palettes
Warm palette
A warm color palette built from burnt sienna, amber, and brick tones, with hex codes, accessible text pairings, and export-ready CSS variables.
Jewel tone palette
A jewel tone color palette built from emerald, sapphire, ruby, and amethyst, with hex codes, accessible text pairings, and export-ready CSS variables.
Neon palette
A neon color palette built from neon green, electric magenta, and cyber cyan on a near-black background, with hex codes and accessible pairings.
Build on this palette
Generate a full shade scale and export to Tailwind, shadcn, or Figma Variables.
Generate a palette