Colored QR code generator
Make a colored QR code in your brand palette, with a solid foreground, a linear or radial gradient and any background, and let the contrast checker tell you whether phones will still read it. The code is static, so it never expires and nothing routes through a server. It is free with no sign-up, made entirely in your browser, and verified by a real scanner before you download it.
Content: URL
The full address of the page. https:// is added if you leave it out.
Style
PNG, JPG or SVG up to 2 MB. It stays on your device.
Your codes on this device
Off by default. When on, each downloaded code (type, content, style) is saved in this browser only, never uploaded. You can delete them at any time.
How to make a colored QR code
- Paste the link into Website address.
- Set Foreground colour. This page starts with the Bold preset, a deep indigo on white; any dark colour works.
- For two tones, switch Gradient to linear or radial and pick the second colour. Keep both stops dark.
- Set Background colour to white or a very light tint and watch the contrast ratio: a warning appears below 3:1 and the download is blocked below 1.5:1.
- Wait for Verified: scans as URL, then Download PNG or Download SVG.
Colored QR code details
The generator takes any colour for the modules and any colour for the background, then measures the difference between them the way accessibility tools do, as a luminance contrast ratio. Black on white scores 21:1. This page opens with the Bold preset, indigo on white, at roughly 11:1, which scans as reliably as black. As the colours move closer the ratio drops; below 3:1 the checker warns, and below 1.5:1 it blocks the download and explains why, because at that point even the verifier cannot read the code.
The rule is dark on light
Scanners find a code by looking for dark modules on a lighter surround. Any hue works if it is dark enough: navy, forest green, burgundy, charcoal, deep purple. Pastels, yellows and light greys fail as foregrounds, and swapping the two colours produces an inverted code that many cameras reject. The inverted warning appears whenever the foreground is lighter than the background, even when the ratio itself looks fine.
Gradients
Gradient blends the foreground from one colour into a second, linearly at an angle or radially from the centre. The catch is that the lighter end of the gradient sets the effective contrast. Keep both stops dark, so navy to violet works and navy to sky blue does not, since the pale modules at one edge become invisible to the camera. Verification runs on the gradient render, so the badge is the final word.
Backgrounds and print
White or a very pale tint of your brand colour is the safe background. Strong background colours cut contrast from both sides, and ink prints lighter than a screen shows it, so choose a darker shade than looks necessary and scan a proof. The explainer on why QR codes stop working covers the colour and contrast failures people meet in print.
This code never expires
Colour is only paint on top of the pattern; the address inside is unchanged, so a coloured code lasts exactly as long as a black one. This is a static QR code: the data is written into the pattern, so scanning it needs no server, no account and no subscription. There is nothing to renew and no redirect that can be switched off, which is why a code made here keeps working for as long as the printed copy exists. The trade-off is honest: a static code cannot be edited after printing and does not count scans. If you need either, encode a link to a page you control. Read how static and dynamic codes differ, and if a code you already have has stopped working, see why QR codes expire.
Styling, formats and print size
Every code can be styled in the Style panel: six dot shapes, corner shapes, solid or gradient colours, a transparent background, a quiet zone of 0–8 modules, and your own logo up to 30 percent of the width. A contrast checker warns below 3:1 and blocks downloads below 1.5:1, and after each change the preview is decoded again so the badge tells you whether the styled code still scans.
| Output | Best for | Notes |
|---|---|---|
| PNG | Web, documents, quick prints | 256 to 4096 px; transparent background supported |
| SVG | Designers and print shops | Vector, scales without limit; logo embedded |
| Printing at an exact size | Vector modules at a chosen width in mm or inches, optional caption | |
| JPG | Platforms that reject PNG | White background; no transparency |
| EPS | Legacy print workflows | Vector from the module matrix, no logo |
| Copy / Print | Pasting into a document; a quick paper test | PNG to the clipboard; print view with caption |
Print size: as a rule of thumb the code should be at least one tenth of the scanning distance wide, with the quiet zone included.
| Scan distance | Minimum width |
|---|---|
| 0.5 m (arm's length) | 5 cm |
| 1 m | 10 cm |
| 2 m | 20 cm |
| 5 m | 50 cm |
Coloured inks print lighter than they look on screen, so give a coloured code about 20 percent more width than a black one and ask the printer for a proof. Keep the background white or near white.
The QR code size guide has a calculator for module size, DPI and distance.
Frequently asked questions
Do colored QR codes scan as well as black ones?
Yes, when the colour is dark enough. Scanners measure the difference between modules and background, not the hue, so navy, forest green, burgundy or the indigo this page starts with all read like black. Trouble starts when the foreground is pale or the background is strong.
Which colours are safe for a QR code?
Any foreground that gives a ratio of 3:1 or better against the background, and the higher the safer. Dark blues, greens, reds, purples and charcoal are fine on white. Yellow, orange, light grey and pastels fail as foregrounds. Keep backgrounds white or very light.
Can I use a gradient?
Yes. **Gradient** offers a linear blend at an angle or a radial blend from the centre, between the foreground and a second colour. The lighter end decides whether the code scans, so keep both stops dark: navy to violet works, navy to sky blue does not.
Why is the download blocked?
The two colours are below 1.5:1 contrast, which means the verifier could not tell modules from background and no phone would either. Darken the foreground, lighten the background or drop the gradient until the ratio climbs. Between 1.5:1 and 3:1 you get a warning instead.
Can I use a coloured background?
A pale one, yes. A light cream, a soft grey or a tint of your brand colour keeps the ratio high. A saturated or mid-tone background eats contrast from the other side and can push a dark foreground into the warning zone. Keep a light panel behind the code.
Will the colours print accurately?
Screens show RGB and printers use CMYK, so a vivid indigo may come out slightly duller and lighter on paper. That rarely breaks a code with good contrast, but it can tip a marginal one. Choose darker shades than you think you need and scan a proof.
Related
Last updated . QR Code is a registered trademark of DENSO WAVE INCORPORATED. Open-source engines are listed on the how it works page.