Skip to main content

QR Code Generator

Encode URLs, text, and contact data into customizable QR codes instantly with precision error correction, physical print sizing, custom color palettes, and SVG vector exports.

I designed this interactive tool to solve the real-world friction of generating print-ready QR codes for packaging, digital signages, and developer testing directly in the browser without relying on third-party server endpoints or subscriptions.

Use the Tool​

Loading QR Generator...

Get notified about updates to this tool

No spam. Just high-quality updates about new features and guides.

What This Tool Does​

Core capabilities​

My generator runs client-side JavaScript to transform any string into standard ISO/IEC 18004 compliant QR matrix patterns. I engineered the control panel to give you full control over encoding, optical contrast, physical dimensions, and vector output.

Problems solved​

  • Print scaling & density issues: Avoid blurry pixelated prints by calculating exact pixel output based on target physical size (mm, cm, or inches) at target print DPI (150 to 600 DPI).
  • Custom layout integration: Seamlessly strip the standard 4-module quiet zone margin to embed QR code matrix designs flush against custom container borders.
  • Damage resilience tuning: Adjust Reed-Solomon error correction levels dynamically depending on whether the QR code will be displayed cleanly on screen or printed on physical surfaces subject to wear.
  • Visual branding & contrast: Pick custom foreground and background colors with an instant color-switcher button (⇄) while previewing optical contrast in real-time.
  • Vector vector output: Export resolution-independent SVG vector graphics for Adobe Illustrator, Figma, or professional print production alongside crisp high-res PNGs.

Target audience​

  • Backend engineers & developers verifying payload structures, vCards, or deep-link URI schemes before embedding them in automated codebases.
  • Graphic designers & prepress specialists creating business cards, flyers, or product packaging requiring exact physical millimeter dimensions and SVG vector paths.
  • Event organizers & marketers generating high-res scannable codes for posters, badges, and Wi-Fi access signs.

Technical Deep-Dive: Error Correction and Print Math​

Error correction (ECC) levels​

When I implemented the Reed-Solomon error correction pipeline, I exposed all four standardized ECC threshold levels to allow optimal balancing between data payload capacity and optical resilience:

LevelData RecoveryReed-Solomon OverheadBest Use Case
L (Low)~7% safety threshold~7% codewordsClean digital screens, minimal density
M (Medium)~15% safety threshold~15% codewordsStandard print materials (Default)
Q (Quartile)~25% safety threshold~25% codewordsOutdoor posters, industrial labels
H (High)~30% safety threshold~30% codewordsCentral logo overlays & harsh wear environments

As error correction increases, additional parity blocks are added to the matrix grid. This automatically bumps the QR Version (1–40) up to a larger module grid size (e.g. Version 1 is 21×21 modules, whereas Version 40 is 177×177 modules).

Print dimension & DPI calculations​

To guarantee sharp physical prints without blurriness, I added dynamic physical-to-pixel conversion math:

Pixels = round((Physical Width in mm / 25.4) * DPI)

For example, generating a 50 mm wide code at 300 DPI yields an exact pixel render resolution of 591 × 591 px.

Outer quiet zone (margin) customization​

ISO/IEC 18004 specifies a mandatory 4-module "quiet zone" around the matrix to prevent optical scanner interference. However, when placing QR codes within branded cards or dark vector containers, the default white border can disrupt design aesthetics. My tool lets you toggle Sans outer quiet zone (margin: 0), producing edge-to-edge matrices ready for custom padding in your layout software.

How It Works​

Input formats​

The encoder handles any UTF-8 string up to the maximum capacity of QR Version 40 (approx. 4,296 alphanumeric characters or 2,953 bytes in Byte mode):

  • URLs & Deep Links: https://hrekov.com
  • Wi-Fi Credentials: WIFI:S:MyNetwork;T:WPA;P:MyPassword;;
  • vCards: BEGIN:VCARD\nVERSION:3.0\nN:Hrekov;Serhii\nEND:VCARD
  • Plain Text & Tel URIs: tel:+1234567890

Client-side generation architecture​

  1. Encoding: Input text is parsed into the minimal byte stream.
  2. Matrix Construction: Reed-Solomon error correction codewords are computed and arranged into the 2D grid matrix with alignment patterns.
  3. Canvas & Vector Rendering: The grid is rendered locally using HTML5 Canvas or SVG element generation.
  4. Color & Margin Processing: Foreground and background colors are applied block-by-block with configured margin offsets.
Developer API Available
Need to run QR code generation programmatically in your pipeline? Explore our developer API.
Get API Key

Practical Uses for QR Codes​

  1. Website & Landing Pages: Direct users to specific documentation, portfolio items, or campaign pages.
  2. Wi-Fi Access: Share guest network credentials seamlessly without revealing raw passwords.
  3. Digital Business Cards (vCard): Encode full contact cards for instant phone contact imports.
  4. Print Packaging: Attach high-density SVG vectors to physical product boxes for manuals and videos.
  5. Event Check-ins & Tickets: Render durable Q/H error-corrected codes for scanners.

Frequently Asked Questions​

Are these QR codes generated privately?​

Yes! I designed the generator to process data entirely in your local browser using client-side rendering. Your text, URLs, or contact details are never sent to or logged on an external server.

What is the difference between PNG and SVG downloads?​

PNG files are raster bitmaps rendered at your chosen DPI resolution, ideal for web use, office documents, or image viewers. SVG files are XML-based vector graphics that scale infinitely without pixelation, perfect for print designers using Illustrator, CorelDRAW, or Inkscape.

How do custom colors affect scan rates?​

To ensure high scan reliability, always maintain high luminance contrast between the foreground matrix and background container. The foreground color should be noticeably darker than the background (or vice-versa if using inverted high-contrast palettes).

Will my static QR code ever expire?​

No. All generated QR codes are static - data is hardcoded directly into the geometric matrix. As long as your destination link or text remains valid, the code will scan indefinitely.

Is there a developer API available?​

Yes! If you need to generate codes programmatically in your own applications, check out our API documentation for details.

Get Early Access to New Tools

Be the first to try new APIs and applications. No noise. Only meaningful releases and practical engineering insights.

Last updated on