A plain black-and-white QR code works, but it looks like everyone else's. A custom QR code turns that square of modules into a brand asset — but QR codes are machine-readable first and decorative second, so every design choice has to survive a real camera in the real world.
Custom QR code design means changing the colors, corner eyes, module patterns, and branding of a code while keeping it scannable. You can restyle almost everything as long as you follow two unbreakable rules: keep strong contrast between dark modules and a light background, and leave the quiet zone empty.
This guide covers QR code design as a system: what each part of the code does, which parts you can style, and how to ship branded codes that scan on the first try. Logo embedding has its own error-correction rules — see our guide to QR codes with logos for that.
What are the parts of a QR code, and which can you style?
A QR code has four elements that matter for design. The three large corner squares are the finder patterns, usually called the eyes — a scanner uses them to locate the code and work out its orientation. Thin alternating lines running between the eyes are the timing patterns, which help the scanner map the grid. The small squares filling the rest of the image are data modules, which encode your actual content. The empty margin around everything is the quiet zone, separating the code from the rest of the page. You can safely restyle the eyes, recolor the modules, and change module shapes, because scanners are tolerant of how modules look as long as where they are stays intact. You should never fill in the quiet zone, warp the grid geometry with perspective effects, or let background artwork bleed into the code.
What colors can a QR code be?
QR code colors are nearly unrestricted, with one governing principle: the modules must be clearly darker than the background. Scanners binarize the image — reducing everything to dark versus light — so what matters is not the hue but the contrast. Navy on white, dark green on cream, and deep purple on pale gray all scan reliably. Yellow on white or mid-tone gray on beige do not, because after binarization the modules and background blur into the same value. As a working rule, aim for a contrast ratio of at least 4:1, and when in doubt, darken the foreground rather than the background.
Three specific cautions:
- Avoid inverted codes. Light modules on a dark background fail in many scanning apps; if your palette is dark, place the code in a light panel instead.
- Be careful with gradients. If either end drifts toward a light tone, that region loses contrast — keep the entire gradient range dark.
- Keep the background solid. Photos or patterns behind the modules are a leading cause of failed scans; if the code must sit on imagery, put it in a solid light container.
With QRBot you can pick custom colors and preview the result instantly — offline and free on iOS and Android.
Can you change the eyes and pattern shapes of a QR code?
Yes — eye shapes and module patterns are the most distinctive customizations available, and done well they make a code recognizable as yours before anyone reads a word. Eyes can be rounded, softened into leaf shapes, or framed in a secondary brand color; modules can become dots, rounded squares, or connected blobs. Scanners locate a code by the proportions of the finder patterns, not their exact silhouette, so moderate restyling is safe. The tradeoff is a spectrum: the further a shape drifts from a solid square, the less margin the code has in poor conditions — low light, small sizes, glossy surfaces. Sparse dots, for instance, shrink each module's dark area and can fail at sizes where squares would still scan.
Practical guidance:
- Style eyes conservatively. Rounded corners and color accents are fine; heavily ornamental eyes are the riskiest customization, because scanners depend on them to find the code.
- Match shape to size. The smaller the printed code, the closer to solid squares you should stay.
- Change one variable at a time. Custom color plus custom eyes plus dot modules stacks risk; pick the one or two customizations that carry your brand.
How do you make a branded QR code consistent across campaigns?
A branded QR code is not one nicely styled code — it is a repeatable recipe. Decide once on your foreground color, background treatment, eye style, and module shape, write those choices down, and reuse them on every code you publish. Consistency is what turns styling into recognition: when the code on your packaging, your table tent, and your email signature all share the same look, customers learn to associate that look with you and scan with more confidence. Treat the recipe like any other brand asset, kept alongside your logo files and color tokens, so the next campaign's code is produced identically rather than reinvented from memory.
A brand recipe covers four decisions:
- Foreground color — usually your darkest brand color, verified for contrast on white.
- Background — white or your lightest neutral, always solid.
- Eye style — one shape, optionally one accent color, used everywhere.
- Center mark — whether you embed a logo, and at what size; logo size interacts with error correction, so follow our QR code logo guide.
The same recipe applies to your digital business card: a styled code feels designed rather than generated.
How do you design a QR code for print versus screens?
Context decides size, and size decides how much styling a code can tolerate. The common industry rule of thumb is a 10:1 distance-to-width ratio: a code scanned from about 10 cm away (a business card) can be 1 cm wide, while a code scanned from 5 meters (a banner across a room) should be around 50 cm wide. Screens add their own considerations — a code on a website or in an email gets scanned by a camera pointed at a monitor, so glare, brightness, and dark mode all come into play. Print adds material issues: glossy lamination causes reflections, dark fabrics kill contrast, and curved surfaces like bottles distort the grid.
By context:
- Small print (cards, labels): square modules, minimal styling, generous quiet zone.
- Large print (posters, signage): room for full styling — where dot patterns and styled eyes shine.
- Screens: export at high resolution and check dark mode — a transparent PNG that looked fine on white becomes an unscannable inverted code on a dark page.
- Curved surfaces: keep the code small so the curvature across it stays slight.
How do you make a custom QR code accessible?
A QR code by itself tells people nothing — it is a picture of noise only a camera can read. Accessible design means pairing every code with visible text that says what scanning does: "Scan to see the menu," "Scan to download the app." This call-to-action text helps everyone, not just users with accessibility needs — people are more willing to scan when they know what they will get, and the text doubles as a fallback when the code cannot be scanned at all. Place the CTA directly above or below the code, outside the quiet zone, legible from the same distance the code is scannable from.
Online, add alt text naming the destination ("QR code linking to the spring menu") and show a short human-readable URL nearby, so anyone who cannot scan still has a path to the content.
How do you test a custom QR code before shipping it?
Testing is the step that separates a designed code from a decorative one, and it takes ten minutes. Every customization — color, eyes, patterns, logo — moved the code some distance from maximum reliability, and testing tells you whether it moved too far. Test the actual final artwork: final size, final colors, final background. And test with more than your own phone, because the scanner that fails will always belong to a customer — a code that scans instantly on a new flagship in a bright office can still fail on a three-year-old budget Android in a dim restaurant.
A pre-flight checklist:
- Devices: at least one iOS and one Android device, ideally including an older or budget model.
- Apps: the native camera plus a dedicated scanner — see our comparison of the best QR code scanner apps for test candidates.
- Lighting: bright light, dim indoor light, and glare for outdoor placements.
- Distance and angle: the intended distance per the 10:1 rule, then farther and at an angle.
- Print proof: always scan a physical proof — contrast shifts between screen and paper.
QRBot generates styled codes and scans them back with the same app. Get it free for iOS and Android.
What are the most common QR code design mistakes?
Most failed custom codes fail for one of five avoidable reasons:
- Low contrast — light or mid-tone module colors that disappear after the scanner binarizes the image.
- Busy backgrounds — photos, textures, or gradients behind the modules that destroy edge detection.
- Missing quiet zone — text, borders, or artwork crowding the margin so the scanner cannot isolate the code.
- Over-styled eyes — finder patterns so decorated that scanners no longer recognize them.
- No CTA text — a technically perfect code nobody scans because nothing says why they should.
Frequently asked questions
Can QR codes be different colors?
Yes. QR codes can be any color as long as the modules are clearly darker than the background — scanners read contrast, not specific hues. Dark blue, forest green, deep red, and charcoal all work well on light backgrounds. What fails is low contrast (yellow on white) and inversion (light modules on dark), which many scanning apps cannot decode. Pick your darkest brand color for the modules and keep the background light and solid.
Do custom QR codes scan as well as black and white?
A well-designed custom code scans just as reliably as a plain one. Black-on-white is simply the maximum-margin version, and every customization spends a little of that margin. Dark colors, rounded eyes, and rounded modules cost almost nothing; pale colors, hollow eyes, and sparse dots at small sizes spend enough that scans fail in poor light or at distance. The real difference is not custom versus plain — it is tested versus untested.
What should I put around a QR code?
Two things: empty space and a call to action. Directly around the code, leave the quiet zone — a clear margin on all four sides, free of text, borders, and artwork, so scanners can isolate the code. Just outside that margin, add short visible text saying what scanning does ("Scan for the menu") and ideally a short human-readable URL as a fallback. Never place other QR codes immediately beside it, and keep decorative frames outside the quiet zone.
Can I make a QR code match my brand for free?
Yes. QRBot generates custom QR codes free on iOS and Android, with custom colors, eye designs, pattern shapes, and embedded logos across more than 20 content types — links, Wi-Fi, contact cards, and more. Generation happens entirely on your device, so it works offline and your data never leaves your phone. Style a code to your brand recipe, verify it with the built-in scanner, and export it — no account or payment required.
