Most QR code generators give you the same thing, a black and white square that gets the job done but looks like it came from 2010. That’s fine for a quick link share. But if you’re putting a QR code on a product, a poster, a business card, or anywhere it represents your brand, a generic black square is a missed opportunity.
Here’s what you can actually do with QR codes visually, and how to make them without paying for a premium tool.
How QR codes work (quickly)
QR codes store data as a pattern of black and white modules (the little squares). The pattern follows a specific format that any QR scanner can read. The important thing for customization is that QR codes have built-in error correction, meaning up to 30% of the visual data can be obscured or modified and the code still scans correctly.
That 30% error correction headroom is what makes custom colors and embedded logos possible without breaking the code.
Color customization
The most common mistake with colored QR codes is low contrast. A QR scanner needs to tell the dark modules from the light ones. If you use a dark blue on a dark background, or a light color on white, it won’t scan reliably.
Rules that actually work:
- Dark modules on light background, always, no exceptions
- Contrast ratio, your dark color should be significantly darker than your background
- Avoid red on white, some older camera apps struggle with this specifically
- Test on multiple devices before printing or publishing
Colors that work well: dark navy on white, dark green on white, black on yellow, dark purple on light grey.
Colors that seem fine but often fail: orange on white (low contrast), light blue on white, any pastel on white.
Adding a logo
You can embed a logo or icon in the center of a QR code using that error correction headroom. The logo typically sits in the middle 20-30% of the QR code area.
A few things that matter:
Logo size, keep it under 30% of the total QR code area. Going bigger starts eating into data modules that the error correction can’t recover.
Logo background, put a white or solid color padding around your logo so it doesn’t blend into the surrounding modules.
Simple logos work better, a complex detailed logo in the center of a small QR code just becomes a blur. A clean icon or simple mark reads better.
Always test, after adding a logo, scan it with three different apps or devices before publishing. What scans fine on your phone might fail on a different camera app.
Where custom QR codes actually make sense
Worth the extra effort:
- Physical marketing materials (flyers, posters, packaging)
- Business cards where the QR links to your portfolio or contact
- App store links where the QR will be seen repeatedly
Probably not worth it:
- One-time use links
- Internal tools
- Anywhere people are scanning quickly and just need it to work
Try it
I built OpenQR specifically for this, it lets you generate QR codes with custom foreground and background colors, add your own logo in the center, and download the result. Free, no account, runs in the browser.
Try OpenQR at darkmintis.dev/openqr
Generate one, test the scan, adjust the colors if needed. The contrast checker is built in so you can see if your color combination is likely to cause scan failures before you finalize it.
One thing to do right after generating: scan it with your phone before using it anywhere. Takes five seconds and saves you from printing 500 flyers with a QR code that doesn’t work.