A QR code is a print asset like any other, and it arrives on packaging, in out-of-home and on stands where nobody can fix it afterwards. The tool generates one in the brand's colours and exports it as PNG or SVG, with the settings that decide whether it still scans kept in front of you rather than buried in a library call.
Everything runs in the browser. The text never leaves the page.
What goes in
Text or URL takes anything a scanner can carry — a campaign URL, a plain string, a phone number. The preview repaints as you type, a moment behind the keystroke, and stays blank while the field is empty. Download and Copy SVG stay disabled until there is something to encode.
Longer text needs more modules, so the grid gets denser at a fixed export size. A tracking URL with a long query string prints smaller squares than the bare domain does, which matters more on packaging than on screen. Shorten the link before encoding it, not after.
Encode URLs and plain ASCII, not designed prose. The encoder reads one byte per character, so any character above U+00FF is truncated to a different byte with no warning. An em dash pasted from a document encodes as a control character; curly quotes, accented letters, CJK and emoji are corrupted the same way. The code still scans — it hands back the wrong string. Type the text rather than pasting it out of a layout, and scan the result before it ships.
Error correction
Every QR code carries redundant data so a damaged or obscured code still reads. Four levels, and the tool defaults to the highest.
| Level | Recovers | Use for |
|---|---|---|
| L | ~7% | Screen only, clean surface, shortest possible grid |
| M | ~15% | General print where nothing overlaps the code |
| Q | ~25% | Print that will be handled, folded or weathered |
| H | ~30% | Packaging, out-of-home, anything with a logo over the centre |
Higher correction costs modules: the same URL at H fills a denser grid than at L. That is the trade. Drop the level to win back module size, and only when the surface is forgiving.
Size and quiet zone
Size sets the exported square in pixels, from 128 to 2048, in steps of 64. A value above the ceiling is pulled back to 2048 without comment, and the field goes on showing what you typed — the label under the preview is the one that reports what will actually be written. A blank field, a zero, or anything that is not a number falls back to 512 rather than to the minimum.
For SVG the number matters less than it looks — the file carries width, height and a matching viewBox, so it scales to any final dimension without loss. Set the size for PNG, where the pixels are the asset.
Quiet zone is the empty margin around the grid, measured in modules, from 0 to 8. It defaults to 4, which is the QR specification's minimum, and it is the setting most often lost in layout. Scanners use that margin to find the code's edges; a code butted against a coloured panel or a photograph reads slowly or not at all. The tool will take it down to 0 without objecting. Leave it at 4 or higher, and let the design hold the space rather than trimming it in the export.
Module shape
Module radius rounds the corner of every module, from 0 to 50% of the module's own width. At 0 the modules are squares, which is what scanners were built for. At 50 each one is a circle.
Rounding is a brand decision with a scanning cost: the rounder the module, the less ink meets its neighbour, and the more the grid depends on error correction to hold together. Round it if the brand asks for it, raise error correction when you do, and test the result on a real phone at the distance the code will actually be scanned from.
Colour
Fill and background each take a six-digit hex, through the picker or the field beside it. The field accepts the value with or without a leading # and reads it case-insensitively. The picker applies as you drag it; the field applies when you leave it or press Enter.
A value that is not six hex digits is not applied. The preview holds the colour it already has, and the next change to any other control drops that side to its default — black for the fill, white for the background, not the colour that was showing before. Three-digit shorthand counts as invalid here, so write , not . While an invalid value sits in the field, the picker swatch beside it still shows the old colour, so the two disagree until you put a valid hex back.
Transparent background drops the background entirely: the PNG exports with an alpha channel, and the SVG omits its background rectangle. The preview switches to a checkerboard so you can see what is actually there. A transparent code inherits whatever sits behind it in the layout, so the contrast question moves out of this tool and into the design — check the pair you are placing it on.
Contrast is what a scanner reads, and the direction is not symmetric: the fill must be darker than the background. A light code on a dark ground fails on many scanners even at high contrast, so keep the dark value on the fill. For the ratio itself, measure the pair in Colour Pairing.
Exporting
Export as in the bar chooses the format, and Download beside it writes the file. Every control the tool exports through lives in that bar; the preview below it is output, not a second set of buttons.
| Format | What you get | Reach for it |
|---|---|---|
| PNG | A flat raster at the chosen size, alpha when the background is transparent | Slides, email, anything that wants a picture |
| SVG | A background rectangle, then one rectangle per dark module, scalable without loss | Print, packaging, artwork handed to a production house |
Files are named for the format and the size — qr-code-512px.png, qr-code-512px.svg — so a folder of exports stays sortable.
Let the preview settle before you download. The export reuses the last grid the preview built, so a click landing in the same instant as a keystroke writes the previous code at the current settings.
Copy SVG appears in the bar next to Download, and only while SVG is the chosen format. It puts the markup on the clipboard for pasting straight into a template or an email build. The SVG is plain geometry with no script and no external reference, so it survives being inlined.
Copy link in the overflow menu copies the page's address. The settings do not travel with it — send the exported file, not the link, when someone else needs this exact code.
When it refuses
The tool reports one failure in words:
Text too long for this error correction level. Try a lower level or shorter text.
A QR code tops out at a fixed capacity, and raising error correction lowers it. The message names both ways out. Shortening the text is the better one, because dropping to L to fit a long URL produces a code that is both dense and fragile. The tool shows this message for anything the encoder refuses, so treat it as the likeliest cause rather than the only one.
If nothing on the page responds at all — the preview never paints, the controls do nothing, Download stays grey — the encoder did not load, and the console says so: [QR Code Tool] qrcode-generator not loaded. None of the page is wired up in that state, so there is nothing in the tool left to try.