Image Color Analyzer Tool
Overview
The Image Color Analyzer Tool provides a way for users to see the colors that make up an image in a color wheel format that is familiar to artists or designers and aligns with modern color theory. The tools gives the user a wealth of information about the hue, chroma and value of colors in the image along with the relative amount of each color in the image.
Since there are 3 dimensions to color (hue, chroma and
value) a 3-dimensional object would be needed to represent all the possible
combinations. Since it is difficult to work with a 3-dimensional object using a
web browser the Image Color Analyzer Tool uses a 2-dimensional representation
of a 3-dimensional color space (the CIELAB color space). Such a representation
is shown below:
The color space shown above shows colors on an 11-step value scale represented by the central vertical axis ranging from pure black at the bottom to pure white at the top. Chroma is shown as the distance away from the central axis. The central axis itself has no chroma and chroma increases farther away the color is from the central axis. Hue is represented by the angle around the circle when looking down from the top.
Terminology
The Image Color Analyzer Tool uses the following terminology to refer to different parts of the 3-dimensional color space:
|
Hue |
Hue refers to the pure color itself, determined by its wavelength(s) in the visible spectrum. Red, blue, green and yellow are hues. Hues are usually arranged in a circular format around a color wheel. |
|
Value |
Vescribes the
lightness or darkness of a color. Refers to how much light a color reflects
or absorbs. A color with a high value is light (e.g. pastel yellow). A color
with a low value is dark (e.g. navy blue). |
|
Chroma |
Also called “saturation” or “intensity” refers to the purity or vividness of a color. It describes how much a color deviates from neutral gray. A high chroma color is vivid (e.g. fire engine red). A low chroma color is muted (e.g. dusty rose). |
Using the Image Color Analyzer Tool
The Image Color Analyzer Tool user interface is divided into 3 main sections:
1) The image input section
2) The parameter settings section (which includes the “Analyze Image” button)
3) The graphical results section
Image Input Section
The image input section is shown below:
There are 4 ways to upload an image to the Image Color Analyzer Tool:
1) Drag-and-drop an image into the area bounded by the dashed line.
2) Paste from the clipboard. To do this first click in the area bounded by the dashed line to select it, then paste.
3) Use the blue “Choose File” button.
4) Use the green “Take Picture” button if your device has a camera.
Once you have successfully uploaded an image to the Image Color Analyzer Tool the image you uploaded will be displayed to the right for reference as shown below:
The Parameters Settings Section
The parameters settings section is shown below:
Most users can just leave all these settings at their default values. Advanced users can find out more about these settings further down in this document.
To begin the image analysis, click the “Analyze Image” button as shown above.
Graphical Results Section
The graphical results section consists of 2 plots.
Radius = Lightness Plot
The first plot represents lightness (value) on the radial axis which is the distance from the center of the graph. Pure black from the uploaded image will show up in the center of the plot, pure white will show up somewhere around the rim. The value of all the colors from the uploaded image are analyzed to see how light they are (what their value is) and then plotted accordingly. You can also see how saturated the colors are by looking at the individual bubbles that make up the plot.
Radius = Saturation Plot
The second plot represents chroma (saturation) on the radial axis which is the distance from the center of the graph. The center of the plot represents “colors” with no saturation – i.e. grays, white and blacks. As colors move away from the center they become more saturated.
