Open an event in Luma and the whole page takes its colour from the cover image: a red poster gives you a deep red page, a blue one gives you navy. It makes every event feel designed, even when the organiser only uploaded one picture.

My open-source Luma clone does the same thing on the web in about 100 lines, with a <canvas> and no colour library. Here is how.

Live demo: https://migrant620.github.io/luma/ (open any event)

Source (MIT): https://github.com/migrant620/luma-clone

1. Shrink the image to 48 × 48

You don't need every pixel to find the main colour. Drawing the image into a tiny canvas averages it for free and keeps the loop cheap:

const N = 48 ; const canvas = document . createElement ( ' canvas ' ); canvas . width = N ; canvas . height = N ; const ctx = canvas . getContext ( ' 2d ' , { willReadFrequently : true }); ctx . drawImage ( img , 0 , 0 , N , N ); const { data } = ctx .…