Gradient QR Code

Why Gradient QR Codes

Popular Gradient Combinations

• Purple to Pink: #8B5CF6 to #EC4899 - Modern, trendy
• Blue to Cyan: #3B82F6 to #06B6D4 - Professional, tech
• Orange to Pink: #FF6B6B to #FFE66D - Vibrant, energetic
• Green to Teal: #10B981 to #06B6D4 - Fresh, natural
• Red to Orange: #EF4444 to #FB923C - Warm, inviting
• Purple to Blue: #8B5CF6 to #3B82F6 - Cool, sophisticated

Implementation

Python with Pillow

from PIL import Image, ImageDraw
import qrcode

# Generate QR
qr = qrcode.QRCode(error_correction=qrcode.constants.ERROR_CORRECT_H)
qr.add_data('https://example.com')
qr.make()

# Create image with gradient
img = qr.make_image(fill_color='black', back_color='white').convert('RGB')

# Apply gradient colors
pixels = img.load()
width, height = img.size

# Gradient from purple to pink
for y in range(height):
    # Calculate color gradient
    ratio = y / height
    r = int(139 + (236 - 139) * ratio)  # 8B to EC
    g = int(92 + (72 - 92) * ratio)     # 5C to 48
    b = int(246 + (153 - 246) * ratio)  # F6 to 99
    
    for x in range(width):
        if pixels[x, y] == (0, 0, 0):  # Black QR module
            pixels[x, y] = (r, g, b)

img.save('gradient_qr.png')

Web/Canvas Approach

<canvas id="qrCanvas" width="300" height="300"></canvas>

<script>
const canvas = document.getElementById('qrCanvas');
const ctx = canvas.getContext('2d');

// Create gradient
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#8B5CF6');    // Purple
gradient.addColorStop(1, '#EC4899');    // Pink

// Generate and apply gradient to QR (requires QR library)
const qr = qrcode.make_image('https://example.com');
// Apply gradient colors to dark pixels
</script>

Color Psychology

Red/Orange Gradients

• Conveys: Energy, urgency, passion
• Best for: Sales, promotions, actions

Purple/Pink Gradients

• Conveys: Creativity, luxury, trend
• Best for: Fashion, design, premium services

Blue/Cyan Gradients

• Conveys: Trust, technology, professional
• Best for: B2B, tech, banking

Green/Teal Gradients

• Conveys: Growth, nature, sustainability
• Best for: Health, eco-friendly, apps

Design Best Practices

• Contrast Matters: Gradient must maintain high contrast with light background
• Avoid Gradients in Quietzone: Keep white border around QR pure white
• Test Scannability: Always test on multiple QR readers
• Consider Printing: Some gradients don't print well; test first
• Smooth Transitions: Avoid harsh color changes that break QR patterns
• Error Correction: Use LEVEL_H (30%) for gradient codes

When to Use Gradient QR

• ✅ Social media marketing (Instagram, Pinterest, TikTok)
• ✅ Modern brand communications
• ✅ Digital marketing materials
• ✅ Contemporary product packaging
• ✅ Web pages and digital platforms
• ❌ Government/official documents (use black)
• ❌ High-security applications (use black)

Create Gradient QR Codes

➜ Generate Gradient QR