Gradient from Image
Make a gradient from an image: soft color points sampled from your photo and blended in OKLab into a matching backdrop. Works on video too, all in your browser.
How does a gradient from an image work?
The tool drops six points over your picture and averages the pixels in a square under each one, a square that's one eighth of the frame's height across. Those six averages become the colors of a mesh gradient. The backdrop ends up built from the photo's own palette, and you don't have to pick anything by hand.
Each color is weighted by its distance to the points and blended in OKLab, Björn Ottosson's perceptual color space. That way neighboring tones from the same photo mix with less of the gray band you'd get from plain RGB averaging. If you'd rather choose the colors yourself, Mesh Gradient Generator runs the same blend from a palette.
How to turn an image into a gradient
Load a photo or a clip of your own. From image comes ticked already, and while it's on, the Colours palette is ignored. Points decides how many areas get sampled, from two to eight. Softness goes from broad blends at one end to separate pools of color at the other.
Seed shifts the points to other spots in the picture, so they pick up different colors. Motion and Speed let the points wander around, and since each one samples wherever it has got to, the colors change as they move.
Settings for a product page, an album backdrop and a video glow
Product page: Points 3, Softness 1.4 and Speed 0. You get three broad areas carrying the photo's main tones and none of its detail. If the product fills the center of the shot, roll Seed until the points land on the backdrop around it, otherwise the gradient picks up the product's color.
Album cover behind a track list: Points 8 and Softness 4. With eight samples you catch more of the cover's colors, and the high Softness keeps them apart as pools. The backdrop ends up recognizably that cover's.
Ambient glow behind a video, like the light some TVs throw onto the wall behind them: load the clip, then set Points to 6, Softness to 2 and Motion to 0. Since the points stay put, only their colors follow the footage, and the glow stays calm while the picture moves.
Why does the gradient miss a small accent color?
Every sample covers a square an eighth of the frame tall. A small red logo inside that square gets diluted by everything around it, and a detail that no point lands on doesn't get sampled at all. You can raise Points, roll Seed until a point sits on the accent, or crop the picture down to the part you want first (the Image Tools hub has a cropper for that).
If you want one exact color rather than an area's average, use the picker on the Color Tools hub. It reads a single pixel.
Saving a gradient made from a photo or video
Colors get sampled again on every frame, so a gradient made from a video shifts along with the footage. Save that kind as MP4 or WebM. The change is slow and smooth, which video codecs handle well, while GIF's 256 colors a frame would chop it into bands.
From a still photo, a JPG gives you a small file with no loss you can see, because the gradient has no edges to blur. And since only colors come out of your picture, nothing of the photo itself can be made out in the result.