H3stogram: Interactive 3D Color Histogram (EN)

Click the image and TRY the tool!

See my Experiment on ChromeExperiments.com

H3stogram is a small interactive web application that depicts an image’s color histogram in three dimensions. It intends to be a proof of concept for an interactive tool that helps photographers and other professionals understand the color structure of an image. It is also a playful and aesthetical experiment based on a quite recent technology, WebGL, which brings 3D interactive graphics to the web browser.

You can open H3stogram if your browser supports the WebGL standard. You can also try other 3D experiments on your browser in the Three.js and Chrome Experiments home pages. Warning: WebGL compatibility with smartphones an tablets is still limited. Check if your browser supports WebGL in  Can I Use and update it if need be and if the combination of your device and browser qualifies. If you want to know more about the idea behind H3stogram, keep on reading.

 What is a Color Histogram?

In the fields of Photography and Image Processing, a color histogram is a statistical depiction of an image’s color distribution. According to the article  Color histogram in Wikipedia:

In image processing and photography, a color histogram is a representation of the distribution of colors in an image. For digital images, a color histogram represents the number of pixels that have colors in each of a fixed list of color ranges, that span the image’s color space, the set of all possible colors.

I will not go into more detail here, but I recommend  to do an image lookup for “color histogram” in Google.

Using H3stogram

Let’s see what we can do with  H3stogram. The basics are as follows:

  1. Select an image from the bottom fringe. It will be loaded into the left part of the page. Its 3D histogram will be loaded in the center.
  2. Browse the 3D histogram: go around the color cube, and get closer or farther using the mouse. On the right we have some controls under the section “viewpoints” where we can select special viewpoints and the camera will go there.
  3. Interact with the controls in the right column to modify how the visualization looks like (geometry of the visual elements and their resolution).
Using H3stogram

Some samples

The  H3stogram Gallery shows you some examples with annotations about each image and its revealed color structure.

The idea

I started to think about the idea of working on a three-dimensional visualization of an image’s color structure a few years ago, while I was reading the book “Professional Photoshop” by Dan Margulis, subtitled “The classic guide to color correction”. In the second chapter the author presents one of the fundamental tools in color correction:  the tool curves.

A curve is a tool within an image edition application which allows to transform the brightness value of each pixel into a different value, according to a conversion map. This map is nothing but a function that looks like a curve when it is drawn. That function or map can be applied to the brightness values of a black and white image. For color images, each color channel (red, green, blue, in the RGB space) is mapped by a different curve (so we need a set of three curves). And this is when things start to get more complicated.  While it is relatively easy to get an intuition for the black and white processing with a single curve, it is not that easy for the color case.

3D histogram: we can link areas of the picture to corresponding regions in the histogram.
Regular color histogram: how do we connect areas of the picture to regions in the histogram?

As I was  reading the chapter of the Margulis’ book, trying to grasp the ideas he was fleshing out, I started to build the following mental map that would help me better understand the meaning of processing color images with curves.

  • We render the color distribution of the image in the RGB space, framed in a cube where each coordinate axis represent one of the color channels (x is red, y is green, z is blue). In this way, two of the vertices separated by a long diagonal correspond to the white and black. Three vertices represent the primary colors and the remaining three, the secondary colors (yellow, cyan, magenta).
  • For each color framed by the RGB cube we count the number of pixels in the image that correspond to it.
  • We depict the number of occurrences as points of a cloud within the RGB cube. The cloud will be denser in the areas corresponding to the more frequent colors of the image.

This is the concept of what H3stogram does. It shows the color distribution of the image framed in a 3D representation of the RGB cube. Regarding the operations that can be carried out with the curves tool, as Margulis explains them in his book, they would be associated to the following actions on the color cloud:

  1. Elastically expand the 3D histogram so that the darker and brighter points in the cloud match the black and white vertices of the cube. This is for taking advantage of the full color dynamic range (global contrast) of the image.
  2. Elastically expand the histogram so that the colored points in the cloud get farther from the main diagonal (which represents grey shades, from black to white), and closer to the edges and sides of the RGB cube. This enhances the color saturation of the image.
  3. Elastically expand cubic sections within the RGB cube (where cloud points tend to accumulate).  Doing this we get more detail (micro-contrast) for areas of the image within a certain color range.
  4. Elastically move cubic sections within the RGB cube. This corrects the color value for points of the image within a color range.

The most challenging idea that turned out from this mental map was a tool for carrying out these operations directly on the 3D histogram. I have always thought about these transformations being performed with my own hands on a gelatinous elastic color cube. To achieve this we would need to think up some sort of interaction system based on the mouse, sliders or sliding lines on the screen, or even 3D cameras or motion detectors.

The tool H3stogram is, for now, only a proof of concept that renders an image’s color histogram interactively. But it invites to devise ways to manipulate it so that the original image is transformed. As a less ambitious goal, it also aims to be helpful getting an intuitive understanding of the usual color transformations by visualizing their effects on the 3D histogram.

Other 3D histograms

Researching about the state of the art in this field (three-dimensional representation of an image’s color histogram), I have found the following applications.



… is an open-source web application for producing and modelling a three-dimensional color histogram from a supplied image. This tool was developed to help people visualize, understand and make better use of color in their endeavors.

It processes an imaged which is loaded from our computer up to the server through the web browser. As a result we get a two-dimensional image in the form of a cloud of colored points. This representation is not interactive.

Color Inspector

ColorInspector de Kai Uwe Barthel, is a Java application that allows us:

  • to visualize an image’s color distribution in our computer as a cloud of colored points and alternatively  as a histogram made up of color spheres,
  • to change the parameters of the visualization and browse it interactively,
  • perform color transformations (curves, brightness, saturation, contrast, color rotation) and visualize its effect on the original image and the histogram in real time.

Due to the fact it is a Java application, you need to download and run a file with extension .jar in your computer (having the Java Runtime Environment installed is a pre-requisite).

There is also a reduced version (it shows a simple non-interactive visualization) as a Firefox Plugin.

Drawing Color Histograms and Color Clouds

Drawing Color Histograms and Color Clouds is a program coded in MatLab by Chaitanya Sai Gaddam . It draws color histograms and color clouds. You need to be registered in MatLab Central to get the code and MatLab installed on your computer. However you can take a look at some samples  here.

Comparison with H3stogram

Both 3dhistogram and the tool by Chaitanya Sai Gaddam are two-dimensional, non-interactive  representations of a 3D color histogram. However, Color Inspector renders an interactive 3D visualization that can be navigated. Color Inspector improves H3stogram in points like the following.

  • Allows to perform real-time color transformations (curves, contrast, saturation, brightness) and check the result simultaneously on the original image and the histogram.
  • You can click on a pixel from the original image and the tool points out its location in the histogram.

On the other hand, one advantage of H3stogram is that it is integrated in the browser (as long as it supports WebGL)  and it does not need a previous installation (whether a runtime environment or a plugin).

Update: January 5th, 2014

After H3stogram has been pusblished on ChromeExperiments on Dec 27th, I have received some feedback and learned about other similar applications.

webCamParticles, by Sam Royston

webCamParticles, by Sam Royston. Captures the webcam image and displays the 3D color histogram in the RBG and HSV. It also features a nice animation that moves the pixels from the image to the particles in the histogram.

color3d, by dead_horse

color3d, by dead_horse, shows a 3d color histogram in 8 different color spaces, and allows to upload our images.

Real time color 3D histogram analysis, by Nicolás Belmonte and Luz Caballero

Real time color 3D histogram, by Nicolás Belmonte and Luz Caballero, was published on ChromeExperiments back in 2011. In this case the app shows the histogram from a video sequence (and optionally from the webcam) in three color spaces. Nicolas Belmonte is the author of PhiloGL, a wrapper for WebGL which is one of the alternatives to the framework I have used, Three.js. From the PhiloGL web page:

PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development.

The technology: WebGL and Threejs

H3stogram  is based on the WebGL standard, a technology that enables 3D graphics in the browser. WebGL allows the browser to directly communicate with your computer’s graphics card (GPU) in its  lingua franca: OpenGL. This makes possible to delegate complex costly tasks (like drawing three-dimensional geometries) to the graphics processor itself. This way the main central processor (CPU) is relieved, which translates into a fluid experience of interactive 3D graphics.

In order to use the WebGL functions, once we have updated the browser, we need to code in JavaScript. Programming directly calling the WebGL functions is usually complex for web developers who do not have previous experience with OpenGL.  However several tools have emerged to ease this task. Threejs is one of those tools, probably the most popular at the moment. Let me quote the README file from the Threejs repository in GitHub:

The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies.

Threejs is the tool I have used to develop H3stogram.

Interested users and next steps

H3stogram may grow with more ideas.  Like the following:

  • clicking on a pixel of the image makes the corresponding color region in the histogram to stand out (like in the tool ColorInspector).
  • Extend the visualization control panel with usual color transformations (contrast, saturation, etc.) so that we can process the image and visualize the effect in real-time.
  • Load custom images.
  • Capture the webcam.
  • Show the histogram in the LAB color space.

And as I have already said, the most challenging goal would be to investigate ways of interacting with the histogram to change the image’s color structure.

If you are interested in H3stogram as a user, are interested to make the application grow or  want to use the code, do not hesitate to get in touch with me through this blog or github. H3stogram’s code is published in github under the MIT license, which allows you to use it in the most flexible way.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

Aviso de cookies