Custom QR Code Colors: How to Brand Your QR Code
A standard black-and-white QR code is functional but forgettable. A branded QR code — one that uses your company's color palette — looks intentional, reinforces your visual identity, and integrates more naturally into marketing materials. The good news is that QR codes are surprisingly flexible when it comes to color, as long as you stay within the constraints that keep them scannable. This guide explains how color customization works, what rules you need to follow, and how to get a polished result with a free browser-based tool.
How QR Code Color Customization Works
A QR code is a grid of dark and light modules (small squares). The scanner's job is to find the contrast boundary between dark and light modules. This contrast — not the specific color — is what makes the code decodable. The scanner does not care whether the dark modules are black, navy, dark green, or deep burgundy, as long as they are sufficiently darker than the background. Most QR generators let you set two values: the foreground color (the dark modules) and the background color (the light modules). By default these are black and white. Change them to a dark brand color and white, or a dark brand color on a very light neutral, and you have a branded QR code that is still reliably scannable. Our QR Code Generator accepts any hex color value for both foreground and background. You can enter your exact brand hex code — for example #0011ff for electric blue or #1a472a for dark forest green — and the tool applies it immediately. The PNG download will reflect your custom colors. The key constraint is contrast. Luminance contrast between foreground and background must be high enough for camera sensors to detect the pattern. The WCAG 2.1 contrast ratio standard recommends at least 4.5:1 for text readability, and the same general principle applies to QR modules. A contrast checker tool can measure this — enter your two hex colors and verify the ratio is at least 4:1 before committing to a design. The quiet zone (the blank border) must remain in the background color, not be cropped or replaced with a different shade. And the finder patterns (the three square targets in the corners) must have the same contrast as the rest of the code.
Color Combinations That Work and Ones That Fail
Not all brand colors translate well to QR code foregrounds. Here is a practical breakdown of what works reliably, what works with caution, and what consistently fails. Reliably works: any dark color on white or very light gray. Dark navy (#003366), dark forest green (#1a472a), deep burgundy (#6b0f1a), charcoal (#333333), and dark teal (#004d40) all work excellently on white. The contrast ratios are well above the 4:1 threshold and cameras decode them under a wide range of lighting conditions. Works with caution: medium-saturation brand colors on white. A mid-blue (#0055cc), a standard red (#cc0000), or a dark orange (#b35900) will typically scan fine but may struggle on very small prints or in low light. Test thoroughly before large print runs. Typically fails: light foreground colors on white. Yellow (#ffcc00), light pink (#ffaacc), light green (#99ff99), and similar pastel tones do not provide enough contrast on a white background. If your brand is built on these colors, use a white foreground on a dark version of the brand color instead. Inverted codes (light modules on dark background) technically work but are problematic in practice. Many older QR scanners are designed around dark-on-light patterns and do not reliably decode inverted codes. If you must use a dark background, white foreground is safer than a light brand color, and you should test extensively across different scanning apps. Gradient and patterned foregrounds do not work. The QR algorithm requires each module to be a uniform, distinguishable color. Gradients that transition from dark to light across the code will break decoding. Keep each module solid.
Adding a Logo to Your Branded QR Code
Placing a small logo in the center of a QR code is a popular design move that makes the code look finished and professional. Major brands do this routinely on packaging and marketing materials. Here is how to do it correctly. First, generate the QR code with error correction level High (H). This is non-negotiable — H level gives the code 30% damage tolerance, which is what allows part of the pattern to be obscured by the logo. Lower correction levels will result in a code that fails to scan. Download the QR code PNG at 512 or 1024 pixels for best results. Open it in a design tool — Figma, Canva, Adobe Illustrator, Photoshop, or even a basic image editor like GIMP. Place your logo in the exact center of the QR code. The logo should be square or have a square container (a circle, rounded square, or plain square background). The logo plus its container should cover no more than 25–30% of the total QR code area. If the logo is too large, the code will fail regardless of error correction level. Give the logo a solid white or brand-colored background behind it. This prevents the QR modules from showing through the transparent parts of a logo PNG, which can confuse scanners. After adding the logo, test the composite image on at least two different scanning apps. If it fails, reduce the logo size or check that the error correction was set to H before generating. Export the final composite at the highest resolution you need. For print, export at 300 DPI or higher. For web use, 200–400 pixels wide is sufficient.
Color Accessibility and Brand Guideline Compliance
Designing a branded QR code is not just about aesthetics — it also involves practical questions about accessibility and brand compliance that professional designers should consider. Color accessibility: approximately 8% of men and 0.5% of women have some form of color vision deficiency. The most common is red-green deficiency (deuteranopia and protanopia). If your brand color is a red or green, check how it appears to a person with color vision deficiency using a simulator. A QR code that is distinguishable in normal color vision but appears low-contrast under deuteranopic simulation may scan poorly for some users. In practice, contrast (luminance difference) matters more than hue, so high-contrast codes are generally accessible regardless of color choice. Brand guidelines: many organizations have strict brand guidelines that specify exact colors, minimum sizes, and clear space rules. When applying brand colors to a QR code, verify that the usage is consistent with the guidelines. Some brand guides specify that the primary color can be used as a solid fill; others restrict certain colors to specific contexts. Your marketing or brand team may have a preferred approach. Print color modes: if you are sending the QR code to a professional printer, be aware that screen colors (RGB) and print colors (CMYK) can look different. The hex color you specify in the QR generator is RGB. Ask your printer to match the Pantone or CMYK equivalent of your brand color, not the screen RGB, for color-critical applications. A very slight color shift is usually acceptable for QR codes as long as contrast is maintained.
Frequently Asked Questions
- Can I use a white QR code on a colored background?
- Yes, but with caution. White modules on a dark background (an inverted code) can scan on modern smartphones, but many older QR apps and some camera systems are optimized for dark-on-light patterns and may struggle. If you must use a dark background, set a pure white foreground and test across multiple devices and apps before printing. A safer alternative is to place the standard code inside a white box on the dark background.
- Will a colored QR code scan as reliably as a black-and-white one?
- A high-contrast colored code — dark brand color on white — will scan just as reliably as black on white in most real-world conditions. The key factor is luminance contrast, not color itself. If your colored code has a contrast ratio above 4:1, it will perform on par with a standard code. Scan reliability only drops when low-contrast colors are used, when the code is printed at very small sizes, or when inverted colors are used on suboptimal printing materials.
- What hex code is the WikiPlus brand color, and does it work as a QR foreground?
- The WikiPlus brand color is #0011ff, a vivid electric blue. On a white background, this color has a high luminance contrast (approximately 6.5:1) well above the 4:1 minimum threshold for reliable QR scanning. It works as a QR foreground color on white or very light backgrounds. Avoid using it on medium or dark backgrounds as the contrast drops significantly.