QR Code Beautifier
Colors, gradients, dot styles, center logo and error correction, with a built-in scan test.
Anatomy of a QR code
A QR code is built from five parts: three finder patterns (the corner squares used for alignment), timing patterns (the alternating lines between finders), alignment patterns (small squares in larger versions), format information (error-correction level and mask) and the data area (the actual encoded content). Beautification should only touch the data area and styling — never the three corner finders. This tool renders finders separately, so no style can break them.
Beautification options
- Custom colors — foreground and background set independently, with a live contrast check;
- Two-color gradients — four directions, validated at the worst-case stop;
- Dot styles — square, rounded or circle; rounding has a safe cap (too thin a neck between dots breaks scanning);
- Finder styles — keep the corner squares or switch them to circles (appearance only, geometry unchanged);
- Center logo — paste an image URL; a white rounded pad is added automatically, size adjustable;
- Border (quiet zone) — 2 to 12 modules of margin for edge printing.
Error correction and occlusion budget
QR codes carry built-in error correction: L recovers ~7%, M ~15%, Q ~25%, H ~30% of damage. Higher levels let a center logo cover more area, at the cost of denser modules. Rule of thumb for logo area: L up to 12%, M up to 15%, Q up to 18%, H up to 22%. The tool warns you live based on your level.
Always test before printing
Low contrast, inverted colors (light modules on dark) and over-occlusion are the three classic failure modes. Click the scan test — the local decoder actually decodes the finished image and echoes the content. Only then is it print-safe.
Privacy
Input, beautification and the scan test all happen in your browser. Nothing is uploaded to any server. Logo images from external URLs are loaded directly by your browser.
FAQ
Will beautifying a QR code break scanning?
No, as long as three rules are kept: never cover the three corner finder patterns, keep the contrast high (dark on light, 4:1 or better), and keep the center logo within the safe area. This tool renders finders separately, checks contrast live, and includes a scan test as a final check.
What do the L / M / Q / H error-correction levels mean?
They are the share of damage the code can recover: L about 7%, M about 15%, Q about 25%, H about 30%. Higher levels let a logo cover more area, but the modules get denser.
How should I pick colors?
A dark foreground on a light background is the most reliable. The tool computes the contrast ratio live and warns on low-contrast or inverted (light on dark) combinations.
Are gradient QR codes scannable?
Yes, as long as every stop in the gradient meets the contrast requirement. The tool validates at the worst-case color.
How big can the logo be?
Rule of thumb: logo area up to 12% at L, 15% at M, 18% at Q and 22% at H. The tool warns live based on your level.
Will my data be uploaded?
No. Input, beautification and the scan test all run in your browser and are never uploaded to any server.