Coloured QR Codes: What Works and What Breaks
Make a coloured QR code that actually scans. Which colour combinations work, why yellow and light green codes fail, why inverting to light-on-dark breaks phone cameras, and the contrast ratio to stay above. Free generator with SVG export for recolouring.
Quick Answer
Coloured QR codes scan reliably when the modules are dark and the background is light, with a contrast ratio of at least 4:1 — dark navy, deep green, maroon, or near-black purple on white all work well. They fail when the colour is too light (yellow, pale green, orange on white), when the design is inverted to light-on-dark, or when the code sits on a photo or gradient. Generate your code above, download the SVG, and recolour it in any vector editor.
Scanners see contrast, not colour
A QR decoder does not perceive hue at all. It converts the camera image to greyscale and then applies a threshold, sorting every pixel into 'dark' or 'light'. Everything about whether a coloured code works comes down to what happens after that conversion.
This is why yellow fails so reliably. Yellow is one of the brightest hues in the spectrum — converted to greyscale it lands close to white, so a yellow code on white paper produces almost no separation and the decoder cannot tell modules apart. It looks like a perfectly clear code to a human eye, which is exactly what makes it such a common and frustrating mistake.
Colours that work
- •Navy, royal blue, and deep teal on white — among the safest choices, with excellent greyscale separation.
- •Dark green, forest green, and deep emerald on white. Bright or lime greens do not work; the darkness is what matters.
- •Maroon, burgundy, and dark red on white. Bright red is marginal and pale red or pink is not viable.
- •Deep purple, aubergine, and indigo on white — reliable, and rarely used enough to look distinctive.
- •Dark brown, charcoal, and near-black on cream or off-white, which is the safest way to soften a code for a warm-toned design.
Colours and treatments that fail
- 1Yellow, gold, and pale orange on white. They convert to near-white in greyscale and leave the decoder nothing to threshold against.
- 2Light green, mint, pastel blue, pink, and lavender on white. Same failure, same reason.
- 3Inverted codes — light modules on a dark background. Some scanners handle inversion, many phone cameras do not. It looks striking and fails often enough that it is not worth the risk on anything printed.
- 4Codes on photographs or gradients. The background luminance changes across the code, so a single threshold cannot separate modules correctly anywhere.
- 5Two mid-tone colours together, such as medium blue on medium grey. Both convert to similar greys and the contrast disappears.
- 6Metallic and foil finishes. They are effectively mirrors, and the reflection blows out the camera exposure wherever the light happens to hit.
The rule to design against
Keep a contrast ratio of at least 4:1 between the module colour and the background, measured the same way accessibility tools measure text contrast. Any free WCAG contrast checker will give you the number in seconds — paste in your two hex values and read it off. Above 4:1 is workable, above 7:1 is comfortable, and plain black on white is 21:1, which is why it remains the default.
Remember that print, screen, and camera all lose contrast rather than gain it. Ink spreads slightly on absorbent stock, cheap phone cameras compress the tonal range, and dim restaurant lighting flattens everything. A code that measures 4.5:1 on your monitor has less margin than that in the world, so design with headroom.
How to recolour without breaking the code
Generate the code above and download the SVG. Because it is vector geometry rather than pixels, you can open it in Illustrator, Inkscape, Figma, or Affinity and set the module fill to any colour you want, then export at any size with no quality loss.
Two things to leave alone. Do not recolour the three large corner squares differently from the rest — scanners use them to locate and orient the code, and unexpected colouring there causes failures that are hard to diagnose. And keep the quiet zone the same colour as the light modules, not the surrounding design; the margin is part of the code, not decoration around it.
Free, private, and permanent
WebsitesQR runs entirely in your browser. Codes you create are static and never expire; images you scan are never uploaded. Learn about QR code safety →
Frequently Asked Questions
Can QR codes be any colour?
Technically yes, practically no. Scanners convert the image to greyscale and threshold it, so what matters is lightness, not hue. Dark colours on light backgrounds work; light colours on light backgrounds do not, regardless of how clear they look to you.
Why doesn't my yellow QR code scan?
Yellow is one of the brightest hues there is. Converted to greyscale it sits close to white, so a yellow code on white paper gives the decoder almost no separation between modules and background. Use a dark colour instead — the code can still be on-brand if you pick a deep version of your brand hue.
Can I invert a QR code to white on black?
Some scanners handle inversion, but many phone cameras do not, and you cannot control which phone someone uses. For anything printed it is not worth the risk. If you want a dark aesthetic, put a conventional dark-on-light code inside a light panel within the dark design.
What contrast ratio does a QR code need?
At least 4:1 between module colour and background, measured with any WCAG contrast checker. Above 7:1 is comfortable. Design with headroom, because print, camera sensors, and poor lighting all reduce effective contrast rather than improving it.
Can I put a QR code on a photo background?
Not directly. Background luminance varies across the image, so no single threshold separates the modules correctly everywhere. Place the code inside a solid light panel on top of the photo instead — visually it still sits within the image and it scans reliably.
How do I make a QR code in my brand colours?
Download the SVG above and set the module fill in any vector editor. If your brand colour is too light, use a darkened version of it — most brand palettes include a deep variant, and at QR code scale the difference is barely noticeable while the scan reliability is completely different.
Do coloured QR codes scan more slowly?
A well-chosen colour combination scans as fast as black on white. A marginal one takes longer because the decoder retries thresholds, and in poor light it may not resolve at all. Speed is a good proxy for margin: if a code takes noticeably longer than a black one, your contrast is too tight.