Finding the average colour of a photograph
This story was originally published on my blog. As part of my efforts to move to Medium, the post has been reproduced below.
Yeah, I know it’s been a while since I used my digital pen to thread words together on this pixelated canvas. Lately however I have been thinking of starting writing a series of articles detailing some of my past work in the creative sector. From my webdesign and develpoing past, to my YouTube video production days (12 years ago oO), to the days I created games and online communities — I pay homage to that past. Now feeling closer than ever to my roots — I believe that it is time to continue with the journey.
So I’ve been noticing that I was sitting on a pile of research and projects I did in the past for various reasons but which I never put up collectively in one space alone. Therefore I said to myself, “why not use the blog?” — so here we are, in the first of hopefully many other posts containing a glimpse into my past couple of years. It’s been a journey full of digital game development, mobile app development, computer vision applications, multimedia programming, video editing and production, writing, theatre work, travelling and whatever else came in between (Oh! There was beer brewing as well — but that is for some other day). Anywho back to this …
I’m suddenly finding this enjoyable to write — freeing myself from the constraints of academic English. Coming from a previous background of creative wonderment at secondary school and later higher secondary (sixth-form), I find that finding the time to write again does indeed take me back on the nostalgia wagon big time.
Let’s not divert …
Here is the first article from a pair (it’s too long to include in just one article). So in this first one, we will be exploring how the average colour of an image can be found. It’s basically mathematical of course, but do not be disheartened if only the mention of that word makes your blood run cold! The first half of this bloog article will basically consist of an overview and background of the applications in which the average colour could be used. I tried to re-word this part to make it non-techy friendly
Following this article, I will be releasing the second part, in which an application which does just that would (hopefully) be embedded on the page so that you guys can explore around.
Ok .. it’s time. Buckle up, sit back, maybe munch on some popcorn, slurp that cola and annoy your seated neighbor and enjoy the ride. Off we go now on this rather geeky journey.
The average colour of an image and its applications
The average colour of an image is basically the resultant colour of the averaging of the entire colour channels R,G,B (Red, Green, Blue) of every pixel (a single point on the screen) in that particular image. The values which are taken into consideration are from the linear luminance domain, which is the luminous intensity of that pixel measured in candelas.
Basic applications
There are diverse applications of the average colour of an image. One simple application is the monitoring of vegetation in a garden to detect changes from one season to another. Another simple application is for interior design, where one might choose paintings and draperies according to the average of the colour palette used in that particular room. I have taken the liberty of including such an application in the next article of this series for you to play around with.
Photographic mosaic
This process basically takes a photo and re-creates it using a number of other photos. First, the base image is split into equal sized rectangular sections which are then replaced by another image that matches the target rectangular section in terms of colour. For simple mosaics, each section is averaged to a single colour. The images in the library (the image pool) are also reduced to a single colour. Each section is then replaced by one from the pool by comparing the pixels of the base image (now down sampled) with the average colours of the pool [1]. Where there is a match a replacement occurs.
Image compression
It is quite typical for an image to have a large featureless region (such as a monochromatic sky background). This wastes a lot of space, as say a 100 x 100 px area would take up 10k bytes (if 8-bit grayscale is used). In order to alleviate the storage take-up, one could simply record the dimensions of that area and since in practice there are still some slight colour variations, the average colour is calculated. This is then subtracted from the image and would therefore take up only 4–5 bytes leading to massive space saving. Other areas in the image are then located where the average colour is significant and are subtracted off as well.
The remaining image is discarded, while the location and intensity of the averaged areas are recorded. This information is used when the process is reversed and the slightly lower quality replica of the original image is reconstructed [2].
Removal of colour casts
The removal of a colour cast from an image (removing colour tint) is done through a cast remover that is applied after cast detection, which is done through a diagonal transform matrix where the RGB channels of the input image are multiplied by the white balance (which is calculated by dividing the chosen reference white divided by the averages of the three RGB channels over the whole region) to produce the R’G’B’ channels (colour coordinates of output image).
What is left in the image is now processed and parts of the image with brightness over 30 have their cast removed and the colour balance algorithm is applied for the image to look right [5]. This application involves more steps, but for the context of this technical article we’re not going to delve deeper into that.
Restoration of Paintings
In the case where paint has flaked from its canvas, the average colour could be digitally determined from a high resolution photograph/scan of the work. The conservator may then use the equivalent pigment in order to fill in these missing areas.
Finding the average colour of the Universe (Yeah it gets cool)
The idea of average colour has also been applied in astronomical studies. Experiments have been conducted to determine the average colour of the universe, which was found to be cosmic latte: (225,248,231) in sRGB format [3]. This was done through analysing more than 200,000 galaxies and measuring the spectral range of all light from most of the universe. The results were then averaged.
Ok, at this point, this is going to get mathematical- if you’re not interested in that mumbo jumbo and just want to have a look at the application, kindly scroll to the very bottom of this article
Algorithm
If an image’s colour space is sRGB, it would not be possible to calculate the average since the colour space is not linear. Therefore the image’s colour space must be converted from sRGB to CIE XYZ tristimulus values. However before this could be done, the issue of gamma correction must be tackled.
Brightness in computer monitors is not linear, this can be seen in simple CRT monitors, where the emission of electrons and the reaction from the phosphors produce an image (on the screen) with perceived brightness that is not linearly related to the input signal but rather related by an approximate power-law instead. This is specified as [4]:
Further observation of this nonlinearity can be observed in the fact that gray 1 is 60 times brighter by sRGB than by simple gamma curve. Gray 8 is 5 times brighter [4]. This issue is handled by the following operation of linearization:
First the CsRGB values are clamped (normalized) to between 0 and 1 (and scaled to the colour resolution required — for 8-bit channels), and then the linearisation process is applied on the image.
The inverse multiplication matrix of the transformation matrix that maps CIE XYZ chromaticity space to sRGB is applied to convert the image from sRGB colour space to CIE XYZ.
Once the colour space conversion has been completed, the next step is to calculate the average colour of the overall image. This is achieved through adding all the colour channels of each pixel separately and then dividing each channel by the total number of pixels in the image. The resultant three values constitute the average colour of the image. However, computer monitors, as stated before, are nonlinear and therefore a nonlinearization process must be applied to our resultant colour, through this operation:
The resultant colour is the finished result that can be displayed on a monitor. Should however the user want to convert back to sRGB colour space, the transformation matrix that maps the CIE XYZ colour space to sRGB is applied on the colour before the non-linearization process.
The process above was applied for the development of the application which will be included in the next article for this series.
I hope that this article gave you an interesting introduction to operations in colour space. In the creative industry, one must be aware of which colour space to use for which operation. For example, in this case, the average colour can be found in both the sRGB and the CIE XYZ colour space but not the RGB colour space (as it results in a grey value).
What do you guys think of the article? Do you wish to know more about the different colour spaces available? Leave your comments and opinions in the section below
Thanks for tuning in.
References
[1] Gray, T. (2008, May 2). Making Photo Mosaics. Retrieved November 16, 2013, from Wolfram
Blog: http://blog.wolfram.com/2008/05/02/making-photo-mosaics/
[2] Tao, T. (2008). Structure and Randomness: Pages from Year One of a Mathematical Blog.
American Mathematical Society.
[3] Cosmic Latte. (2013, September 28). Retrieved November 16, 2013, from Wikipedia, The Free
Encyclopedia: http://en.wikipedia.org/wiki/Cosmic_latte
[4] Brasseur, E. (2007, August 30). Gamma error in picture scaling. Retrieved November 23, 2013,
from Eric Brasseur: http://www.4p8.com/eric.brasseur/gamma.html
[5] Gasparini, F., & Schettini, R. (2004, June). Color balancing of digital photos using simple image
statistics. Pattern Recognition, 37(6), 1201–1217.
