Sunset Drive color palette
Windows down, sun low, and the sky going through coral #FF6B6B, peach orange, bubblegum pink, raspberry #C44569 and a dusky violet, #574B90. These blend smoothly into each other, which is why they make such good gradients. The violet is the only shade dark enough for text. Road-trip blogs and indie music covers are good places to try it.
Sunset Drive palette in use
On a white page, use #574B90 for text and headings and #FF6B6B for buttons. Run #FF8E53, #FF6B9D and #C44569 together as a gradient for hero sections and cover art.
This pair measures 9.24:1, so it works for body text too. The button uses #FF6B9D with black text.
ButtonGood for
- Road-trip blog
- Indie music cover
- Car rental promo
- Summer fashion campaign
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#574B90 | #FF8E53 | 3.28:1 | AA large |
Sunset Drive palette as code
CSS variables
:root {
--sunset-drive-1: #FF6B6B;
--sunset-drive-2: #FF8E53;
--sunset-drive-3: #FF6B9D;
--sunset-drive-4: #C44569;
--sunset-drive-5: #574B90;
}Tailwind v4
@theme {
--color-sunset-drive-1: #FF6B6B;
--color-sunset-drive-2: #FF8E53;
--color-sunset-drive-3: #FF6B9D;
--color-sunset-drive-4: #C44569;
--color-sunset-drive-5: #574B90;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'sunset-drive': {
100: '#FF6B6B',
200: '#FF8E53',
300: '#FF6B9D',
400: '#C44569',
500: '#574B90',
},SCSS
$sunset-drive-1: #FF6B6B;
$sunset-drive-2: #FF8E53;
$sunset-drive-3: #FF6B9D;
$sunset-drive-4: #C44569;
$sunset-drive-5: #574B90;JSON
["#FF6B6B","#FF8E53","#FF6B9D","#C44569","#574B90"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.