Custom QR Code Colors: Design Tips That Actually Work
Yes, QR codes can be any color. No, you cannot just slap your brand palette on a QR code and call it a day. Color customization is one of the easiest ways to make a QR code feel intentional rather than like an afterthought -- but there is exactly one rule you cannot break.
The One Rule: Dark on Light
QR code scanners expect dark modules (the squares) on a light background. This is not a suggestion -- it is how the decoding algorithm works. A dark foreground on a light background will scan reliably. Invert that, and you are gambling with every phone camera on the planet.
This means: dark blue on white works. Dark green on cream works. White on black does not. Light pink on dark purple does not. If you squint at your QR code and cannot immediately tell which part is "foreground," the scanner might not be able to either.
Contrast Is Everything
The minimum contrast ratio for reliable scanning is roughly 4:1 between the dark modules and the background. In practice, aim higher. Think about where this QR code will live -- a poster in a sunny window, a sticker on a dark product box, a screen viewed at an angle. All of those conditions degrade contrast.
A quick test: convert your QR code to grayscale. If the modules still look clearly distinct from the background, you are in good shape. If they blend together, bump up the contrast.
Using Brand Colors
Brand colors work great for QR codes, with one caveat: the foreground color needs to be dark enough. A company with a deep navy or forest green brand color can use it directly as the module color on a white or light background. A company whose primary color is bright yellow or light coral will need to use that color as the background instead, with a dark foreground. If you want to go further with branding, you can also add a logo to the center of your QR code.
Some specific combinations that work well:
- Dark navy (#1a2744) on white -- professional, clean
- Black on a light brand color (#f0e6d3) -- warm, distinctive
- Dark teal (#0d4f4f) on light gray (#f5f5f5) -- modern, readable
Transparent Backgrounds
If you are placing a QR code over a photo, banner, or colored surface, export it with a transparent background. This way the underlying design shows through the gaps between modules. Just make sure the surface behind the QR code is light enough to maintain contrast.
On qrmake.dev, you can set both the foreground and background colors independently, or set the background to transparent for overlay use. The preview updates in real time so you can judge scannability before downloading.
Always Test
Before printing 500 business cards or launching a campaign, scan your colored QR code with at least three different phones. Test in different lighting. Test at the size it will actually be printed. The five minutes this takes can save real money and embarrassment.
Color customization is simple, but it is not forgiving. Stay on the right side of contrast, keep dark modules on a light background, and test before committing. That is genuinely all there is to it.