One day back when I worked at Microsoft, I was out to lunch with some of my coworkers at a Thai restaurant. We were making conversation, and our attention turned to the color of the walls. They were somewhere between green and blue, and fairly bright but not extremely vibrant. One guy at the table called it “blue-green”, and another guy called it “teal”. I said it looked more like “33AA88″. They just stared at me.
I suppose even developers might find it difficult to convert colors to hex in their head, but I’ve always found it rather easy. I don’t know if I’m in the minority or majority here, so I’m writing down my thought process to help explain it to anyone who might want to learn the skill.
Really, the process of converting from a color like “copper” to a web-ready hex code can be broken down into 4 steps:
- Convert the English color name into a visual representation of that color in your head.
- Take that color and describe it in HSL.
- Convert the HSL to RGB.
- Rewrite the RGB on the hex scale.
See the color
If I ask you to tell me the hex code for “copper”, the big issue has nothing to do with the mathematical conversion at all. The problem is that my idea of copper and yours might not be exactly the same. I would describe copper as being a slightly darker, paler gold, but Crayola apparently defines it as a kind of pale light red with a hint of orange, almost a “salmon” color.
The point is that you need to be able to see the color in your head so you can analyze it. This may seem easier with more common colors like brown and green, but even they can be problematic. Ask a web developer for a pure green, and they’ll likely respond with what most non-tech people would consider a bright lime green, not the deep green of a plant that most people think of as green.
Hue/Sat/Lum
The next step is to take your idea of the color and start describing it in terms of hue (color), saturation (bright/pale), and luminosity (light/dark). So copper, for example, in being a slightly darker, paler gold, might have a hue somewhere between orange and yellow. Since it’s slightly pale, the saturation would be more than half but not at maximum, so maybe around 75%. And for luminosity, I’d say it’s not extremely light or dark, so maybe somewhere in the middle, around 50%.
Red/Green/Blue
Colors in web design are expressed in a combination the 3 primary colors or light: red, green, and blue. By varying those 3 values, a computer can make any color you can think of. The problem is that this scale is not very intuitive to the human brain. Fortunately there are some techniques to map the more obvious HSL values to the RGB color definition.
First, hue (color) determines which of the R, G, and B values are the most important. If the color you’re describing is a shade of blue, then the B component would be the most important, followed equally by R and G. If you’re describing copper, which we’ve said is an orange-yellow, then R is the most important, followed closely by G, with B not really being very important at all. It may help to refer to a color wheel if you are still learning the relationship between colors. In the case of copper, yellow is halfway between Red and Green, and orange is halfway between Red and yellow, so we know that Red is more important than Green, and Blue is not relevant.
Now that you know the relationship between R, G, and B for your color, you need to use the luminosity to figure out the average value of the three. For example, in the case of a mint green, which is light and has a high luminosity value, the average of the R, G, and B values will be high. In the case of copper, which is not particularly light or dark, the average of the R, G, and B values will be somewhere around 50%.
Finally, we need to use the saturation to determine the spread of the R, G, and B values. For colors with a low saturation, like taupe, the spread will be small, so all of R, G, and B will be close to the average we determined above. For something like copper, with a saturation somewhere around 75%, the spread will be fairly major, averaged around the 50% luminosity. Since we know that in copper, R is most important, followed closely by G and distantly by B, we can come up with a value for R around 75%, a value for G around 55%, and a value for B around 20%. This part takes a lot of practice to get good at.
Hexadecimal
Colors in web design are usually represented as a 6-digit number in base-16. There is interesting reasoning for this, but the practical definition is that the first two digits are the Red value on a scale of 0 to FF, then two for the G, then two for the B, all on that same scale. Think of 0-F as 0-15. Even though each RGB component is specified using two digits, there’s really not much point in trying to be that precise for estimates in your head. If you narrow it down to 16 possibilities for each component (0-F), then duplicate each digit, you’ll get a good approximation.
So for copper, R=75% becomes 11 on the 0-15 scale, or B. This is because we’ve taken 16 * 0.75, which gives us 12 on the scale of 1-16, and subtracted 1 to put us on the scale of 0-15. In hexadecimal, 11 is represented as B. And finally, we repeat the B twice to fill both digits, giving us a Red component of BB.
We do a similar procedure for G=55% -> 88, and B=20% -> 22. In stringing all 6 digits together, we arrive at BB8822. According to Wikipedia, the official hex code for copper is B87322, which is pretty darn close to our estimate. If we want to practice, we might notice that our version looks a bit yellower than the official color, which feels bit closer to a rusty-red color. So perhaps we would try raising the Red value, lowering the Green value, or raising the Blue value.
Practice makes perfect
This may sound like a long and difficult process. I suppose it can be when you are first starting, but like anything, practice will help immensely. Even though I follow the above thought process when converting a color to a hex representation, I rarely think about each individual step. I’d imagine that most people who’ve mastered this skill rarely if ever even consider the actual steps they are taking.
Estimating hex colors is skill that can appear to be magic, extremely difficult, or just plain weird to someone who doesn’t understand the technique. The being said, I’m not going to recommend it as a way to impress your date: “Your eyes are so beautiful, such a wonderful 2299FF.”
