This generator builds warm-to-cool sunset palettes that suit lifestyle photography apps, romantic brand identities, and any design that wants the feel of golden hour. Colors are computed in HSL and converted to hex, giving you codes you can drop directly into CSS, Figma, or any design tool.
How sunset palettes are built
A real sunset sky moves through a sequence of color shifts as the sun descends: warm yellow and gold near the horizon, orange and pink in the lower atmosphere, then deepening to red-violet and indigo as your eye travels upward. The generator replicates this physics through a controlled HSL ramp.
The process:
- A warm start hue (in the yellow-orange range, roughly 20–40° on the color wheel) is chosen based on the mood you select, with a small random jitter so each generation is slightly different.
- A cool end hue (in the purple-indigo range, roughly 260–290°) forms the other anchor.
- Five swatches are sampled at equal intervals along the ramp from start to end.
- As the palette moves toward the cool end, lightness drops and saturation adjusts to simulate how sky color deepens and saturates from horizon to zenith.
Everything runs in HSL (hue, saturation, lightness) — the color model that maps most naturally to human perception — and converts to hex for output.
The three moods compared
| Mood | Start hue | End hue | Character |
|---|---|---|---|
| Golden hour | Gold / orange | Deep purple | Classic warm-to-violet sunset sky |
| Dusk | Red-orange | Indigo | Moodier, darker transition |
| Ocean sunset | Amber / coral | Deep blue | Cooler water-reflected palette |
Each mood represents a different hour of the day and a different atmospheric quality. Dusk palettes tend to be richer in magenta; ocean sunsets carry more blue weight on the cool end.
How to use these palettes
Photography and photo editing apps. Warm-to-cool gradients suit hero images, overlays, and color-grading presets for portraits, travel, and food photography. Use the warm swatches as highlight tones and the cool swatches for shadow tones.
Brand identities. Brands in wellness, romance, travel, and hospitality often lean on sunset tones to signal warmth and aspiration. A five-stop gradient gives you enough range to cover primary brand color, accent, background, and text variants.
CSS gradients. The five hex codes drop straight into a linear-gradient(). For example:
background: linear-gradient(135deg, #FFB347, #FF7F50, #C44569, #8B5CF6, #3B1F7A);Contrast warning. Warm mid-tones — oranges, pinks — are notoriously hard to pair with readable text. Always check your contrast ratio against WCAG 2.1 AA (4.5:1 for normal text) before placing copy on any swatch. Dark navy or near-black text tends to work better than white on the warm end of this palette.
Because the endpoints are jittered on each generation, copy the hex codes you want immediately — regenerating produces a fresh variation.