QR Code Customizer

QR Customizer renders a styled QR code in real time as you change colours, margin, logo, and label. It is built on the qrcode npm library: QRCode.toCanvas paints the matrix to an offscreen HTMLCanvasElement, your logo is drawn over the centre with the Canvas 2D drawImage method, and an optional caption strip is appended below using ctx.fillText. The result is composited onto a single visible canvas that you can export as PNG, WebP, or SVG, or copy directly to the clipboard via the async ClipboardItem API.

Colour comes down to luminance contrast between the dark and light modules. Phone cameras locate finder patterns by binarising the image, so the foreground should be substantially darker than the background regardless of hue. The presets shipped here (Ocean, Forest, Crimson, etc.) are tuned to keep that delta high; if you pick custom colours, aim for at least a 4:1 luminance ratio. Inverted codes (light foreground on dark background) violate the QR spec's assumption and many older scanners will refuse them, even though most modern phones cope.

The transparent-background option writes the light colour as #00000000 (RGBA zero alpha). This is honoured natively by both PNG and SVG exports — the SVG simply omits the light <rect>s — but WebP's alpha channel is shallower, so very subtle gradients behind the code can introduce edge fringing. If you need a clean cut-out for compositing in Figma or InDesign, prefer SVG.

Logo overlay is the part most likely to break a code. A QR symbol contains Reed-Solomon error-correction codewords that let scanners recover from physical damage — error correction level L recovers about 7%, M 15%, Q 25%, and H 30%. Covering the centre with a logo eats into that budget. The slider here is capped at 30% of the code's width for that reason, and switching to level H is the standard practice when adding a logo. The tool also paints a clean rectangle behind the logo with five pixels of padding so the boundary between logo and modules is unambiguous to the scanner.

The frame label is drawn as a fixed band below the code at 12% of the code's height, with a bold sans-serif font scaled to 55% of the band height and clipped to 90% of the width. It is included in PNG and WebP exports. The SVG export contains the QR matrix only — the label is not part of the SVG because it is painted with the Canvas 2D API, not the vector path generator. Keep labels short — &quot;Scan me&quot; or a domain — because long text gets compressed and visually competes with the code.

Margin is the white quiet zone around the matrix, measured in QR modules. The spec mandates at least four modules; less than that and many camera apps fail to lock on, especially when the code is printed flush against a coloured background. The slider goes from 0 to 10; values below 4 are intentionally allowed for digital placements where you control the surrounding pixels, but for print stick to four or higher.

Export size up to 2048 px gives you a raster suitable for poster prints, but the SVG export is the better choice for any output above A4 — it is resolution-independent and the file is typically just a few kilobytes. PNG keeps a transparent background; WebP exports at quality 0.92 for a smaller file at near-identical visual quality. Everything happens in the page; the only network request involved is the one that loaded this page.