RGB/Web Color Mixer Info



New (2005)

I have added a “HiRez” version of the 24 bit mixer. It is essentially the same thing, but uses color grads that are 2 times the height, and flyover maps that are twice as tall, so it’s easier to fine-tune the exact number you are looking for. One of the problems the original suffers from is that a very small mouse movement will cause a change in value. This is because the image maps used are basically 2 pixels high. In the “HiRez” color mixer, they are 4px high, and allow a little more accuracy in nailing an exact color value. Back when these started, it was pretty rare for people to have screen resolutions over 1024x768, so the mixers were designed to fit at or below those resolutions. Now the chances are better that a user will see the 2x color grads and the value readout boxes on a single page.

General Information

There are two versions of this tool. The original ‘Browser Safe’ color mixer was made help pick colors for web design. Then the 24 bit (then called ‘true color’) mixer came along shortly after to help in choosing RGB colors, and to get a feel for how the RGB color space handles. By this I mean it is one thing to talk numbers as they refer to colors, and it's another thing to really understand what these numbers represent. You actually need a "feel" for the color space in order to use it well. Another reason was practice. Yes, practice, drills, trials, that old stuff. I found that by sitting around and playing with these tools, I was able to get a good 'reflex' as to what kind of RGB values I might want when the time came to use them. When at work, one sort of assumes an innate understanding of the RGB color space, and indeed that understanding exists, though I give some of the credit to these color mixers. Another important aspect of these color mixers, is that they allow web designers a lot of freedom to see, and quickly see, different color combinations of background and text/foreground. I find that I cannot design a web page (ironically mine are mostly monotone for style) without consulting these. True, I’m not a web designer. I even use them when I'm compositing, as the real-time interaction I have not seen anywhere else, including super-high-end applications.

So apart from general art usage, the color mixers here are most applicable, I think, to web designers and web content people. This is the reason that one of the mixers addresses "web safe" colors only.


A little back story here...back in 2000 I set out to learn JavaScript as I thought this new web thing might go somewhere someday(!). I bought a book, tried a few things, and the Beak f(x) ‘Browser Safe’ color mixer was born. I learned a bit more in the next few weeks, and came up with the '24 bit' mixer, which originally used different techniques to accomplish what looked like the same thing to the user. It was not until recently that I decided to make the two aligned in their technique - image maps vs. colored text links. So I maintained the color mixers here and there, but basically let them sit as 'done" for a long time. I though for sure that the web safe version was going to be useless any day now. Suddenly, there was resurgence in interest in browser safe colors, as mobile devices started to hit the market. Many devices: Blackberrys, Palms, phones, MP3 players and other things require a reduced color palette for their LCD screens, so the “browser safe" mixer started becoming relevant again. The revision history is quite simple: in the summer of '04 I had enough time to re-code the 24 bit mixer, using DOM complaint code, and objects, to make it faster and more portable across platforms. There had been several relevant additions to the available browsers and platforms since I first started in 2000; Mozilla came back, Netscape went away, Safari showed up and (thankfully) did not catch on, IE grew in feature, etc. The object model addresses all these things, in addition to giving me reusable object code. BTW Firefox is the best browser.

Then in Dec 2005 I finally decided to re-code the (at this point very old) ‘browser safe' version to be more platform-independent, and to function in a wider array of browsers. The speed was always good, but the original technique was fading in it's utility. So now (Dec. 2005) the same object model is used throughout, even if there is a slight penalty of speed, modern hardware makes this a moot point. On that note, I will say that one of the reasons that the layout of these tools is a bit sparse, is that they run client side, and need refreshing quite often. So I kept them light, as not to slow them down. You might say that less is more when picking colors.


Back to Top