fuddlepixelFuddlepixel coz tech is fun();

What are RGB and hexadecimal color codes? How colors are coded in computers?

RGB and HEX colors are the standard color identifiers used in computers everywhere. Whether games or website, they play a fundamental role in defining colors in computers. But how they actually define every color using just numbers? Let us discuss!

By Shubham Ramdeo
12 November 2018 · 4 mins read
# computer  website 

What are RGB and hexadecimal color codes? How colors are coded in computers?

Developers and designers, use RGB and HEX color codes to specify the color they want to use. These values have become standard for defining colors in every graphical system.

There are many color systems. RGB stands for Red Green Blue. The other popular ones are CMYK which stands for Cyan Magenta Yellow Black. all of these different color models have their own purposes and advantages.

But for programming and designing on the computers, RGB is the most popular. They are easiest to use and works best for the display screens because these displays are also based on RGB!

Let us see what is actually going with the screens. I clicked an actual photo of the above Fuddlepixel heading of this site with my smartphone camera with maximum zoom possible.

For my laptop, this was the resulting image.

A computer screen with RGB pixels
A computer screen with RGB pixels

If you can see closely, you can find the pixels, having only three colors!

Screen pixels in zoom
Screen pixels in zoom

A pixel consists of three individual light, each having a distinct color. A red, a green and a blue light.

The brightness of these color units can be varied. From bright color to dark black.

The theory behind choosing these colors is simple. They are primary colors if black is the base, and so mixing them in different quantities will create different colors. Which means, adding all the colors will give us white.

Every color on screen is made of three primary colors red, green and blue
Every color on screen is made of three primary colors red, green and blue

In old times, due to the limitations of technology, computers displays had a very limited color palette. We have seen the 256 colors of Super Mario. That time there was no need to have any special coding system. These 256 colors had their number as the code. From 0 to 256 straight.

Now in the age of the internet, for each of red, green and blue in the RGB color system, we can have 256 values. From 0 (off) to 255 (full bright) we would have:

256 shades of red × 256 shades of green × 256 shades of blue

Which equals 16777216 possible colors can be build made with RGB !!!!

When dealing with such amount of possible colors, a system identifies them surely becomes necessary for the developers and designers. And that is the base of RGB. Being fundamental to the color theory and to the screen itself.

From the above primary colors diagram, you can see that magenta is defined when red and blue are fully bright, and green is fully off. So that would be rgb(255,0,255)

So why Hexadecimal then?

RGB colors codes are popularly shown in their hexadecimal forms. Using hexadecimal form seems more convenient because of their compact size, and being used for web designing more often I guess. Programming language trends play an important role in the developers’ culture.

For a color like Medium Violet Red,

has a Hex color code #C71585

Just like the RGB code, every hexadecimal color also has three parts. The first two letters define red, next two green and the last two blue.

The only difference is that RGB uses the decimal number system, while hexadecimal color codes would use the hexadecimal number system.

Obviously!

Let’s try to decipher it.

#C71585 would mean:

  • red: C7
  • green: 15
  • blue: 85

If you know how to convert hex to decimal, where the base is 16 instead of 10, you can find the equivalent decimals for the hexadecimal are as follows:

HEX: 0 1 2 3 4 5 6 7 8 9 A  B  C  D  E  F
DEC: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

HEX: #C71585

R : C7 => (12) * 16 + (7) = 199
G : 15 =>  (1) * 16 + (5) =  21
B : 85 =>  (8) * 16 + (5) = 133

RGB: 199, 21, 133

So the equivalent decimal numbers would be:

  • red: C7 => 199
  • green: 15 => 21
  • blue: 85 => 133

And therefore, the color #C71585 simply means rgb(199,21,133)

In hexadecimal, F is the highest unit. That means 16. So for Pure white, we have #FFFFFF.

The yellow color is formed when green and red are mixed in their full brightness, while blue is off. So Yellow would be #FFFF00 which is equivalent to rgb(255,255,0)

Developers also use shortcodes for the Hexadecimal color codes. That is, if all three colors have values such that they are repeating their letter, you can convert a 6 figure hex code into a 3 figure by removing those duplicates.

For example, suppose a color #CC7744, then you can write it as #C74.

Therefore, the Yellow color would become #FF0, white as #FFF.

And that is how the programmers are using RGB and HEX color codes, giving colors to the games, apps, and sites we use! There are many interesting number systems in the science of computers that must be explored, So stay connected!

Happy coloring!


Share this :



Update me weekly ✉

Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.

I'm in ♥


Or follow us
   


About author

Shubham Ramdeo

Shubham Ramdeo

Shubham Ramdeo is the founder of Fuddlepixel. He is a geek, a writer, involved with many technical and humanity projects.

Meet me!



Recent





Related

computer 

website 

Top