Customizing the QR Code Design: Shape, Colors, Gradient and Corners

Introduction

A QR code on a poster or a page of the intranet is part of the design, and a black-and-white square rarely fits it. QR Code Generator lets you change the shape of the dots, the colors and the corner markers of the code. The settings are in the collapsible sections below the data tabs, and every change is shown in the preview at once. This article describes the sections Shape, Colors, Corner Square, Corner Dots and Error Correction and gives the rules that keep a styled code readable.

All sections are collapsed when the web part opens. Click the name of a section to expand it.

Default design

A new web part starts with the following design:

Shape

The Shape section sets the style of the small dots that carry the data. The six styles are shown as pictures, and a click on a picture selects the style:

• separate round dots;
• rounded — neighboring dots merge into lines with rounded ends;
• classy — dots with two cut corners;
• classy rounded — the same with smoother corners;
• square — the classic look of a QR code;
• extra rounded — lines with strongly rounded ends.

The shape changes only the look of the code. The encoded data and the number of dots stay the same.

Colors

The Colors section contains two color pickers:

• Color — the color of the dots;
• Background Color — the color of the area behind the code.

Each picker has a color field, a hue slider and a transparency slider, and below them the Hex, Red, Green, Blue and Transparency boxes for exact values. To use a corporate color, paste its code into the Hex box.

With the transparency of the Background Color at 100, the code has no background and takes the color of whatever is under it: the section of the page, a slide, a printed sheet.

Gradient

Select the Gradient check box to fill the dots with a transition between two colors instead of a single color. Two more settings appear:

• the type of the gradient — Linear, from the left edge of the code to the right one, or Radial, from the center to the edges;
• Second Color — the color in which the gradient ends. The gradient starts with the color set in Color.

The gradient applies to the dots only. The corner squares and the corner dots keep their own colors.

Corner Square and Corner Dots

Three corners of every QR code hold the position markers, by which a scanner finds the code and determines its orientation. A marker consists of an outer frame and an inner dot, and each has its own section.

Corner Square — the outer frame:

• Type — Circle, Square or Rounded Rectangle;
• Color — the color of the frame.

Corner Dots — the inner dot:

• Type — Dot or Square;
• Color — the color of the dot.

Error Correction

A QR code carries redundant data, which lets a scanner read it even when a part of the code is dirty, damaged or covered. The Error Correction section sets how much redundancy is added.

A higher level makes the code more robust and, for the same data, denser: it needs more dots, and each dot becomes smaller.

Keeping the code readable

A scanner needs contrast and clear markers more than it needs beauty. A few rules protect a styled code from failing:

• Dark on light. The dots must be clearly darker than the background. A light code on a dark background is not read by every scanner.
• Mind the transparent background. A code with a transparent background takes the background of the place where it is used. A blue code that is readable on a white page disappears on a dark section or a dark slide. If you do not know where the code will be used, set an opaque light Background Color.
• Do not make the dots transparent. The transparency slider of Color lowers the contrast in the same way as a pale color does.
• Check both ends of a gradient. Both Color and Second Color must contrast with the background; a gradient that fades into a light tone makes a part of the code unreadable.
• Keep the markers distinct. The corner markers must contrast with the background at least as well as the dots.
• Leave a margin. When you place the code in a layout, keep an empty area around it of about four dots in width.

Summary

The design sections of QR Code Generator change the shape of the dots, the colors, the gradient and the corner markers, while the Error Correction level sets the reserve of robustness. The design is saved with the page together with the data, so a code styled once keeps its look for every visitor.