QR Code Color and Background Generator
Give your QR code any colour and background: solid, transparent or gradient, with an optional logo. Our built-in scanner reads every version back and warns you when the contrast is too low.
- 1Enter link or text
- 2Colours
- 3Download
1Link or text
2Colours
3Your QR code
Your text and logo never leave your device: everything is made in your browser. We count anonymous page views (no cookies).
Which QR code colours work?
Phone cameras look for dark squares on a light background. Colour is fine as long as there's a clear gap in brightness between the two, not just a difference in hue. Red on green, for example, can look bold to you and flat to a camera.
- Keep the code darker than the background. Light-on-dark ("inverted") codes are read by some apps and ignored by others.
- Aim for a contrast ratio of 4:1 or more. The ratio under the preview uses the same formula as web accessibility checks (WCAG). Low-contrast codes are more likely to fail in dim light or on glossy print.
- Gradients: both ends of the gradient need to stay dark against the background. The check uses whichever end is weaker.
- Logos: a logo covers part of the code, so use error correction H, which can rebuild up to about 30% of the code. A common rule of thumb is to keep the logo at about 20% of the width or less, and the check below tells you whether your version still reads.
- Transparent backgrounds take on whatever is behind them. Set "It will sit on" to the colour of your design, and the check uses that.
What the scan check does
After every change, the exact image you'll download is read by a QR decoder (the open-source jsQR) running in your browser. You'll see "Read back" only when it decodes to your text. It's a strong sign, not a guarantee: print quality, size, glare and the phone's camera all matter. Scan a test print with a couple of phones before a big run.
FAQ
Can a QR code have a coloured background?
Yes. Any background colour works as long as it's clearly lighter than the code itself. Pale yellows, creams, light blues and greys work well behind a dark code. Check the contrast ratio under the preview: 4:1 or more is a good target.
How do I make a QR code with a transparent background?
Tick "Transparent background" and download PNG or SVG. Only the code's squares are drawn; everything else is see-through. Set "It will sit on" to the colour the code will be placed on, so the scan check tests the real combination.
Do coloured QR codes still scan?
They do when the code is dark enough against its background. Our check reads your coloured code back with a decoder and shows the contrast ratio. Problems come from light codes, light-on-dark codes, and colour pairs with similar brightness.
Can I make a white QR code on a black background?
You can, but many scanners won't read it. Inverted codes aren't supported by every camera app. The check tells you when a code only reads inverted. For dark designs, put the code on a light panel instead.
Can I add a logo in the middle?
Yes. Choose a logo, keep it at about 20% of the width, and use error correction H. The logo is placed on a clear square so it doesn't blend into the modules. The check will tell you if the logo is too big to read.
Will the code expire?
No. These are static codes: your text or link is written into the pattern itself, with no redirect through our server. The code works as long as the link it holds works.