Blend two colors across 2–20 steps in RGB or HSL space. Preview the mix and export CSS variables, a gradient, or JSON. No data leaves your browser.
More free utilities you might find useful
Quick answers to common questions
RGB mixes channels linearly and can look muddy through mid tones. HSL interpolates hue on the shortest arc and often looks more natural for gradients.
Anywhere from 2 to 20 inclusive stops from Color A to Color B.
Yes. Use Swap to reverse A and B instantly.
No. Blending runs entirely in your browser.
Your data is processed entirely in your browser. Nothing is sent to any server.
Mix — click to copy
CSS variables
:root {
--mix-1: #16A34A;
--mix-2: #15A361;
--mix-3: #14A477;
--mix-4: #13A48E;
--mix-5: #11A4A5;
--mix-6: #10A4BC;
--mix-7: #0FA5D2;
--mix-8: #0EA5E9;
}CSS gradient
background: linear-gradient(90deg, #16A34A, #15A361, #14A477, #13A48E, #11A4A5, #10A4BC, #0FA5D2, #0EA5E9);
JSON
[ "#16A34A", "#15A361", "#14A477", "#13A48E", "#11A4A5", "#10A4BC", "#0FA5D2", "#0EA5E9" ]