Give life to your QR Code with colors and custom graphics. Forget the dull black and white QR Code and start using the Customisable QR Code Generator to create a better connection with your customers.
At the moment, the following QR Code payloads are supported:
The API is simple yet versatile.
It consumes application/json payloads and returns base64 encoded images.
CORS might not work properly in Safari; the best way to use this API is from a server.
It’s super easy to create a simple, black and white QR Code.
Use the POST-/public/generate-simple-qr-code endpoint
Add the minimum required QR Code options
{
"payload": "https://rapidapi.com/vali.draganescu88/api/customisable-qr-code-generator-with-insane-graphics",
"padding": 20,
"codeWidth": 200,
"codeHeight": 200
}
The API returns the QR Code as a base64 string.
Use the POST-/public/generate-simple-qr-code endpoint
Reusing the payload for the simple, black and white QR Code, you can add coloring options
{
"payload": "https://rapidapi.com/vali.draganescu88/api/customisable-qr-code-generator-with-insane-graphics",
"padding": 50,
"codeWidth": 400,
"codeHeight": 400,
"colors": {
"eyes": "#ff6388",
"eyeTopLeft": "#176e2e",
"eyeTopRight": "#a86d79",
"eyeBottomLeft": "#02172f",
"singleSquare": "#284ba2",
"oneByTwoColumn": "#074de7",
"oneByTwoRow": "#c907e7",
"oneByThreeColumn": "#029f8f",
"oneByThreeRow": "#7b7d32",
"oneByFourColumn": "#b16b1d",
"oneByFourRow": "#ea881c",
"twoByThreeColumn": "#afad33",
"twoByThreeRow": "#325678",
"twoByTwoSquare": "#770e0e"
}
}
The API returns the QR Code as a base64 string
You can also use the singleSquare
option in the colors
options or use the colorDark
setting to create a mono-color QR Code (other than black)
{
"payload": "https://rapidapi.com/vali.draganescu88/api/customisable-qr-code-generator-with-insane-graphics",
"padding": 50,
"codeWidth": 400,
"codeHeight": 400,
"colors": {
"singleSquare": "#284ba2"
}
}
or
{
"payload": "https://rapidapi.com/vali.draganescu88/api/customisable-qr-code-generator-with-insane-graphics",
"padding": 50,
"codeWidth": 400,
"codeHeight": 400,
"colorDark": "#284ba2"
}
You can color one eye.
{
"payload": "https://rapidapi.com/vali.draganescu88/api/customisable-qr-code-generator-with-insane-graphics",
"padding": 50,
"codeWidth": 400,
"codeHeight": 400,
"colors": {
"eyeTopLeft": "#176e2e",
"singleSquare": "#ff6388"
}
}
Or all eyes (in different colors if you want)
{
"payload": "https://rapidapi.com/vali.draganescu88/api/customisable-qr-code-generator-with-insane-graphics",
"padding": 50,
"codeWidth": 400,
"codeHeight": 400,
"colors": {
"eyeTopLeft": "#176e2e",
"eyeTopRight": "#a86d79",
"eyeBottomLeft": "#02172f",
"singleSquare": "#284ba2"
}
}
Any colors
combination is valid as long as you provide a value for the singleSquare
property. You can be as creative as it gets.
{
"payload": "https://rapidapi.com/vali.draganescu88/api/customisable-qr-code-generator-with-insane-graphics",
"padding": 40,
"codeWidth": 400,
"codeHeight": 400,
"colors": {
"eyes": "#325678",
"eyeTopLeft": "#3f5668",
"eyeTopRight": "#025658",
"eyeBottomLeft": "#325648",
"singleSquare": "#f25638",
"oneByTwoColumn": "#3a5628",
"oneByTwoRow": "#a25618",
"oneByThreeColumn": "#325608",
"oneByThreeRow": "#325578",
"oneByFourColumn": "#324678",
"oneByFourRow": "#325378",
"twoByThreeRow": "#322678",
"twoByThreeColumn": "#325178",
"twoByTwoSquare": "#325078"
}
}
The default style of the QR Code squares is squared, but the style can be controlled via the style
property (squared and rounded are supported).
The rounded style has support for the eyes, single square and two by two squares with everything else defaulting to single square style
{
"payload": "https://rapidapi.com/vali.draganescu88/api/customisable-qr-code-generator-with-insane-graphics",
"padding": 50,
"codeWidth": 400,
"codeHeight": 400,
"colorLight": "#ffffff",
"style": "rounded",
"colors": {
"eyes": "#ff6388",
"eyeTopLeft": "#176e2e",
"eyeTopRight": "#a86d79",
"eyeBottomLeft": "#02172f",
"singleSquare": "#284ba2",
"twoByTwoSquare": "#770e0e"
}
}
{
"payload": "https://rapidapi.com/vali.draganescu88/api/customisable-qr-code-generator-with-insane-graphics",
"padding": 50,
"codeWidth": 400,
"codeHeight": 400,
"colorLight": "#ffffff",
"style": "rounded",
"colors": {
"eyes": "#ff6388",
"eyeTopLeft": "#176e2e",
"eyeTopRight": "#a86d79",
"eyeBottomLeft": "#02172f",
"singleSquare": "#284ba2"
}
}
You can use the materials
property to add URLs to publicly available png
images with assets that will become part of the QR Code for the custom-themed QR code.
Use the POST-/public/generate-simple-qr-code endpoint
The minimal request body options are
{
"payload": "https://rapidapi.com/vali.draganescu88/api/customisable-qr-code-generator-with-insane-graphics",
"padding": 50,
"codeWidth": 400,
"codeHeight": 400,
"materials": {
"singleSquare": "https://i.ibb.co/0nfCmNd/Single.png",
}
}
{
"payload": "https://rapidapi.com/vali.draganescu88/api/customisable-qr-code-generator-with-insane-graphics",
"padding": 50,
"codeWidth": 400,
"codeHeight": 400,
"materials": {
"border": "https://image.freepik.com/free-vector/grunge-border-background_1048-1048.jpg",
"eyes": "https://i.ibb.co/k6pBqdM/EyeModel.png",
"eyeTopLeft": "https://i.ibb.co/s98pz4w/Eye-Model2.png",
"eyeTopRight": "https://i.ibb.co/j8Cy2J8/Eye-Model3.png",
"eyeBottomLeft": "https://i.ibb.co/VBTHWxM/Eye-Model4.png",
"singleSquare": "https://i.ibb.co/0nfCmNd/Single.png",
"oneByTwoColumn": "https://i.ibb.co/QfjG79M/One-By-Two-Column.png",
"oneByTwoRow": "https://i.ibb.co/pLdnfxL/One-By-Two-Row.png",
"oneByThreeColumn": "https://i.ibb.co/RvbQf09/One-By-Three-Column.png",
"oneByThreeRow": "https://i.ibb.co/ZM5X7gg/One-By-Three-Row.png",
"oneByFourColumn": "https://i.ibb.co/0MFmZhj/One-By-Four-Column.png",
"oneByFourRow": "https://i.ibb.co/WnZPgbZ/One-By-Four-Row.png",
"twoByThreeRow": "https://i.ibb.co/GsPyd6s/Two-By-Threer-Row.png",
"twoByThreeColumn": "https://i.ibb.co/Dwq3LGM/Two-By-Three-Column.png",
"twoByTwoSquare": "https://i.ibb.co/Y88ksnz/Two-By-Two-Column.png"
}
}
The eyes don’t need to be square; they can be round or any other shape if the colored ratios are correct.
When you read the QR Code eye from left to right, the ratios must be 1,1,3,1,1. For the example image, this means Red1, White1, Red3, White1, Red1.
The same rule must be correct when you read the eye top to bottom. As long as this rule is satisfied, the API will correctly generate the QR Code.
####See full asset specs bellow (sizes in pixels, you can use any size as long as the aspect ratio is maintained)
Download the high-resolution template here
To add a logo to your QR code, use the logoUrl
property.
The logo must fit in a square.
The logo width will always be 6 or 7 modules (squares) based on the QR Code size.
{
"payload": "https://rapidapi.com/kodacode-kodacode-default/api/customisable-qr-code-generator-with-insane-graphics/",
"padding": 10,
"codeWidth": 200,
"codeHeight": 200,
"colorLight": "#ffffff",
"style": "squared",
"logoUrl": "https://rapidapi.com/cdn/images?url=https://rapidapi-prod-apis.s3.amazonaws.com/4a2fac8d-f1f0-4dc0-92e6-08e73736b7a9.png",
"colors": {
"eyes": "#ff6388",
"eyeTopLeft": "#176e2e",
"eyeTopRight": "#a86d79",
"eyeBottomLeft": "#02172f",
"singleSquare": "#284ba2",
"oneByTwoColumn": "#074de7",
"oneByTwoRow": "#c907e7",
"oneByThreeColumn": "#029f8f",
"oneByThreeRow": "#7b7d32",
"oneByFourColumn": "#b16b1d",
"oneByFourRow": "#ea881c",
"twoByThreeColumn": "#afad33",
"twoByThreeRow": "#325678",
"twoByTwoSquare": "#770e0e"
}
}