RGB Venn Diagram

If you’re unfamiliar with the RGB color space, it works basically like this. You add a bit of a color component by increasing one of the values. R=0, G=0, B=0 (or 0,0,0) is black, and R=15, G=15, B=15 (or 15,15,15) is white. The examples below are all created using the data table format included below.

UNION

Union takes two (or more) query results and provides you with the unique result. For example, if I had two queries 3, queries that each returned a segment of the color set with the color value = 15 and the other color values > 14, I could write this as three select statements with a form similar to the following, which selects the red subset SELECT r, g, b FROM colors WHERE r = 15 AND g >= 14 AND b >= 14. That gives me 4 rows, Set 1 below.

Now I’ll include another collection of colors: SELECT r, g, b FROM colors WHERE r BETWEEN 10 AND 12 AND g = 11 AND b BETWEEN 12 AND 14, labeled Set 2. And one more: SELECT r, g, b FROM colors WHERE r BETWEEN 9 AND 10 AND g >= 14 AND b BETWEEN 14 AND 16 The result is Set 3.

And now all merged together using a UNION. Notice it removes the duplicate, highlighted in red above, saving us some time! The order by is just to make life easier when reading the newly merged results. As you can imagine, with a more complex dataset, this could be really handy!

SELECT r, g, b FROM colors WHERE r = 15 AND g >= 14 AND b >= 14
UNION
SELECT r, g, b FROM colors WHERE r BETWEEN 10 AND 12 AND g = 11 AND b BETWEEN 12 AND 14
UNION
SELECT r, g, b FROM colors WHERE r BETWEEN 9 AND 10 AND g = 11 AND b BETWEEN 14 AND 15
ORDER BY r,g,b

UNION ALL

As a quick example, using the same 3 queries and result sets from above, UNION ALL gives us the duplicate record.

SELECT r, g, b FROM colors WHERE r = 15 AND g >= 14 AND b >= 14
UNION ALL
SELECT r, g, b FROM colors WHERE r BETWEEN 10 AND 12 AND g = 11 AND b BETWEEN 12 AND 14
UNION ALL
SELECT r, g, b FROM colors WHERE r BETWEEN 9 AND 10 AND g = 11 AND b BETWEEN 14 AND 15
ORDER BY r,g,b

Tables

A table “colors” was created and into it I populated the full set of colors leveraging the ordinal int values of 0-15, resulting in 4,096 rows of colors. You can of course do this for all 256 values of RGB supported in the CSS color space, which would be more accurate for performance testing of your queries, but I digress…

CREATE TABLE `test`.`colors` (
  `r` INT(4),
  `g` INT(4),
  `b` INT(4),
  PRIMARY KEY (`r`, `g`, `b`)
)
CHARACTER SET utf8;

You can use this script to quickly populate your newly created table. There are lots of other ways to do it, but this was the fastest for me to write today.

$conn = mysqli_connect($server,$username,$password,$schema);
for($r=0; $r<16; $r++){
	for($g=0; $g<16; $g++){
		for($b=0;$b<16; $b++){
			$conn->query("INSERT INTO colors (r,g,b) VALUES ($r,$g,$b)");
		}
	}
}
$conn->close();

Recently I needed a color picker for a project and spent a little bit of time reviewing JavaScript color picker tools for integration in the application. What I found was a wide variety of tools that are either hard to implement or hard to use. That aside, there were a few that were reasonable and so I’m calling them out here should anyone need such a thing. It should also be said that there is a lot of room for improvement in the utility space should anyone want to take a stab at improving color pickers.

The most intuitive tool for non PhotoShop users is the one provided by ColorJack. The layout is typical of PhotoShop but without the RGB, CMYK and other color models being in the foreground. Those tools, while useful to designers and production shops, are meaningless to application users. The hue slider is intuitive and easy to use and the picker works in all browsers. What I did find complicated about the picker was it’s ability to easily integrate into a form that might require multiple color selections (such as a layout editor) and the Dynamic HTML placement was unreliable. It did have the least technical feel though ultimately making it the easiest to use. jQuery users be warned, you may need to tweak some of the code as there’s overlap. The widget includes the core functions it requires.

My personal favorite is from John Dyer who provides a clean PhotoShop like implementation. While I’ve not had the opportunity to use it on a site, and therefore have no experience with the level of difficulty integrating it, I have a feeling this will find it’s way into many administrative tools I’ve got on the roadmap over the next few months. The look at feel is clean and simple and the code is structured in a logical. I’ll likely be working to combine his code into a smaller package that I can easily add as a method to my input classes for the task (much like the tool below from WebReference.

The last color picker I want to call out is a detailed article on how to build useful picker from WebReference.com. It integrates cleanly multiple instances on a single form and has two different “modes” one as a simple scale (seen below) and another as a photoshop like tool. Obviously with a little time, this would be easy to modify to suit your needs (assuming you wanted to take away either the PhotoShop gradient or the color strip).

What none of these tools do is help with making good color choices. While I offer a tool to assist in finding some level of color harmony leveraging complementary colors, It would be neat if one of these tools let you find a set of colors based on the color wheel. Use mathematical operations, it’s possible to determine clash, complementary, split complementary, analogous, monochromatic and so on. Perhaps it’s time for a re-write of that tool?