Colors & gradients

Use solid colors or linear and radial gradients, and check contrast so codes stay scannable.

Apply colors and gradients to create branded QR codes.

Solid Colors

import { QRCode } from 'qrdx';

<QRCode
  value="https://example.com"
  size={256}
  fgColor="#1a56db"
  bgColor="#f9fafb"
  eyeColor="#0d47a1"
  dotColor="#3b82f6"
/>

Supported formats: #hex, rgb(), rgba(), hsl(), hsla(), named colors

eyeColors sets each eye on its own (topLeft, topRight, bottomLeft, each with an outer and inner color or gradient); see Patterns.

bgColor="transparent" paints no background, so PNG and SVG downloads are see-through and PDF and EPS files have no background fill. Place the code on a light, plain surface: decoders need the light gaps between modules.

Linear Gradients

import { QRCodeCanvas } from 'qrdx';

<QRCodeCanvas
  value="https://example.com"
  size={256}
  fgColor={{
    type: 'linear',
    stops: [
      { offset: 0, color: '#667eea' },
      { offset: 1, color: '#764ba2' }
    ],
    x1: 0, y1: 0,
    x2: 1, y2: 1
  }}
/>

Gradient Directions

Horizontal: x1: 0, y1: 0, x2: 1, y2: 0
Vertical: x1: 0, y1: 0, x2: 0, y2: 1
Diagonal: x1: 0, y1: 0, x2: 1, y2: 1

Multi-Stop Gradients

<QRCodeCanvas
  value="https://example.com"
  size={256}
  fgColor={{
    type: 'linear',
    stops: [
      { offset: 0, color: '#667eea' },
      { offset: 0.3, color: '#764ba2' },
      { offset: 0.7, color: '#f093fb' },
      { offset: 1, color: '#f5576c' }
    ],
    x1: 0, y1: 0, x2: 1, y2: 1
  }}
/>

Radial Gradients

<QRCodeCanvas
  value="https://example.com"
  size={256}
  fgColor={{
    type: 'radial',
    stops: [
      { offset: 0, color: '#ff6b6b' },
      { offset: 1, color: '#4ecdc4' }
    ],
    cx: 0.5, cy: 0.5,
    r: 0.5
  }}
/>

Color Utilities

Check Contrast

import { getContrastRatio, getContrastLevel } from 'qrdx';

const ratio = getContrastRatio('#000000', '#ffffff');
// Returns: 21

const level = getContrastLevel(ratio);
// Returns: { level: 'AAA', warning: false, message: 'Excellent contrast' }

Contrast Guidelines

Minimum: 3.0:1 ratio
Recommended: 4.5:1 or higher
Excellent: 7.0:1 or higher

Next Steps

Logos — Add logos to colored QR codes
Patterns — Combine colors with patterns
Downloads — Export colored QR codes