Gradient Color Palette
A gradient palette steps evenly from the darkest colour to the lightest. It is the direct starting point for a CSS `linear-gradient` or a design-system colour scale.
Example palette
500#1B1B3A
400#3D348B
300#7678ED
200#B5B2F5
100#EDECFC
Hex codes ready to copy
A scale, not a collection
Unlike the other harmonies, order matters here. Each colour is a step between two extremes, which makes it an ideal base for naming tokens (100, 200, 300…) and keeping contrast gaps predictable between levels.
Paste it straight into your CSS
Export the palette as CSS variables or a Tailwind config, then use the two ends for your gradient and the middle steps for backgrounds, borders and states. LFColors generates both formats in one click.
Generate my palette gradient
Free, no signup