feat: Randomize style generates complementary color palettes, seeded from logo if present

[Copilot]

The "Randomize style" button previously assigned independent random hex colors to each QR code element, producing visually incoherent results. Colors are now generated as a harmonious palette using HSL color theory, and if a logo is loaded its dominant color anchors the scheme.

Color utilities (src/utils/color.ts)

• hexToHsl / hslToHex — round-trip HSL ↔ hex conversion
• createComplementaryColors(baseHex?) — randomly selects one of four harmony schemes and derives all four QR colors from a single hue anchor:
  • complementary (180°), triadic (120°/240°), split-complementary (150°/210°), analogous (30°/60°)
  • Background is always high-contrast against the dot color (dark bg for light dots, light bg for dark dots)
• extractDominantColorFromImage(imageSrc) — Canvas API pixel-sampling to get the average opaque color from a logo image
• Fixed createRandomColor to always emit correctly zero-padded 6-digit hex strings

// Without logo: random hue anchors the scheme
const colors = createComplementaryColors()

// With logo: logo's dominant color seeds the palette
const base = await extractDominantColorFromImage(image.value)
const colors = createComplementaryColors(base ?? undefined)
// → { dots, cornersSquare, cornersDot, background }

Randomize handler (src/components/QRCodeCreate.vue)

randomizeStyleSettings is now async; when image.value is set it extracts the logo's dominant color before calling createComplementaryColors, so all four color slots derive from a single coherent hue.

Tests (src/utils/color.test.ts)

Unit tests added for hexToHsl, hslToHex, createComplementaryColors (hex validity, harmony relationships, background contrast), and createRandomColor. Registered in the node workspace in vitest.workspace.ts.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mini-qr	Ready	Preview, Comment	Apr 2, 2026 1:50am