in Programming

Trick for guessing hex color values

I was recently doing a bit of design work on Grease when I was reminded of an old trick I’ve figured out that some people aren’t aware of.  As a young developer hex codes for colors in html / css seemed completely strange.  I knew that #ffffff was white and #000000 was black, but for anything else, I needed to look it up either on the web, or fire up Photoshop or which could give me the values I wanted (now there are also browser extensions for that sort of thing).  I remember one day I was working on something and I started noticing a pattern.  That’s when I realized the ‘trick.’  Here it is:

Each group of two digits is a RGB value, in that order, with digits from 0 to F

Pretty simple, right?  So if you want something red, you make the ‘R’ values F and leave the rest as zero:


If we plug into your style you get the result:   red.

You can do the same thing with Green (G) and Blue (B).  If you want gray, make all six digits the same.  As the numbers go higher, the color get progressive lighter.  Same thing with RGB.  To use the example above, if you used, say ‘5’ instead of ‘F’ (i.e.’ #550000) then you’ll get a darker red.

In order to make different colors, you first need to forget what you learned in kindergarten.  You think Blue and Yellow make green?  Well, yeah, but here you’re starting with Red, Green, and Blue.  You don’t have yellow and you already have green.  So how do you make yellow?  You combine Red and Green: #FFFF00.   Here is the full set of simple combinations:


With those simple combinations, you now are on you way to easily getting colors ‘close enough’ to keep coding and have a rough idea of where you’re at color-wise.  More importantly, once hex codes become more than magical incantations to get the desired effect, you can start experimenting without needing to go out to another sources.  Want orange?  Maybe that will be some combination of red and green.  You can start experimenting and discover you were right.  A good orange is at #FF9900. 

If you run into trouble, all those other tools that you’ve used in the past are still available, but what I’ve found is that as I use this trick, I’ve needed to rely on those tools less and less.  Good luck!

Write a Comment