Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Barcode Generator
Generate CODE128, EAN-13, CODE39 and more, as SVG or PNG.
Tool Panel
Processed locallyAbout Barcode Generator
Nine formats including CODE128, EAN-13 and CODE39, with check digits computed to spec (EAN-13 takes 12 digits and computes the 13th). The input rules for each format are stated in the UI.
- 1
Nine formats, each with its content requirement shown in the UI: EAN-13 / UPC-A / ITF-14 take only the first 12 / 11 / 13 digits (**the check digit is computed**), Code39 accepts uppercase letters and a few symbols, and Pharmacode is an integer from 3 to 131070.
- 2
Two outputs: **copy the SVG** (vector — stays crisp when printed or scaled) or **download a PNG** (pixel size equals the preview, so raise bar width and height before printing).
- 3
Colours and the quiet zone are fixed (dark bars on white with 10 units of margin): both decide whether a scanner can read the code, so they are not exposed as options.
- 1
Pick a format and type the content
The UI lists the characters that format allows and reports a mismatch instead of drawing an unreadable code.
- 2
Adjust bar width and height
Bar width defaults to 2 and height to 80; use 3 or more for print, the defaults are fine on screen.
- 3
Copy the SVG or download the PNG
SVG for design and web work, PNG when you need a bitmap (Word, chat apps).
The 13th is a check digit: multiply the odd positions by 1 and the even ones by 3, sum, then subtract the units digit from 10 (if the sum ends in 0 the check digit is 0). Computing it by hand invites errors that the scanner would reject anyway — the tool and the reader use the same algorithm.
Check three things in order. (1) Is the bar width and height large enough? A PNG is the preview size, so scaling it up only blurs it — use the SVG or set bar width to 3+. (2) Is the quiet zone intact? Scanners need the margin to find the edges. (3) Is the print contrast high enough? Avoid coloured paper and ink-saving modes.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools