How the lava palette maker works
The maker works in OKLCH, a colour space where equal steps look equally different to the eye.1 It keeps your colour's hue family, lifts the lightness into pastel range and lowers the saturation. Then it spreads five shades around the hue.
Each pastel is checked against near-black text for the WCAG AA contrast ratio of 4.5 to 1.2 Colours that would fall outside what screens can show are pulled back until they fit.
Use the pastels for backgrounds, cards and gradients. Keep your brand colour for buttons and the one thing you want people to click.
Questions people ask
What is a lava palette?
A set of soft colours that blend into each other like a slow lava lamp. It works well for background gradients behind text.
Are the colours accessible?
Each pastel keeps near-black body text above the WCAG AA contrast ratio of 4.5 to 1. White text on these pastels won't pass.
How do I use the CSS?
Paste the variables into your stylesheet, then use them like var(--mist). The --lava variable is a ready-made background gradient.
Why does the maker use OKLCH?
In older colour models, two colours with the same lightness value can look very different. OKLCH keeps them looking even, so the five pastels feel like one set.