Color collection
Sunset Color Palettes
Vivid sunset palettes for landing pages, creator brands, campaigns, and social cards.
SunsetVividLanding
Best for: creator brands, social graphics, and warm campaign pagesExport: CSS, Tailwind, JSON, SVGPreview: dashboard, landing, mobile UI
Sunset 6Sunset / Vivid / LandingQuality 98Primary
#1E81EBAccent#F29736Surface#EBEEF4Text#121821Support#EC65A6Sunset 7Sunset / Vivid / LandingQuality 98Primary#1E47EBAccent#F236A0Surface#EBECF4Text#121421Support#EC6580Sunset 8Sunset / Vivid / LandingQuality 95Primary#2F1EEBAccent#F23649Surface#EDEBF4Text#151221Support#EC7065Sunset 9Sunset / Vivid / LandingQuality 95Primary#691EEBAccent#F27B36Surface#F0EBF4Text#191221Support#EC9665Sunset 1Sunset / Vivid / LandingQuality 94Primary#1EEB32Accent#36F2ADSurface#EBF4EDText#122115Support#7265ECSunset 2Sunset / Vivid / LandingQuality 94Primary#1EEB6DAccent#36DFF2Surface#EBF4F0Text#122119Support#9965ECHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for creator brands, social graphics, and warm campaign pages. Let orange and pink carry emotion while blue or teal restores contrast.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
UI previewPrimary
Card
Button
Accent
CSS Variables
:root {
--primary: #1E81EB;
--accent: #F29736;
--surface: #EBEEF4;
--text: #121821;
--support: #EC65A6;
}Text / Surface contrast: 15.33:1
FAQ
Where should I use sunset color palettes?
These palettes are designed for creator brands, social graphics, and warm campaign pages.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Let orange and pink carry emotion while blue or teal restores contrast.