QR Code Design — Custom Colors, Logos & Branding
A QR code doesn't have to be a boring black-and-white square. With careful design, you can brand your QR code with your company colors and logo — but there are important technical limits. Push too far and your code won't scan at all. This guide walks you through what's possible and how to stay within scanable limits.
Can You Customize a QR Code?
Yes, QR codes can be customized — but the level of customization depends on how much error correction headroom you've built into the code. Every QR code includes error correction data (Reed-Solomon redundancy) that allows it to remain scanable even when part of the code is damaged, dirty, or obscured. Design customization essentially uses up some of that error correction budget.
The three most common customizations are: changing the colors (dark modules can be any color with sufficient contrast against the background), adding a logo overlay in the center of the code, and rounding the corners of modules or applying subtle shape modifications. Each eats into scanability margin, so moderation is key.
Adding a Logo to a QR Code
Adding a logo to the center of a QR code is the most popular form of customization. The logo sits in the middle of the code, covering some of the data modules. Error correction compensates for the lost data — but only up to a point. Follow these guidelines: keep the logo small — no more than 30% of the total QR code area, use H (30%) or at minimum Q (25%) error correction level when planning to add a logo, place the logo in the center of the code (avoid touching the finder patterns in the corners), and use a circular or rounded logo shape rather than square — it covers fewer modules.
ZeroQR uses static QR codes with configurable error correction. For a QR code that will receive a logo, select H (30%) error correction before generating to give yourself maximum room for the overlay. The generated SVG file is the best starting point for design work, as it can be imported directly into Illustrator, Figma, or Inkscape for logo placement.
Custom QR Code Colors
Color customizations work as long as you maintain enough contrast between the dark modules and the background. The scanner measures the difference in reflectivity — not the actual color — so high contrast is what matters, not specific hues. Good combinations include dark blue on white, dark green on pale cream, and dark brown on beige. Avoid yellow on white (insufficient contrast), any light color on white, any dark color on black or very dark backgrounds, and red-green combinations that affect color-blind users.
Design Tolerance by ECC Level
| ECC Level | Recovery | Max Logo Area | Color Flexibility | Best For |
|---|---|---|---|---|
| L | 7% | Not recommended | Minimal — only high-contrast swaps | Clean digital displays, no logo needed |
| M | 15% | ~10-15% of code area | Moderate — color swaps OK with care | General use, subtle color changes |
| Q | 25% | ~20-25% of code area | Good — color swaps + small logo | Product labels, moderate customization |
| H | 30% | ~25-30% of code area | Maximum — color + logo + shape tweaks | Branded codes, outdoor signage, heavy customization |
Critical QR Code Rules
- Never modify the finder patterns: The three large squares in the corners must remain as high-contrast dark-on-light patterns. Changing or decorating them will break the scanner's ability to locate the code.
- Always preserve the quiet zone: The blank margin around the entire QR code must stay clean. No graphics, text, or decorations in the quiet zone — it needs to be at least 4 modules wide on all sides.
- Test on multiple devices: After any customization, scan the result with at least two different phones. If one phone struggles, the design is too aggressive.
- Keep a plain backup: Always generate and save an unmodified version of the QR code before applying any design changes.
Start with a clean QR code — choose your size, ECC level, and download SVG for design work
[ GENERATE QR CODE ]