oliviervicario / perceptual-colorpicker-java Goto Github PK

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.

As far as I can tell Contraste will always go full max to min at the angle you choose, a slider for the range of the gradient will be helpful for when you don't want to use such a wide range. Perhaps a slider with two half-circles to represent the low and high ends?

Also I seen your work on the Java implementation of JzAzBz while looking it up myself, I'm looking forward to it.

Ortho + Contraste are ineffective for the color picking tools and are mainly useful for visualizing slices of the gamut. The reason I believe this is because you can't set the 3rd dimension individually per point on the color picking tools, you can only approximate the movement you want in a roundabout way. Also there's not much contrast available either, I tried out a gradient on a tile set and Contraste was unusable, instead I had to use Ortho and then mask screenshots of different levels together and then adjust the contrast within the image editor on top of that. It wasn't an ideal process, though it did look very good in the end.

My proposed solution is an optional isometric view / interactive 3D rotation and the ability to right-click and drag individual points up or down the 3rd dimension with a dotted line between the point and the plane's surface to aid in visualizing the location on the plane.

Alternatively, and I save this as a second option because it's very different from the current method, full-blown 3D representation of the gamut with outlines or wireframes showing the color of the outer edge, and perhaps an optional and adjustable volume of sparse small floating dots to show the color inside the volume as well. There's one other 3D interactive color tool I've found that operates like this, though it's not a color picker and more of a gamut / ICC visualization and color manipulation tool, and it's also Java with available source: ICC3D.

Lastly, having multiple color picking tools on the screen at once would be helpful with constructing larger palettes rather than just single gradients. A tool that's like segment or quadratic but with the ability to extrude another path off of it would help with the creation of color palettes like this:

Where branching ramps and shared colors are important. Currently the program can create beautiful selections of color but for this sort of use that goes beyond single gradients the user will have to manually interpolate and adjust the colors outside of the program, despite its wide selection of color scheming tools.

And a minor issue: The exported PNGs have a blank alpha channel that could be dropped.

Overall it's an extremely good program, can't believe it doesn't have more groundswell. The UI is beautiful, the colors even more so, and the ability to do more than just a simple linear gradient is excellent.