QR Code Studio

A web-based generator for branded, logo-embedded QR codes, built with vanilla JavaScript around the qr-code-styling library. It ships with the HBH Projekt brand assets and one-click presets, but generates a QR code for any URL or text.

Features

Center logo (picture in the middle)

• HBH icon (compact square) or HBH wordmark built in — no external files.
• Upload your own PNG / SVG / JPEG / WebP logo.
• Adjustable logo size and padding, plus a "clear QR dots behind the logo" toggle so the mark sits on a clean background.
• Smart defaults: switching to the wide wordmark automatically keeps the dots behind it (a wide logo stays readable that way), while compact logos punch a clean hole.

Visual styling (best-practice, out-of-the-box)

• Dot styles: square, rounded, extra-rounded, dots, classy, classy-rounded.
• Corner styles: independent shape & color for the finder squares and their inner dots.
• Color & gradients: solid color or a linear gradient (two colors + angle) for the dots; custom background or full transparency.
• Style presets: HBH Brand, HBH Gradient, Classic, Rounded, Dots, Mono Blue — a curated look in one click, then fine-tune anything.
• Call-to-action frame: wrap the code in a branded frame with a caption (e.g. "SCAN ME"); captions measurably lift real-world scan rates.

Reliability that isn't guesswork

• Live scannability check: every render is silently decoded in-browser with jsQR. A green ✓ confirms the styled, logo-covered code still reads; a red warning tells you to raise error correction or shrink the logo before you print it.
• Auto error correction: adding a logo bumps error correction to High (30%), the level needed to survive the overlay.

Export

• Download as PNG, JPEG, or SVG (SVG stays razor-sharp at any size).
• PNG/JPEG include the call-to-action frame; PNG & SVG preserve transparency.

Usage

1. Open index.html in a browser (it loads the libraries from a CDN, so keep an internet connection; or serve the folder locally with python -m http.server).
2. Enter a URL or text — the preview updates as you type.
3. Pick a preset, choose a logo, and fine-tune shapes, colors, and the frame.
4. Watch the scannability indicator stay green, then download PNG / JPEG / SVG.

Error correction levels

• Low (7%) – best scanning conditions, no logo.
• Medium (15%) – general use without a logo.
• Quartile (25%) – small logos or busier styling.
• High (30%) – recommended with any center logo; the default here.

Brand assets

logo-data.js contains the HBH Projekt logo (icon + wordmark) as transparent, base64-encoded PNGs plus the brand colors (blue #1d3374, red #e30613). It was generated from HBH_logo_CMYK.wmf. Embedding the images as data URIs keeps the tool self-contained and avoids "tainted canvas" export errors when opened from disk.

Technical details

• Vanilla JavaScript, no build step.
• qr-code-styling for rendering.
• jsQR for the live scannability check.
• Runs entirely in the browser — no data leaves the page.

Browser compatibility

Works in current versions of Chrome, Edge, Firefox, Safari, and Opera.

License

Open source under the MIT License. The HBH Projekt logo is a trademark of HBH Projekt and is included here for use in that company's own QR codes.

Credits

• QR rendering by qr-code-styling
• Scannability verification by jsQR