Online Tool Store
Blurhash Generator
Encode an image into a BlurHash — a 20-30 character string that expands into a blurred placeholder while the real image loads. Tune the component counts, decode an existing hash to check it, and see the round-trip colour error. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Source
Decoded placeholder
Decode-time only; not stored in the hash.
A BlurHash is a string you store next to an image and expand into a blurred placeholder at render time — so the layout can show something meaningful before the real image arrives, without a second network request. Your client needs a decoder to display it; the data URI button gives you a ready-made image instead, which needs no decoder but is larger. Nothing is uploaded.
How to use it
- Drop in an image — a sample is already encoded so you can see the shape of the output.
- Leave the detail at 4 × 3 unless you have a reason to change it.
- Copy the hash and store it in the same row or record as the image itself.
- Decode it in your client, or use the data URI button if you would rather not add a decoder.
What you actually get
The length is fixed by the component counts, at four characters of header plus two per component. That makes the size entirely predictable before you encode anything:
1 × 1 6 characters flat average colour
3 × 3 22 characters rough light and dark regions
4 × 3 28 characters the usual default
9 × 9 166 characters diminishing returns
Twenty-eight bytes is small enough that it costs nothing to include in the JSON response that lists your images — smaller than most single HTTP headers. That is the whole point of the format: the placeholder arrives with the metadata, in the request you were already making, so there is no second round trip before the page can show something.
Why the transform runs in linear light
sRGB values are gamma-encoded: the byte 128 is not half the light of 255, it is closer to a fifth. Averaging those bytes directly is therefore wrong, and produces the characteristically muddy, too-dark blur you sometimes see. This encoder converts to linear light first, transforms, and converts back. The effect is easiest to see at one component, where the hash is nothing but an average:
test gradient, sRGB byte average rgb(130, 110, 95)
1 × 1 hash, decoded rgb(147, 116, 103)
Seventeen levels of difference in the red channel, and the linear one is the correct answer — it is what you would measure if you defocused a camera pointed at the image. At higher component counts the gap in the overall average closes to about one or two levels out of 255, which is what the comparison line under the hash reports for whatever you have loaded.
A hash is not an image
This is the practical catch. A BlurHash needs a decoder on the other end — a small library in your web, iOS or Android client. If you are not willing to add one, the format buys you nothing, and you would be better off storing a tiny placeholder image or just an average colour. The data URI button here exists for exactly that case: it hands you the decoded PNG, which works anywhere an image works, at the cost of being substantially larger than the hash and needing to be generated ahead of time. The button reports its own size when you press it, so you can compare the two honestly.
The other limitation worth knowing before you commit: there is no alpha channel. Transparency is lost, so images that rely on it will encode against whatever was behind them.
Why a blur rather than a spinner
A placeholder that matches the image's colours and rough composition does two useful things. It reserves the correct space, so nothing shifts when the image lands — which is the main cause of layout-shift complaints in image-heavy pages. And it gives the eye something plausible immediately, which makes the load feel shorter than an equivalent wait against a grey box, because there is something to look at rather than something to wait for.
FAQ
Can I use the hash directly in an <img> tag?
No, and this is the thing people are most often surprised by. A BlurHash is not an image format — it is 20 to 30 characters that a decoder expands into pixels. Your app needs a decoder to display it. If you want something that works with no decoder at all, use the data URI button instead: it gives you a real PNG of the blurred placeholder, which is larger but drops straight into an src attribute.
How many components should I use?
Four across and three down is the common default and is what this tool starts with. Below that you lose the sense of where things are in the frame; above it the hash grows quickly for very little visible gain, because the result is going to be blurred anyway. Nine by nine is 166 characters — six times the length of a 4×3 for a placeholder nobody looks at closely.
Why does a 1×1 hash look brighter than my image?
Because the average is computed in linear light, not on the sRGB bytes. Encoding a test gradient whose sRGB channels average rgb(130, 110, 95) gives a 1×1 hash that decodes to rgb(147, 116, 103). That is not a bug — averaging gamma-encoded values directly is the mistake, and it is why naively averaged thumbnails often look muddy. The linear average is the perceptually correct one.
Does the contrast slider change the hash?
No. Punch is applied at decode time, so the string is identical whatever you set it to. It is included here because most decoder libraries expose the same parameter and it is useful to see its effect before you pick a value in your own code.
Does a BlurHash keep transparency?
No. The format has no alpha channel, so a transparent PNG encodes as though it were flattened onto whatever the canvas held. For images with real transparency a placeholder colour is usually a better choice than a blur.
Is my image uploaded?
No. It is decoded, downsampled and transformed in the page. Both the encoder and decoder here are plain arithmetic running in your browser, with no request made at any point.
How we compare
| Feature | Online Tool Store | Command-line encoders | Image CDN placeholders |
|---|---|---|---|
| Image never leaves your device | ✓ | ✓ | ✗ |
| Nothing to install | ✓ | ✗ | ✓ |
| Decodes an existing hash to check it | ✓ | Separate command | ✗ |
| Shows the round-trip colour error | ✓ | ✗ | ✗ |
| Also exports a decoder-free data URI | ✓ | With extra steps | ✓ |
| Encodes a whole library in one pass | ✗ | ✓ | ✓ |
| Runs automatically on upload | ✗ | ✓ | ✓ |
Use this to understand the format, tune component counts, and generate hashes for a handful of images. Once you are encoding every upload, that belongs in your pipeline — a build step or an upload handler — not in a browser tab. This tool is the place to work out what you want before you write that code.