Home
PerceptualColorPicker is just a color picker like another one, except that it uses perceptual colors planes instead of sRGB and HLS/HSV planes as backgrounds. Before you use it, you should be familiar with perceptual colors or not because you just have to look at them for appreciate them. You should notice that the perceptual color system use in PerceptualColorPicker is CIE Lab and its polar coordinates transformation CIE LcH. Unlike other color picker, PerceptualColorPicker use graphic tools to choose between 3 and 7 colors instead of only one.
Your are maybe impatient to use it and, in the same time, curious about how it works. Let's begin to explain it !
You may have already notice that colors are generally describe with tree numbers as they are tri-dimensionnal data. Unfortunately screen have only two dimensions. So we can only have two coordinates displayed on screen. We use a slider to go through the third one. Using CIE Lab and CIE Lch there are six planes which are those listed by the planes menu.
The first one is a/b which means that we have the "a" coordinate of CIE Lab for the X-axis and "b" coordinate for the Y-axis. You could see it on the general view of the interface above. You could also see the "L" at the right of the "ortho" slider which means that the slider will go through the "L" values (0-100) of the CIE Lab. It works the same way for the five others planes : the first letter to X-axis, the second letter to the Y-axis and the letter what is not in the menu is the variable that the slider goes through.
There are two modes : ortho and contraste. Their names are not self explanatory. To understand what they mean it's necessary to remember that the goal of a color picker is to go through the whole set of colors which is a volume. When we have a plane there are different ways to go through the volume with it. In PerceptiveColorPicker we use two ways :
-
ortho : the first way is to go through the volume keeping the plane parallel to the axes. As we said that the fist coordinate was affected to the the X-axis and the second to the Y-axis, we could say that the third coordinate is affected to the Z-axis and is constant over the plane. Its constant value is given by the ortho slider.
-
contraste : another way for going trough the colors volume is to use a gradient instead a constant for the third coordinate. In this case the slider goes from 0° to 360° to change the orientation of the gradient attempting that the vector gradient always goes through the origin of the orthonormal. Don't beware if you don't understand the way it works, just look at the colors to choose them. That's what is really useful !!! The ring with the value gradient which turns when the slider moves is a hint of what is happening with the colors plane. When L is the variable you should find a relation of the lowest color values of the plane and the dark side of the ring.
This menu provide intuitive tools. The tools look at the color what are below each circle they have. If a circle is out of the colors plane the tool see the background color below the circle. Because of the colors planes variations, the user must take care the tool he uses stays over them. The + and -, on the left, vary the number of divisions, from 3 to 7, for segment and quadratic and the number of sides for polygon.
- segment : segment is useful for linear gradient in different planes. If you are using them for neutral representation of data beware of the chroma variations however. (chroma = c from Hcl).
- quadratic : a quadratic curve is a spline with only one control point. It's a more dynamic tool that provide nice effects.
- polygon : in the a/b plane polygons give the most balanced theme. If it stays centered on the plane origin you'll see that the chroma is constant. The center button is available for polygons if you need to center them again.
- related : two colors have two related colors because in a plane you can construct two related points when you swap their coordinates. These four colors have very strong relations. I love them !
- palette : palette is a more complex tool. You place the three vertex of a triangle and it give the average color of each side and also of the three vertex. If you keep the center in the translation ring you get more balanced theme. Palette give seven colors but you can avoid the fourth that is the center. The center button is available for palettes if you need to center them again.
Changing the color code have two functions :
- the more obvious is to permit to export color theme out of PerceptualColorPicker. WEB and sRGB are for that use.
- another function is to control perceptual characteristics of color theme by looking at the variations when using the sliders of the two modes. For that you'll use CIE Lab and CIE LcH.
The small snapshot export the colors as a png file :
Copy : copy to the clipboard the web colors code.
Light gray square button : change the background of the PerceptualColorPicker. It becomes a dark square button to go back to dark background.
Special thanks to Jarek Sacha and Bruce Lindbloom for color spaces conversion utility.