How to Generate a Styled QR Code with Custom Colors (No Third-Party Host)

Plain black-and-white QR squares often look out of place on posters and cards. Can you use brand colors and softer module shapes? Yes—within hard limits: the three finders and the error-correction budget.

How far QR design can go

A QR works through three finder patterns and Reed–Solomon correction. Inside those constraints you can restyle:

Error correction

Planning a center mark → pick Q or H, keep cover modest, and still real-scan.

Implementation notes

The QR code designer also uses qrcode (^1.5.4), then restyles modules on a Canvas:

Fast monochrome PNG → QR generator. Round-trip → QR decoder. Long links → URL encoder and URL encoding guide; Base64 payloads → Base64 guide. Pair brand colors with the contrast checker when you need WCAG text ratios as well.

Step-by-step

1. Open the QR code designer.
2. Enter a URL, text, or WIFI: / vCard string.
3. If you will add a center mark later, set ECC to Q or H and keep content short.
4. Tune colors, eye/dot styles, and margin; preview updates live. Watch the contrast line under the controls — fix red/amber before you download.
5. Real-scan on a phone; then download PNG (or SVG if you accept standard square modules for print vectors).
6. For a logo: place the PNG/SVG in Figma/print software, overlay a transparent mark (often ~15–20% of the code area), and scan again.

Plain black/white → generator. Read an existing image → decoder.

Design principles

1. Luminance contrast first: scanners binarize. Vivid hue with similar lightness fails. The designer reports the ratio live; dark-on-light remains the durable default.
2. Quiet zone: about four modules of clear border; do not crop it in the layout. Margin 0 is a trap for print crops.
3. Logo budget: you spend ECC headroom. H’s ~30% is a ceiling; working practice often stays near 15–20% center cover. Soft gradient logos bleed into modules—hard edges scan cleaner.
4. Fancier styles need more testing: star / thin dots shrink effective ink; at small print sizes, simplify or enlarge.
5. SVG is not WYSIWYG for styles: custom eyes/dots exist on PNG preview/download; SVG is the library’s standard matrix.

Capacity, density, and URLs

Versions 1–40 trade against ECC and length: long UTM URLs at H → high version → dense modules → small print fails. Practical breakpoint: under ~60 characters at Q often works near 2 cm on a card; the same payload at 1.2 cm with H fails on cheap cameras.

Shorten before styling—put tracking on the landing page.

Static vs dynamic

The designer emits a static pattern: payload baked in, no server, immutable after print. Campaigns often use a redirect layer (dynamic): the pattern points at a short link you control. Long-lived print usually encodes your domain’s redirect, then changes the target without reprinting.

Print and viewing distance

Rule of thumb: minimum side length roughly ≥ 1/10 of scan distance. Always print a proof — phone screens hide ink spread and paper texture.

Scan test checklist

Common use cases

• Wi‑Fi: WIFI:T:WPA;S:name;P:password;; — keep SSID/password short; fancy dots + long password densifies the matrix
• vCard: scan to save a contact — put a short landing URL if the card is dense
• Event print: white underlay when the poster background is busy
• Packaging: short link to docs/registration

FAQ

Q: Colored QR won't scan?
Usually luminance contrast or disturbed finders. Restore high-contrast solids first (clear the designer’s fail/warn state), then restyle.

Q: Can I upload a logo here?
No. The designer handles color and module style; composite logos externally and verify by scan.

Q: Why are dots round in preview but square in SVG?
SVG comes from qrcode's standard vector path—no Canvas restyling. Keep custom shapes via PNG, or redraw in a vector tool.

Q: Capacity limits?
Yes. Version 40 at high ECC is far below the “7000+ digits” headline for real text. Do not stuff documents—use a short link.

Q: Do codes expire?
Patterns do not; URLs / Wi‑Fi / campaign pages do. Prefer a mutable redirect for long-lived print.

Q: Dark mode / inverted brand colors?
Light modules on a dark field can work if the luminance ratio clears ~4.5:1 and finders stay intact — but many consumer apps assume dark-on-light. Prefer dark modules on light when the audience is mixed.

Summary

Scannable style = enough ECC + enough luminance contrast + modest center cover + real-device tests. Style locally in the QR designer; add logos outside; scan before you ship.

Written and maintained by ToolVault. More developer tools at the homepage.