QR code design ideas
This QR code template starts with a designed look: deep navy on cream with error correction set to H, ready for your logo. Try your own colours and logo, and the tool warns you if a design stops being scannable.
Free, no sign-up. Made with our free qr code generator, which runs in your browser.
What's included
- Deep navy modules (#1f3a5f) on a cream background (#fdf6e3), dark on light for reliable scanning
- Error correction level H, which restores about 30% of the code, so a logo in the centre still scans
- A logo slot in the middle, kept small so the three corner squares stay clear
- A 2,048 px PNG and an SVG for print
- A contrast warning if your colours get too close to scan
How to change it
- Replace the sample link with yours.
- Set your brand colours. Keep the code darker than the background: light codes on dark backgrounds fail in some camera apps.
- Add your logo: a simple, square mark works best. Remove it for a cleaner code.
- Tick transparent background to place the code straight onto your design, then leave extra white space round it in your layout.
- Scan the preview with two phones before you download.
Questions
What is the best design for a QR code?
A dark code on a light background, a clear margin, a size that suits the scanning distance and, if you like, a small logo in the centre. Branding comes from colour and the logo; the pattern itself has to stay intact.
How do I make a QR code look cool without breaking it?
Use your brand's darkest colour for the code and a pale tint for the background, add a small logo, and put a short call to action next to it. Don't stretch the code, crop its margin or cover the corner squares.
Why does a logo need error correction level H?
A logo hides some of the code. Level H lets a scanner restore about 30% of the data, the most of any level, so the hidden part is rebuilt. The tool switches to H when you add a logo.
Can I use a gradient or a photo as the background?
Not in this tool, and it's risky anywhere: a busy background lowers contrast in places. Use a flat colour behind the code, and put the photo elsewhere in your design.