[{"data":1,"prerenderedAt":604},["ShallowReactive",2],{"guide-qr-code-design-colors-logos":3},{"id":4,"title":5,"body":6,"date":595,"description":596,"extension":597,"meta":598,"navigation":599,"path":600,"readingTime":438,"seo":601,"stem":602,"__hash__":603},"guides\u002Fguides\u002Fqr-code-design-colors-logos.md","QR Code Design: Adding Colors and Logos Safely",{"type":7,"value":8,"toc":576},"minimark",[9,14,18,21,25,28,104,107,111,116,119,212,216,229,233,236,244,248,268,272,276,279,285,291,295,313,317,320,456,460,463,469,473,527,530,534,554,558,567,572],[10,11,13],"h2",{"id":12},"custom-qr-codes-need-careful-design","Custom QR Codes Need Careful Design",[15,16,17],"p",{},"Plain black-and-white QR codes work reliably, but they look generic. Adding brand colors, gradients, and logos makes QR codes visually appealing and on-brand. The challenge is maintaining scannability while customizing the design.",[15,19,20],{},"Every visual modification you make to a QR code reduces its tolerance for damage, distortion, and scanning difficulty. Understanding the tradeoffs helps you create codes that look good and scan reliably.",[10,22,24],{"id":23},"error-correction-your-design-budget","Error Correction: Your Design Budget",[15,26,27],{},"QR codes use Reed-Solomon error correction, which allows the code to be read even when part of it is damaged or obscured. There are four levels:",[29,30,31,47],"table",{},[32,33,34],"thead",{},[35,36,37,41,44],"tr",{},[38,39,40],"th",{},"Level",[38,42,43],{},"Data Recovery",[38,45,46],{},"Best For",[48,49,50,65,78,91],"tbody",{},[35,51,52,59,62],{},[53,54,55],"td",{},[56,57,58],"strong",{},"L (Low)",[53,60,61],{},"7%",[53,63,64],{},"Minimal customization, small codes",[35,66,67,72,75],{},[53,68,69],{},[56,70,71],{},"M (Medium)",[53,73,74],{},"15%",[53,76,77],{},"Light color changes",[35,79,80,85,88],{},[53,81,82],{},[56,83,84],{},"Q (Quartile)",[53,86,87],{},"25%",[53,89,90],{},"Logo overlay, moderate customization",[35,92,93,98,101],{},[53,94,95],{},[56,96,97],{},"H (High)",[53,99,100],{},"30%",[53,102,103],{},"Maximum customization, logo placement",[15,105,106],{},"When you add a logo or modify colors, you consume some of the error correction capacity. Always use level H (30%) when placing a logo in the center of the code. The 30% redundancy gives you room for the logo while maintaining scannability.",[10,108,110],{"id":109},"working-with-colors","Working with Colors",[112,113,115],"h3",{"id":114},"foreground-and-background","Foreground and Background",[15,117,118],{},"QR code readers detect the contrast between dark modules (foreground) and light modules (background). As long as the foreground is significantly darker than the background, you can use non-black colors.",[120,121,126],"pre",{"className":122,"code":123,"language":124,"meta":125,"style":125},"language-css shiki shiki-themes github-light github-dark","\u002F* Safe QR code color combinations *\u002F\n--safe-1: { fg: #1a365d, bg: #ffffff };  \u002F* Dark blue on white *\u002F\n--safe-2: { fg: #2d3748, bg: #f7fafc };  \u002F* Dark gray on light gray *\u002F\n--safe-3: { fg: #9b2c2c, bg: #ffffff };  \u002F* Dark red on white *\u002F\n","css","",[127,128,129,138,167,190],"code",{"__ignoreMap":125},[130,131,134],"span",{"class":132,"line":133},"line",1,[130,135,137],{"class":136},"sJ8bj","\u002F* Safe QR code color combinations *\u002F\n",[130,139,141,145,149,152,155,158,161,164],{"class":132,"line":140},2,[130,142,144],{"class":143},"sVt8B","--safe-1: { ",[130,146,148],{"class":147},"sj4cs","fg",[130,150,151],{"class":143},": ",[130,153,154],{"class":147},"#1a365d",[130,156,157],{"class":143},", bg: ",[130,159,160],{"class":147},"#ffffff",[130,162,163],{"class":143}," };  ",[130,165,166],{"class":136},"\u002F* Dark blue on white *\u002F\n",[130,168,170,173,175,177,180,182,185,187],{"class":132,"line":169},3,[130,171,172],{"class":143},"--safe-2: { ",[130,174,148],{"class":147},[130,176,151],{"class":143},[130,178,179],{"class":147},"#2d3748",[130,181,157],{"class":143},[130,183,184],{"class":147},"#f7fafc",[130,186,163],{"class":143},[130,188,189],{"class":136},"\u002F* Dark gray on light gray *\u002F\n",[130,191,193,196,198,200,203,205,207,209],{"class":132,"line":192},4,[130,194,195],{"class":143},"--safe-3: { ",[130,197,148],{"class":147},[130,199,151],{"class":143},[130,201,202],{"class":147},"#9b2c2c",[130,204,157],{"class":143},[130,206,160],{"class":147},[130,208,163],{"class":143},[130,210,211],{"class":136},"\u002F* Dark red on white *\u002F\n",[112,213,215],{"id":214},"contrast-requirements","Contrast Requirements",[217,218,219,223,226],"ul",{},[220,221,222],"li",{},"Minimum contrast ratio: 4.5:1 between foreground and background",[220,224,225],{},"Test with a contrast checker before finalizing colors",[220,227,228],{},"Avoid light foreground colors — even on dark backgrounds, light-on-dark QR codes scan less reliably",[112,230,232],{"id":231},"gradients","Gradients",[15,234,235],{},"Gradients work for the foreground but must go from dark to dark. A gradient from blue to purple scans fine. A gradient from yellow to red fails — the lighter end lacks contrast.",[120,237,242],{"className":238,"code":240,"language":241},[239],"language-text","✅ Dark gradient: #1a365d → #553c9a (both dark enough)\n❌ Light gradient: #fbd38d → #e53e3e (yellow too light)\n","text",[127,243,240],{"__ignoreMap":125},[112,245,247],{"id":246},"what-not-to-do","What Not to Do",[217,249,250,256,262],{},[220,251,252,255],{},[56,253,254],{},"Invert the QR code"," (white modules on black background) — many scanners fail",[220,257,258,261],{},[56,259,260],{},"Remove the quiet zone"," — the blank margin around the code is required for scanning",[220,263,264,267],{},[56,265,266],{},"Use patterned backgrounds"," — noise interferes with module detection",[10,269,271],{"id":270},"adding-logos","Adding Logos",[112,273,275],{"id":274},"the-safe-zone","The Safe Zone",[15,277,278],{},"A logo covers modules in the center of the QR code. The center is the safest position because QR code data is interleaved across the entire matrix — no single region stores all the data.",[15,280,281,284],{},[56,282,283],{},"Rule of thumb",": the logo should cover no more than 20-30% of the total QR code area when using error correction level H.",[120,286,289],{"className":287,"code":288,"language":241},[239],"QR code total area:  100×100 px\nMaximum logo area:   30×30 px (9% of area — conservative)\nMaximum logo area:   40×40 px (16% of area — aggressive but viable with H correction)\n",[127,290,288],{"__ignoreMap":125},[112,292,294],{"id":293},"logo-placement-steps","Logo Placement Steps",[296,297,298,301,304,307,310],"ol",{},[220,299,300],{},"Generate the QR code at error correction level H",[220,302,303],{},"Export as SVG or high-resolution PNG",[220,305,306],{},"Place the logo in the center with a white background padding",[220,308,309],{},"Leave at least 2 module-widths of clear space around the logo",[220,311,312],{},"Test scan with at least 3 different devices and apps",[112,314,316],{"id":315},"logo-background","Logo Background",[15,318,319],{},"Add a white or background-colored rectangle behind the logo to create a clean boundary between the logo and the QR modules:",[120,321,325],{"className":322,"code":323,"language":324,"meta":125,"style":125},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"qr-container\" style=\"position: relative; display: inline-block;\">\n  \u003Cimg src=\"qr-code.svg\" alt=\"QR Code\" \u002F>\n  \u003Cdiv style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n              background: white; padding: 8px; border-radius: 4px;\">\n    \u003Cimg src=\"logo.svg\" alt=\"Brand\" style=\"width: 60px; height: 60px;\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html",[127,326,327,358,385,398,405,436,446],{"__ignoreMap":125},[130,328,329,332,336,340,343,347,350,352,355],{"class":132,"line":133},[130,330,331],{"class":143},"\u003C",[130,333,335],{"class":334},"s9eBZ","div",[130,337,339],{"class":338},"sScJk"," class",[130,341,342],{"class":143},"=",[130,344,346],{"class":345},"sZZnC","\"qr-container\"",[130,348,349],{"class":338}," style",[130,351,342],{"class":143},[130,353,354],{"class":345},"\"position: relative; display: inline-block;\"",[130,356,357],{"class":143},">\n",[130,359,360,363,366,369,371,374,377,379,382],{"class":132,"line":140},[130,361,362],{"class":143},"  \u003C",[130,364,365],{"class":334},"img",[130,367,368],{"class":338}," src",[130,370,342],{"class":143},[130,372,373],{"class":345},"\"qr-code.svg\"",[130,375,376],{"class":338}," alt",[130,378,342],{"class":143},[130,380,381],{"class":345},"\"QR Code\"",[130,383,384],{"class":143}," \u002F>\n",[130,386,387,389,391,393,395],{"class":132,"line":169},[130,388,362],{"class":143},[130,390,335],{"class":334},[130,392,349],{"class":338},[130,394,342],{"class":143},[130,396,397],{"class":345},"\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n",[130,399,400,403],{"class":132,"line":192},[130,401,402],{"class":345},"              background: white; padding: 8px; border-radius: 4px;\"",[130,404,357],{"class":143},[130,406,408,411,413,415,417,420,422,424,427,429,431,434],{"class":132,"line":407},5,[130,409,410],{"class":143},"    \u003C",[130,412,365],{"class":334},[130,414,368],{"class":338},[130,416,342],{"class":143},[130,418,419],{"class":345},"\"logo.svg\"",[130,421,376],{"class":338},[130,423,342],{"class":143},[130,425,426],{"class":345},"\"Brand\"",[130,428,349],{"class":338},[130,430,342],{"class":143},[130,432,433],{"class":345},"\"width: 60px; height: 60px;\"",[130,435,384],{"class":143},[130,437,439,442,444],{"class":132,"line":438},6,[130,440,441],{"class":143},"  \u003C\u002F",[130,443,335],{"class":334},[130,445,357],{"class":143},[130,447,449,452,454],{"class":132,"line":448},7,[130,450,451],{"class":143},"\u003C\u002F",[130,453,335],{"class":334},[130,455,357],{"class":143},[10,457,459],{"id":458},"finder-patterns-do-not-modify","Finder Patterns: Do Not Modify",[15,461,462],{},"The three large squares in the corners are finder patterns. Scanners use them to locate and orient the QR code. Never modify, recolor, or overlay these patterns. Any change to finder patterns dramatically decreases scan reliability.",[120,464,467],{"className":465,"code":466,"language":241},[239],"┌─────┐           ┌─────┐\n│ ▪▪▪ │           │ ▪▪▪ │\n│ ▪ ▪ │   ...     │ ▪ ▪ │\n│ ▪▪▪ │           │ ▪▪▪ │\n└─────┘           └─────┘\n\n                ┌─────┐\n                │ ▪▪▪ │\n                │ ▪ ▪ │   ← These three corner\n                │ ▪▪▪ │     patterns must stay intact\n                └─────┘\n",[127,468,466],{"__ignoreMap":125},[10,470,472],{"id":471},"testing-your-custom-qr-code","Testing Your Custom QR Code",[29,474,475,485],{},[32,476,477],{},[35,478,479,482],{},[38,480,481],{},"Test",[38,483,484],{},"How",[48,486,487,495,503,511,519],{},[35,488,489,492],{},[53,490,491],{},"Multiple devices",[53,493,494],{},"iPhone Camera, Android Google Lens, Samsung Camera",[35,496,497,500],{},[53,498,499],{},"Different lighting",[53,501,502],{},"Bright, dim, glare conditions",[35,504,505,508],{},[53,506,507],{},"Various distances",[53,509,510],{},"Close, arm's length, far",[35,512,513,516],{},[53,514,515],{},"Print and screen",[53,517,518],{},"Test both printed and digital versions",[35,520,521,524],{},[53,522,523],{},"Damaged simulation",[53,525,526],{},"Slightly smudge part of the code and re-scan",[15,528,529],{},"If your custom code fails any test, reduce the logo size or simplify the colors and try again.",[10,531,533],{"id":532},"key-takeaways","Key Takeaways",[217,535,536,539,542,545,548,551],{},[220,537,538],{},"Use error correction level H (30%) when adding logos or significant color changes",[220,540,541],{},"Maintain at least 4.5:1 contrast ratio between foreground and background",[220,543,544],{},"Never modify the finder patterns in the three corners",[220,546,547],{},"Logo should cover no more than 20-30% of the QR code area",[220,549,550],{},"Always add a white background behind the logo for clean boundaries",[220,552,553],{},"Test with multiple devices, lighting conditions, and distances",[10,555,557],{"id":556},"try-it-yourself","Try It Yourself",[15,559,560,561,566],{},"Create custom QR codes with colors and logos using our free ",[562,563,565],"a",{"href":564},"\u002Ftools\u002Fqr-code-generator","QR Code Generator",". Choose error correction level, customize foreground and background colors, and download in PNG or SVG — all processing happens locally in your browser.",[15,568,569],{},[562,570,571],{"href":564},"Try the QR Code Generator →",[573,574,575],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":125,"searchDepth":140,"depth":140,"links":577},[578,579,580,586,591,592,593,594],{"id":12,"depth":140,"text":13},{"id":23,"depth":140,"text":24},{"id":109,"depth":140,"text":110,"children":581},[582,583,584,585],{"id":114,"depth":169,"text":115},{"id":214,"depth":169,"text":215},{"id":231,"depth":169,"text":232},{"id":246,"depth":169,"text":247},{"id":270,"depth":140,"text":271,"children":587},[588,589,590],{"id":274,"depth":169,"text":275},{"id":293,"depth":169,"text":294},{"id":315,"depth":169,"text":316},{"id":458,"depth":140,"text":459},{"id":471,"depth":140,"text":472},{"id":532,"depth":140,"text":533},{"id":556,"depth":140,"text":557},"2026-05-28","Learn how to customize QR code design with colors and logos without breaking scannability. Understand error correction, contrast, and safe zones.","md",{"immutable":599},true,"\u002Fguides\u002Fqr-code-design-colors-logos",{"title":5,"description":596},"guides\u002Fqr-code-design-colors-logos","4UpM9cRpehCPu_T2xN_t3Dedptgy5fnY29-lTYzWCcU",1780401336294]