Recommended Agency

text controls: text only | A A A

Sorry, our twitter status is currently unavailable, posted 9 minutes ago

RSS feed icon What is RSS?

blog.

Hex colour codes explained the quick way

Hex colour codes explained the quick way

When I tell people I’m a graphic designer the most common response is an enthusiastic “So you design logos and stuff?” - always the logos, what’s up with that? Much less interest in the digital solutions provided with websites and apps but at least they’re excited about my job.

It beats the common assumption many make: that I can fix computers. You should see the disappointment on people’s faces when I can’t tell them why their laptop won’t turn on. Umm… is it charged? Yes? Then I’m all out of ideas.

Similarly, as the designer at focus, I felt like a bit of a let-down when I could only loosely answer a question from a curious colleague: “How do you think they decide on the hex colour codes?”

Turns out staring at someone blankly then googling the answer is a conversation killer. But now I’m armed with that knowledge should someone ask me again. What’s that you say? How do they decide on the hex colour codes? Allow me to explain as quickly and clearly as possible. I hope you’re sitting comfortably, this might be a bumpy ride…

 

So what is a hex colour?

Hex is short for hexadecimal. You might recognise these, #0000FF for example represents a shade of red. There are sixteen possible characters, these are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F.

Each of the characters represent an integer (a number that is not  fraction) from zero to fifteen. Here’s how we go about converting integers in to hexadecimals.

As an example we’ll convert the number 255 to a hexadecimal. To do this we first divide 255 by 16 (the number of available characters). The result is 15 with a remainder of 15. If you look at the chart above 15 is F.

We put aside the remainder figure (15) for a moment and divide the resulting 15 by 16 which is 0 with a remainder of 15. We already know 15 translates to F.

So now we have nothing left to divide, these figures we’ve been putting aside go together in reverse order (please don’t ask why, I’m not sure either of us could handle the answer to this too) and you get FF.

 

What is RGB?

To help you understand the rest I’ll have to briefly summarise RGB value. At this point I have to hope you’re even still with me but for those of you who are, I promise we’re getting somewhere with this!

RGB stands for Red, Green and Blue. The RGB value of that same red used in the hex example above would look like this: rgb (255, 0, 0) the first number represents red, the second green, and yep you guessed it the third, blue. The values range between 0 and 255.

Simply put, the hex code is created by applying the swanky little mathematical method I just explained to you, to each individual RGB property.  R = 255 which we now know translates to hexadecimal as #FF. You’d then do the same calculation for green (G) which is zero so presented in two figures is 00, value of B is also zero, so that’s 00. Giving us hex colour #FF0000 which is the exact same red as rgb (255, 0, 0).

 

Stop the clock!

How did I do? If you have any questions about this article you’re not the only one, I mean, please feel free to get in touch.

 

Jordana Jeffrey
Jordana

Created on Wednesday August 07 2019 08:00 AM


Tags: webdesign design


Comments [0]








Comments


Add a comment