Fork me on GitHub


togram Help & Info

H3stogram on Chrome Experiments

What is this?

H3stogram is an interactive 3D depiction of an image's color distribution (histogram) in the RGB space. It is developed in javascript/HTML5 on the Threejs framework, which wraps on the WebGL api. For more information see the article in DoF ideas


If you are interested in H3stogram as a user, photographer or developer, you can get in touch with me through DoFideas and GitHub

Play with it!

  1. Pick an image from the bottom fringe. This will load it into the canvas on the top left corner, and from there into the cube in the center of the screen
  2. Navigate the 3D histogram
    • Left button + drag --> Circle around
    • Mouse wheel --> Dolly
    • Right button + drag --> Travelling
  3. Play with the visualization parameters on the controls right column (Visualization folder)
    • Select brick (cube) or bubble elements
    • Select solid or wireframe elements
    • Show only the predominant colors by increasing the Threshold value
    • Choose the opacity and size of the elements
  4. Change the resolution of the 3d histogram (Histogram folder)
    • Bits Per Channel: 4 is the default. Try 5 while it does not get very sluggish
    • Bytes Per Point: 2 is the default and recommended value (feel free to experiment)
  5. Navigate to highlighted viewpoints (Viewpoint folder)
    • Color Lights --> Color wheel view, from the white corner of the RGB cube
    • Color Shadows --> Color wheel view, from the black corner of the RGB cube
    • BW Cold --> View of the cube's black-white long diagonal, from the cold colors edge (blue-cyan)
    • BW Warm --> View of the cube's black-white long diagonal, from the warm colors edge (red-yellow)
    • Rest --> Frontal view


togram by Alvaro Santamaria Herrero is licensed under The MIT license. H3stogram source available in
togram is a part of DoF ideas.
Licencia de Creative Commons DoF ideas's blog, text, images and media by Alvaro Santamaria Herrero are licensed under a Creative Commons Reconocimiento-CompartirIgual 3.0 Unported License unless explicitly stated otherwise. Content by other authors and collaborators is clearly labeled, published with their explicit consent and keeping all rights reserved unless stated otherwise.