Which formats can I download?

PNG (raster, ready to print or paste anywhere) and SVG (vector, infinitely scalable without losing sharpness).

Will the QR code still scan after I change the colours?

As long as there is strong contrast between the foreground and background (dark code on a light background works best), and you avoid using colours that your phone camera will confuse. Test with your own device before printing at large scale.

Is there a content length limit?

Long strings produce denser QR codes that are harder to scan from a distance. For URLs, short them first (e.g. via a URL shortener) if the resulting code looks overwhelmingly dense.

Can I add a logo in the middle?

Not in this tool. Logo overlays require error-correction tuning to stay scannable and are best done with a dedicated QR-with-logo tool. We keep this one focused on colour and sizing.

Does my input leave my device?

No. The QR encoding and the image rendering both happen in your browser. Absolutool never sees what you encode.

Free Styled QR Code Generator

Create customized QR codes with your choice of colors and size. Download as PNG or SVG.

Generated entirely in your browser

Text or URL

Size (px)

300 px

Foreground (Dark)

Background (Light)

Error Correction Level

Preview will appear here

About QR Codes

QR (Quick Response) codes are 2D barcodes that can be scanned by smartphones and dedicated readers. They encode text, URLs, contact information, WiFi credentials, and more. This generator creates styled QR codes with custom colors and sizes suitable for marketing, packaging, and digital use.

Error Correction Levels

L (7%) · Basic recovery, works when mostly intact
M (15%) · Standard, balanced protection (recommended)
Q (25%) · High recovery for damaged codes
H (30%) · Maximum recovery for heavily damaged codes

Frequently Asked Questions

Can I use custom colors in a QR code?

Yes! Most modern QR scanners handle colors well. Ensure high contrast between foreground and background for reliable scanning. Test with your target scanners.

What size should I use?

Larger QR codes scan faster and more reliably. Use at least 100x100px. For print, use 300+ px or higher for small print applications.

PNG or SVG · which format is better?

Use SVG for scalable vectors (web, print scaling). Use PNG for raster images (web display, quick sharing). Both work equally well for scanning.

What this styler actually does, and where the wider field goes

This page exposes a deliberately small set of styling controls: pick a foreground (dark) colour, a background (light) colour, an output size between 100 and 1000 pixels, and an error-correction level (L / M / Q / H). It then renders a standard QR code with those settings, entirely in your browser, and offers PNG and SVG download. There's no logo embedding, no rounded-module shapes, no decorative finder-pattern variants. Those features exist in the wider styled-QR ecosystem and are described below, they're what most people learning about \"styled QR codes\" want to understand, but a careful tool is honest about what it ships.

Why styling works at all, the error-correction headroom

QR codes use Reed-Solomon error correction (introduced by Irving S. Reed and Gustave Solomon in 1960, the same coding scheme that lets a CD play through a fingerprint smudge and a Voyager probe phone home from interstellar space). The code is encoded redundantly so that a percentage of the modules can be missing or misread and the original data can still be recovered. The four standardised levels, in Denso Wave's own words:

Level L (Low), approximately 7% of codewords can be restored.
Level M (Medium), approximately 15%. \"Most frequently selected.\"
Level Q (Quartile), approximately 25%.
Level H (High), approximately 30%.

Denso Wave's official guidance: \"Level Q or H may be selected for factory environment where QR Code get dirty\" and \"Level L may be selected for clean environment with the large amount of data.\" Pick the lowest level that survives your real-world scan conditions, because every step up from L to H makes the code denser (more modules per side) for the same payload.

For styling, the relationship is direct: more error-correction headroom equals more visual liberty without breaking scanning. A logo, a recoloured module, a rounded module shape, even a soft colour tint of the supposedly-light background, each one consumes some of the budget. Add too many and the scanner's Reed-Solomon decoder runs out of corrections. The practical recipe most styling generators follow: if you're adding a logo or any \"designer\" styling, bump to Level H, and even then test on multiple devices before printing at scale.

Module/dot shape variants

The standard QR code in the spec uses square modules with no rounding. Modern styling libraries, and the wider styled-QR ecosystem, typically expose a fixed set of named module-shape options. The de-facto vocabulary, established by Denys Kozak's qr-code-styling library and now copied by a host of generators:

square, the default, identical to the ISO/IEC 18004 reference symbol. Maximum scanner reliability.
rounded, square modules with rounded corners. Slight loss of contrast at the corners but visually softer.
dots, fully circular dots with no module merging. Strongest \"design\" look, costs the most decoding margin.
classy, modules with one rounded corner, designed to look like flowing chevrons when adjacent dark modules align.
classy-rounded, the classy shape with a heavier curve.
extra-rounded, square with maximum corner radius, just shy of becoming circular.

The library treats adjacent same-coloured modules as a connected blob before applying the shape, which is why rounded and classy give continuous flowing strokes rather than each module looking islanded. The scanner reads the centres of the modules, so as long as the centroid-to-centroid contrast survives, the camera is happy. This tool currently exposes only the standard square modules, these other shapes need a different rendering library to support.

Eye / finder-pattern variants

Every QR code has three \"eyes\", the large bullseye-shaped patterns in the top-left, top-right, and bottom-left corners. These finder patterns have a fixed module ratio of 1:1:3:1:1, an internal proportion that Masahiro Hara's team analysed against printed materials of the time to find a sequence that almost never occurs by accident, so the scanner can spot them quickly.

Each finder pattern actually consists of two parts: an outer corner square (a 7×7 module ring with a 5×5 inner ring of the inverse colour) and a corner dot (the 3×3 solid centre). Styling libraries treat these two parts as independently customisable, which is why you'll see separate \"frame\" and \"ball\" controls in tools like QRCode Monkey and QR TIGER. Both can take any of the same shape options as the data modules: square, dot, rounded, extra-rounded, classy, classy-rounded.

Scannability caveat for eye styling: the finder patterns are how a scanner finds the code in the first place. Distorting them too aggressively (e.g. tiny dots where solid squares should be) can make the camera fail to lock on, especially at distance or at an angle. The safe rule: keep at least the outer corner-square ring as a continuous closed shape (square, rounded, extra-rounded, not \"dots\"), and you can be more adventurous with the inner dot.

Embedded logos

This is the single most-requested QR styling feature in 2026. The mechanism is brutally simple: the QR code is generated as normal, then a logo image (PNG, JPEG, SVG) is drawn on top of the centre, replacing some of the data modules. The Reed-Solomon error correction then \"fills in\" the obscured modules at scan time. Practical limits:

Always use error-correction Level H (30%) when embedding a logo.
Keep logo coverage at 20-25% of the total module area (not the visual area including the quiet zone). Above ~25% you're encroaching on the recovery margin needed to absorb real-world scan noise. Above 30% you're virtually guaranteed to fail on cheaper scanners and at distance.
Centre the logo. The corners host the finder patterns and (on larger codes) timing patterns and alignment patterns; obscuring those is a fast way to break the code completely.
If the logo has any colour close to the background, give it an opaque \"plate\" behind it so the scanner doesn't get confused at the edge.
Always test on at least one iPhone, one mid-range Android, and one dedicated scanner app before printing at scale.

This tool doesn't embed logos. It's a deliberate scope choice, logo overlays need a careful interaction model (upload, positioning, transparency, an EC-level lock) that doesn't fit a \"colour + size\" tool. For QR-with-logo workflows, look at the related QR Code Generator.

Colour customisation, what's safe and what isn't

Colour is the single styling lever this tool actually exposes, so this section is the most directly relevant. The first rule: contrast. A QR scanner looks at every module and decides \"dark or light?\", and the bigger the gap between the two, the faster and more reliably it decides. The widely-cited working number for QR codes specifically is a contrast ratio of at least 4:1 between foreground and background, with 4.5:1 or higher preferred for real-world reliability. WCAG 2.x's general guidance on non-text graphics (criterion 1.4.11) sets a 3:1 minimum; QR codes need to clear that bar by a comfortable margin because the camera has no human's contextual reasoning to fall back on.

Reliable: dark navy, dark green, dark purple, charcoal, black on white, ivory or very pale tints.
Visually nice but often unscannable: mid-tone red on mid-tone green, \"muted brand palette\" on muted background, pastel-on-pastel.
Pure red as the foreground is an old failure mode worth calling out. Many older CCD scanners use a red illumination LED, which makes red look the same as white to the sensor. Modern smartphone cameras are fine, but if your QR will be scanned by industrial readers, avoid red foregrounds.

The second rule: don't invert. A QR code is, by spec, dark modules on a light background. Light-on-dark (\"inverted\") QR codes are technically valid and the smartest scanners (modern iOS Camera, latest Google Lens) can flip and read them, but a meaningful chunk of phones in the field can't. Older Android camera apps, third-party scanner apps, and almost all dedicated barcode scanners assume dark-on-light and will fail on the inverse. The recommended pattern when you have a dark brand background and want to put a QR on it: don't invert, instead place a standard dark-on-light QR inside a contrasting light \"plaque\" or framed box on the dark surface.

The third rule: gradients and multi-colour modules cost decoding margin. The styling libraries support linear and radial gradients on the dark modules, the background, and even the eyes independently, and they look gorgeous on screen. But every smooth colour transition makes the per-module dark/light decision harder for the scanner, especially in poor light. Gradients are safest when the gradient stays within a single dark family (e.g. navy fading to deep purple, both clearly \"dark\") rather than crossing through mid-tones. This tool currently exposes only solid colours, which is the safest starting point.

PNG vs SVG, output format choice

PNG is a raster format. The QR code gets rendered to a fixed pixel grid. Pros: works everywhere, including older email clients and any image-display surface. Cons: scaling up beyond the rendered resolution causes blurring and aliasing along the module edges, which can compromise scannability on large prints. For a 300px PNG used on a 600×600 mm poster, the modules will look noticeably soft.

SVG (Scalable Vector Graphics) is a vector format. The QR code is described as a set of polygons and the renderer rasterises them at whatever resolution the display or print device asks for. Pros: infinitely scalable without quality loss; very small file size (often a few kB); editable in Illustrator, Affinity Designer, Inkscape; works in modern web browsers natively. The practical rule: if it's going on screen, either format is fine; if it's going to print, especially at any scale above postcard size, choose SVG.

Avoid JPEG for QR codes. JPEG's lossy compression artefacts cluster around high-contrast edges, exactly where every QR module boundary is, and even at high quality settings JPEG can introduce just enough edge fuzz to break decoding on cheaper scanners. PNG is the correct raster choice.

The quiet-zone requirement (often forgotten)

ISO/IEC 18004 requires a quiet zone, a margin of light-coloured background, of at least 4 modules wide on all four sides of the code. Without it, the scanner can mistake nearby type, borders, or background imagery for part of the code and either fail to decode or decode incorrectly. In practical terms: if a single module is 2mm wide on the printed code, the quiet zone needs to be at least 8mm on each side. This tool's PNG and SVG downloads include the standard quiet-zone margin out of the box. Many \"cropped\" Instagram-friendly QR exports break the rule and that's a leading cause of \"why doesn't my code scan?\" frustration.

A note on payment QR codes

A non-trivial slice of the world's QR-code traffic is for payments, and these payment QR codes are not generic. EMV QR Codes (EMVCo specification, current version 1.1, last updated 27 November 2020) encode a structured payload of merchant ID, transaction amount, currency, MCC, country code, and a CRC checksum. Alipay and WeChat Pay (China), UPI (India), PromptPay (Thailand), PayNow (Singapore), PIX (Brazil) follow regulator-defined payloads. They look like ordinary QR codes visually, but a generic camera app can't actually pay anything with them, the payload has to be issued by the payment platform itself. You can't generate a working payment QR code with this tool, no matter how authentic the visual styling. Use your payment processor's merchant dashboard.

The post-2020 brand-styled QR boom, why this matters

QR codes had been technically available everywhere since around 2010, but adoption in the West stayed shallow until COVID-19 forced a contactless pivot. QR-code interactions grew 94% from 2018 to 2020; downloads attributed to QR-code scans grew 750% between Q1 2020 and Q4 2021. Roughly 89 million US smartphone users scanned a QR code in 2022. Juniper Research projects QR-code payments will exceed $8 trillion in annual spend globally by 2029, up from $5.4 trillion in 2025. The branded-QR vendor QR TIGER claims styled/branded QR codes get up to 70% more scans than plain black-and-white codes (treat the exact figure as a vendor claim, but the directional point that brand styling drives scans is widely held).

By 2026 a QR code is no longer a piece of weird utility infrastructure, it's a brand surface. Companies want it to feel on-brand the same way they want their typography or packaging on-brand. That's why the \"styler\" search intent exists at all and why competing tools all converge on the same dot/eye/colour/logo control set.