How to use
Choose a “Barcode format”, type a “Value”, and the barcode is drawn under “Preview”. When you change the format, the “Value” box shows the number of digits or a sample that the format takes.
- Appearance: “Bar width” is the width of the single narrowest bar, 1–8 px (2 px by default). “Height” is 20–400 px (100 px by default). “Margin” is the empty space around the barcode, 0–50 px (10 px by default). A value outside the range is drawn at the nearest limit. Turn off “Show value as text” and the characters under the bars disappear.
- Colors: “Bar color”, “Text color” and “Background color” are set separately, and taking “Background opacity” down to 0% makes the background transparent.
- Saving: “Download PNG” saves at twice the resolution you set. In a barcode made with a 2 px bar width, one bar is 4 pixels wide in the PNG. “Download SVG” gives you a vector file that stays sharp at any size.
The library that draws the barcode (JsBarcode) is downloaded when you enter your first value, not when the page opens. The first barcode can therefore take a moment, and if your connection drops after the page has loaded you may see “A barcode cannot be created from this value.”
What each format accepts
| Format | Accepts | Mostly used for |
|---|---|---|
| CODE128 | English letters, digits and symbols (ASCII). No length limit | General-purpose format. GS1-128 on logistics labels is built on it |
| EAN-13 | 12 or 13 digits | Retail products worldwide |
| EAN-8 | 7 or 8 digits | Retail products in small packaging |
| UPC-A | 11 or 12 digits | Retail products, mainly in North America |
| CODE39 | Digits, capital letters, the symbols - . $ / + % and spaces |
In-house numbers made of digits and capital letters |
| ITF-14 | 13 or 14 digits | Shipping cartons, as opposed to single items |
For the four digits-only formats, enter the shorter length and the last digit (the check digit) is calculated and added. Enter the longer length and the last digit is verified. A hyphen or space anywhere in the number brings up “Enter digits only.”, so type the digits in one unbroken run. Lowercase letters typed into CODE39 are converted to capitals before drawing.
CODE39 check character: It is off by default, and the barcode is drawn either way. When you pick CODE39, “Calculated check character” is always shown under “Value”, but the character only goes onto the end of the barcode when the box is ticked. The check character for SAMPLE-123, for example, is X. Turn it on only when the system reading the barcode expects a check character.
A check digit worked out
A check digit is one final digit that catches a number copied wrong or misread by a scanner. EAN-13, EAN-8, UPC-A and ITF-14 share the same GS1 rule. Take the digits without the check digit, multiply them by 3, 1, 3, 1 and so on starting from the right, and add everything up. The check digit is the amount needed to bring that sum up to the next multiple of 10.
Here is the calculation for 123456789012 entered as EAN-13.
| Step | Calculation | Result |
|---|---|---|
| Odd positions from the right × 3 | (2 + 0 + 8 + 6 + 4 + 2) × 3 | 66 |
| Even positions from the right × 1 | 1 + 9 + 7 + 5 + 3 + 1 | 26 |
| Sum | 66 + 26 | 92 |
| Check digit | 100 − 92 | 8 |
Under “Value” you see “Check digit 8 was calculated and added automatically.” and the barcode is drawn as 1234567890128. Enter the same 12 digits, 123456789012, as UPC-A and all 12 are taken as the number, with the final 2 verified as its check digit. The same digits are read differently depending on the format, so choose the format first.
The warning you may see when you change colors
When the bar color and the background color are too close in brightness, a warning appears under “Colors” saying a scanner may not read the code. The threshold is a contrast ratio of 3:1 between the two colors. Black bars on white are 21:1. Yellow bars on white are about 1.07:1, so they trigger the warning.
- With a semi-transparent background, contrast is worked out as if the barcode sat on white paper. If you place a transparent barcode on a colored surface, check the contrast yourself even when there is no warning.
- The contrast warning looks only at the difference in brightness. A reversed pairing, light bars on a dark background, gets a separate warning even when its contrast is high, because some scanners cannot read it.
- “Text color” plays no part in scanning and is not checked.
No warning is not a promise that the code will scan. If you changed the colors, read the barcode with the scanner you will actually use.
Before you print
A scanner finds where a barcode starts and ends from the empty space on either side of it, known as the quiet zone. You can take “Margin” down to 0 px, but then you have to leave that space in the printed layout yourself. “Margin” is a fixed number of pixels and does not grow when you raise “Bar width”, so if you thicken the bars, raise the margin too.
Printed small with “Bar width” at 1 px, the thin bars can fill in as the ink spreads. To get the size right, don’t scale the PNG up or down. Use the SVG, or change “Bar width” and “Height” and download again. Once it is printed, read it once with a real scanner or a phone app before you send it out.