Wiki Edit

[torridgristle]

Went through the Wiki and cleaned up some minor issues, tried to keep it close to the original. There's a broken embed for the smallSnapshot.png image, and also inconsistent capitalization of LCh if I remember correctly. I'm pretty sure it's supposed to be LCh judging by the few times I've seen it in official-looking contexts.

---

PerceptualColorPicker is just a color picker like any other, except that it uses perceptual color planes instead of sRGB or HLS/HSV planes as backgrounds. Before you use it you should be familiar with perceptual colors because you have to look at them to appreciate them. You should notice that the perceptual color systems used in PerceptualColorPicker is CIE Lab and its polar coordinates transformation CIE LCh. Unlike other color pickers, PerceptualColorPicker uses graphic tools to choose between 3 and 7 colors instead of only one.

You are maybe impatient to use it and, at the same time, curious about how it works. Let's begin to explain it!

The Planes Menu

You may have already noticed that colors are generally described with three numbers as they are tri-dimensionnal data. Unfortunately the screen only has 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 listed in 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 the "b" coordinate for the Y-axis. You can see it on the general view of the interface above. You can 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 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 not in the menu is the variable that the slider goes through.

The Modes Menu

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. In PerceptualColorPicker 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 first coordinate is set to the the X-axis and the second to the Y-axis, we could say that the third coordinate is set to the Z-axis and is constant over the plane. Its constant value is controlled by the ortho slider.

contraste : Another way of going through the color volume is to use a gradient instead of a constant for the third coordinate. In this case the slider goes from 0° to 360° to change the orientation of the gradient passing through the origin of the volume. Don't worry 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 color 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.

The Tools Menu

This menu provides intuitive tools. The tools look at the color below each of their circles. If a circle is out of the color plane then the tool will see the background color below the circle. Because of the color planes variations, the user must take care that the tool they use 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 gradients in different planes. If you are using them for neutral representation of data be aware of the chroma variations. (chroma = c from Hcl).
quadratic : A quadratic curve is a spline with only one control point. It's a more dynamic tool that provides 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 relationships. I love them!
palette : Palette is a more complex tool. You place the three vertices of a triangle and it gives the average color of each side and also the color of the three vertices. If you keep the center in the translation ring you get a more balanced theme. Palette gives 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.

The Color Code Menu

Changing the color code has two functions :

The most obvious is to export color themes out of PerceptualColorPicker. WEB and sRGB are for that use.
Another function is to control perceptual characteristics of a 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 Snapshot Menu

The small snapshot exports the colors as a PNG file :

smallSnapshot.png (Broken link)

The wide snapshot exports the whole window. This allows you to keep track of how you got your theme and its characteristics.

Other Commands

copy : Copy the web colors code to the clipboard.

Light gray square button : Change the background of the PerceptualColorPicker. It becomes a dark square button to go back to the dark background.

Special thanks to Jarek Sacha and Bruce Lindbloom for the color spaces conversion utility.

[OlivierVicario]

Hello,
I correct the broken link for smallSnapshot.png
Thanks for your contribution !
I am now working about JzAzBz implementation instead of CIE Lab. It's a great improvement of the color picker.

I shall publish it as soon as I can.