Create styled QR codes with embedded logos, custom colors, rounded modules, and gradient fills.
An artistic QR code is a data grid with makeup on: the tool encodes your text as the standard module pattern, then restyles those modules with brand colors, gradient fills, rounded corners, and a centered logo, and exports the result as an image. Scanners read the pattern underneath, so the styling is cosmetic. What users most often get wrong: styling first, testing later. Colors with too little contrast, or a logo covering more than the error-correction level can rebuild, produce a beautiful image no phone can read. Choose error correction H for logo work, keep dark modules on a light background, and scan-test the export before printing.
A concrete input and expected output from the current implementation.
Input
Text: https://example.com, error correction M (15%), foreground dark navy #1A237E on white, rounded modules, no logo
Expected output
A version-2 QR code (25x25 modules) exported as a PNG image: rounded navy modules on white, including the standard 4-module quiet zone border. Scanned, it decodes back to https://example.com.
The URL is 19 ASCII bytes. The smallest QR version (21x21 modules) holds at most 17 bytes in byte mode, so the encoder moves up to version 2, which measures 25x25 modules and stores up to 26 bytes at level M. Version size and error correction are chosen by the encoder from the input; the module grid is what scanners read.
Every QR code carries Reed-Solomon redundancy: level L recovers about 7% of codewords, M 15%, Q 25%, H 30%. Decoration destroys modules - a logo, a busy gradient, heavy rounding - and the decoder rebuilds missing data from that redundancy. The error-correction selector is therefore a dial for how much art the code can tolerate. Raise it to H before adding a logo or dense styling.
Scanners sample the center of each module, which is why rounded corners, gradients, and mild decoration usually still decode. What breaks a code: foreground and background too close in luminance, inverted light-on-dark schemes, art covering a finder pattern, and cropping away the quiet zone - the empty border of at least 4 modules the standard requires. The tool adds the quiet zone; stripping it in an image editor is a classic failure.
Yes, if you keep enough contrast: dark modules on a light background. Dark navy, green, red, and brown scan reliably; pale foregrounds and inverted light-on-dark schemes are the usual failures. Rounded corners and gradients are safer than expected because scanners sample the center of each module. Scan the result with your phone before printing at scale - screens and paper render contrast differently.
The safe budget comes from the error-correction level: about 7% of codewords at L, up to 30% at H, so switch to H before adding a logo. Codeword recovery does not map one-to-one to image area, so the practical rule is to keep the logo inside roughly the central quarter of the code and clear of the three corner finder patterns. Test with a couple of scanners; tolerance varies.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.