Sunset Warm
A warm sunset palette with graduating warm tones from gold to rose. Captures the magical colors of golden hour.
Color Breakdown
Role
background
Name
Zinc 50
Hex
#fafafa
Tailwind
bg-zinc-50
Role
surface
Name
White
Hex
#ffffff
Tailwind
bg-white
Role
primary
Name
Orange 500
Hex
#f97316
Tailwind
text-orange-500
Role
secondary
Name
Amber 500
Hex
#f59e0b
Tailwind
text-amber-500
Role
accent
Name
Rose 500
Hex
#f43f5e
Tailwind
bg-rose-500
Live Preview
Welcome Back
This is a live preview of the Sunset Warm color scheme applied to a sample card component. See how the colors work together in a realistic UI context.
Design Rationale
“Orange and amber recreate the golden warmth of a setting sun. Rose accents capture the deeper hues as the sky transitions to dusk.
Use Cases
CSS Variables
:root {
--background: #fafafa;
--surface: #ffffff;
--primary: #f97316;
--secondary: #f59e0b;
--accent: #f43f5e;
}Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'sunset-warm': {
'background': '#fafafa', // bg-zinc-50
'surface': '#ffffff', // bg-white
'primary': '#f97316', // text-orange-500
'secondary': '#f59e0b', // text-amber-500
'accent': '#f43f5e', // bg-rose-500
},
},
},
},
};Related Color Schemes
Ecommerce Warm
A warm and inviting ecommerce palette that encourages browsing and purchasing. Soft backgrounds with orange accents create urgency without pressure.
Nonprofit Warm
A warm and compassionate nonprofit palette that builds emotional connection. Soft greens and amber tones inspire hope and generosity.
Minimalist Light
A clean minimalist palette with abundant white space and subtle gray accents. Less is more with this restrained, elegant approach.
Minimalist Dark
A dark minimalist palette with refined grays and subtle accent color. Achieves elegance through restraint on a dark canvas.
Brutalist Raw
A raw brutalist palette with stark black-and-white contrast and no softening. Embraces imperfection and confrontational design.
Brutalist Colorful
A colorful brutalist palette that clashes bold hues intentionally. Breaks design rules with unapologetic vibrancy and contrast.
Build with This Scheme
Use our palette generator to customize and extend this color scheme for your project.
Open Palette Generator