Skip to content
QRMakery
Create QR code

QR Code Color Generator

Change the code colour and the background, and watch the contrast ratio move as you do it. The number is the thing that decides whether it scans, not the hue.

If the pair drops below what scanners can separate, the download locks and the tool says why.

Add your link or content

What the code should contain

Only http and https links are allowed. Missing schemes become https.

Customize your QR code

Finder squares stay square whichever you pick. They are what a scanner locates the code with.

The blank margin scanners need. 4 is the standard minimum.

Download your QR code

✓ Scan-tested: this code reads back correctly.

Contrast 21:1, Strong

Version 2 · 33 modules · print at least 13.2 mm wide

Six Brand Colours, Scored

Advice about QR colour usually stops at "keep good contrast", which leaves you guessing about the specific colour you have to use. Here are six ordinary brand shades on white, each with its measured ratio and each rendered and read back at build time.

  • Deep blue#1d4ed8
    Workable6.7:1 on whitedecoded
  • Forest green#166534
    Safe in print7.13:1 on whitedecoded
  • Brand red#b91c1c
    Workable6.47:1 on whitedecoded
  • Burnt orange#c2410c
    Workable5.18:1 on whitedecoded
  • Teal#0891b2
    Screen only3.68:1 on whitedecoded
  • Yellow#eab308
    Will not scan1.92:1 on whitedid not decode
Contrast ratios are WCAG relative luminance against white, the same calculation the editor runs while you type. Each code was rendered and read back at build time. Note the two verdicts can disagree: a colour can decode cleanly on a screen render and still be marked screen-only, because a clean render is the easiest test a code ever faces.

The pattern is worth naming: darkness matters and hue does not. A deep blue and a forest green behave almost identically because they sit at similar luminance. Yellow fails not because it is yellow but because it is light, and it would work well on a dark background.

The Thresholds This Tool Uses

  • Below 3:1, the download locks. Most scanners cannot separate the modules from the background at all.
  • 3:1 to 4.5:1 is marked risky. It often works on a phone screen and fails in print or poor light, which is the worst kind of failure because your test passed.
  • 4.5:1 to 7:1 is workable. Fine for most printed work with a bit of margin.
  • Above 7:1 has real headroom. Black on white is 21:1, and every point below that is budget you are spending on brand.

If you are applying a whole visual identity rather than picking one colour, the branded code tool puts the colour, the logo and the contrast check on one screen.

Contrast is not the only thing drawing on that budget. A logo destroys modules, rounded or dotted modules remove inked area, and printing small removes margin too. Any one of them is usually fine. Three at once is where codes stop working.

What This Does Not Do

  • No gradients. A gradient changes the contrast ratio across the symbol, so a single measurement would be a fiction. Solid colours only, which is what reliably scans anyway.
  • The measurement is sRGB on a screen. Ink on uncoated paper is darker and duller than the same hex on a monitor, so treat a marginal pass as a fail for print.
  • It cannot tell you whether an inverted code will scan on a particular hardware reader. It warns you that some will refuse it outright.
  • For a code with no background at all, use the transparent tool, which tests against several surfaces instead of one.

QR Code Colour Questions

Can a QR code be any colour?

Almost. What matters is the contrast between the modules and the background, not the hue. This tool measures the ratio as you type and refuses the download below about 3:1, which is where most scanners stop reading reliably.

What contrast ratio does a QR code need?

Above 3:1 to scan at all, above 4.5:1 to survive print and poor lighting, and 7:1 or better for real margin. Plain black on white is 21:1, so a brand colour is always spending some of that budget. The tool shows the number for your exact pair.

Can I use a light code on a dark background?

It often works on a phone, and some older hardware scanners only look for dark-on-light and will not read an inverted code at all. The tool warns you when your colours are inverted. If the code is going somewhere public, test it on real devices first.

Why did my yellow QR code stop working?

Yellow on white is around 1.2:1, far below what any scanner needs. Yellow is one of the few colours that fails outright rather than being marginal. On a dark background it can work well, which is the inversion trade above.

Does colour affect how small I can print the code?

Indirectly. Lower contrast eats the same margin that a small print size eats, so a low-contrast code needs to be printed larger than a black one carrying the same data. The minimum width under the preview assumes good contrast.

More for make it yours

Colour, a logo in the middle, artwork behind it, each one measured against what still scans.

All tools

Guides worth reading

All guides
  • Comparisons

    Static vs Dynamic QR Codes

    What the redirect actually buys you, measured on real encoded codes, and which payloads are worse off for it.

    16 min read