**A beginner’s guide to ports.**

We have all seen them before, they look a bit like this: **#ff0000**. That’s the hex code for the color red. However, what exactly does it mean?

Most of us have heard of binary before, but what about hexadecimal? Hexadecimal, sometimes known as ‘hex’ or ‘base 16’ is an alternative to binary, which is ‘base 2’. Hexadecimal can be used to store numbers. So how does it work?

There are 16 possible characters in hexadecimal, they include 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F. Each character represents an integer from zero to fifteen.

Now that we know what each of the characters mean, let’s start converting integers into hexadecimal. So let’s convert the number 2,087 into hexadecimal.

Let’s first start off by dividing 2,087 by 16. That should get us a result of 130 with a remainder of 7. According to our chart from above, 7 is also ** ‘7’** in hexadecimal, so now we need to set

Let’s try another, this time we will try the number 255. First we need to divide 255 by 16. That will get us 15 with a remainder of 15. Now we take the remainder and line it up to our chart. 15 translate to ** ‘F’**, so we can save

Hex color codes usually look something like this: **#ff0000**, but what does this mean? Well, let’s break it down!

RGB stands for Red, Green, and Blue. These colors are the primary colors of light. An RBG value might look like this: **rgb(255, 0, 0)**. At first this may not look like much, but if we take a closer look, the first number represents red, second number represents green, and the third number represents blue. The values in those spots can range anywhere from 0, all the way up to 255. Let’s try to make some colors!

With light, red and blue makes magenta, so let’s try to make a magenta color with RGB. So to get a bright magenta color, let’s set both blue and red to their maximum value of 255. So we have: **rgb(255, 0, 255)**, which gives us a color like this:

rgb(255, 0, 255)

But what if we wanted it to be a bit lighter, like a more pinkish color? How do we do that? White in RBG is **rgb(255, 255, 255)**, all the colors combined. So how about we try changing **rgb(255, 0, 255)** to **rgb(255, 150, 255)**? We get the result of a light pink.

rgb(255, 150, 255)

So how about a darker color? So we can have a dark pink? In RGB, black is **rgb(0, 0, 0)**, so let’s bring our values closer to that. So let’s try **rgb(150, 0, 150)**. With that, I got this:

rgb(150, 0, 150)

Now that we have a good understanding of RGB, we can understand how hex colors work. A hex color will look something like this, **#ff0000**. But what does this mean? Let’s combine what we know about RBG and Hexadecimal to figure it out. We know that 0xFF is 255 in hexadecimal, and 255 is the maximum value for RGB. If we see what #ff0000 is, we can see that it is a bright red color:

#ff0000

What we can find out is that **#ff0000** translate to **rgb(255, 0, 0)**. Let’s try to get our magenta color again, we know that it is **rgb(255, 0, 255)**, so let’s see what **#ff00ff** gets us.

#ff00ff

Awesome! We got our magenta color, now let’s try to get our lighter color again, but this time in hex. Our light magenta in RGB is rgb(255, 150, 255), so if we convert 150 into hex, 150 divided by 16 is 9 with a remainder of 6. 9 divided by 16 is 0 with a remainder of 9, making our hexadecimal value ** ‘0x96’**. The result is our hex color of #ff96ff, and when we see the result of that, we get our light magenta.

#ff96ff

After reading this, you are able to understand how the hex colors work, how the first two characters are for the red, the next two for green, and the next two for blue for RGB colors. I hope this article taught you something new, whether it be hex colors, RGB, or base16.

If you enjoyed this article, please follow me on other platforms of social media below:

**Danny Tran (@hoogleyb) * Instagram photos and videos**_335 Followers, 115 Following, 116 Posts - See Instagram photos and videos from Danny Tran (@hoogleyb)_www.instagram.com

**Danny Tran (@HoogleyB) | Twitter**_The latest Tweets from Danny Tran (@HoogleyB). I'm proud to say I'm a senior web developer, but I'm more proud to say…_twitter.com

If you find there is anything wrong with the article, mention it below in the comments and I’ll fix it!

Happy Coding!

L O A D I N G

. . . comments & more!

. . . comments & more!

Hackernoon hq - po box 2206, edwards, colorado 81632, usa