Colour Extraction & k-Means

Abstract

I have recently updated my Pixel 3 to run Android 12 which has brought many new features. The most obvious is the introduction of Material You - Android’s new design language - which comes with (what I think) is a pretty awesome feature that will extract accent colours from your wallpaper to use throughout the system UI. What follows is my attempt to build a similar system that can take an image and create a pallette of accent colours and some interesting outputs along the way!

Accessing Colour Data
k-Means
Re-drawing Our Image
Determining the Colour Pallette

Accessing Colour Data

In order to be able to extract colours from an image, we first need to understand how a picture is stored and displayed. Add some stuff around colour channels, RGB and reading into R. Then talk about bit-depth and how if we have a 24-bit image, we could have up to 16,777,216 different colours to work with. This is too many and so we want to find a way to reduce this!

k-Means

Talk about k-Means as a clustering technique that can be used to group together many observations and classify them as all sharing similarity. We can manually specify the value of k to extract a specific number of clusters, or in our case a group of similarly coloured pixels. We can represent each of these clusters by the cluster centre, which for us will be the “average” colour (or average red, green & blue channels) of all the pixels in that cluster. Note that this resulting cluster centre may not be present in the original image!

Re-drawing Our Image

At this point we’ll go off on a small tangent. I had the idea that we could create these clusters for increasing numbers of k and then “re-draw” the image using only these colours. To do this we can take each pixel in the original image and change it so that it is actually represented by the centre of the cluster it belongs to, rather than the original colour. Animating this then gives some quite pretty and interesting results!

Norway Fjord (k-means)

Norway Fjord (hierarchical)

Determining the Colour Pallette

Hello, World!

comments powered by Disqus