A Brief Introduction to RGB and Hex Colors

When discussing colors, RGB colors and hex color codes are two of the most commonly used models. Both relate closely to how TVs and computer screens physically render colors. In the sections below, we'll introduce how TVs and computer screens do this, introduce the RGB model, the Hex code model, how they relate to each other, and at the end, provide an interactive demo which showcases how colors are formed.

Colors on TVs and Monitors

A closeup of a computer screen which reveals the individual pixels. If you look closely, you can see the individual colors of each pixel as small vertical bars of red, green, and blue.

TVs and computer screens are made up of hundreds of thousands of pixels. A pixel is a small square unit which is responsible for displaying a single color. When groups of the same, or similar, colors are formed, the result will appear as shapes, structures, scenery, and other types of images. Moving images and videos emerge when pixel colors change quickly in relation to eachother to give the illusion of motion. An individual pixel is able to render almost any color by using a combination of red, green, and blue bulbs, each of which can emit at different levels of intensity. For this article, we will consider the intensity of a bulb to be how bright it is (though technically they are not the same thing). Different colors emerge when these three colors each emit at different combinations of intensity. Red will appear when the green and blue bulbs are off, same with green and blue respectively, and other colors will emerge when two or three bulbs are on at different levels of intensity. These pixels are too small for the human eye to see the colors of each individual bulb; instead, the pixel is perceived as some combination or mixture of the colors of those individual bulbs. On older TVs and computer screens, you can begin to see the individual pixels by moving very close to the screen, but with newer screens, this is next to impossible.

RGB Color Model

The RGB color model represents colors by holding three numbers, one for the level of red, one for the level of green, and one for the level of blue. This model closely corresponds to the way pixels use their bulbs to display colors. The minimum value for each color is 0 and the maximum value is 255. A value of 0 corresponds to the color being entirely off, and a value of 255 corresponds to the value being maximally intense. If an RGB color has 0 for all three values, the color will be black. If it has 255 for all values, the color will be white. If all three values are same, the color will be black, white, or some form of gray. Other combinations will form different colors. A few examples are given below:

Level of Red	Level of Green	Level of Blue
0	0	0
30	15	70
100	150	200
100	250	130
0	0	255
255	255	0

A venn diagram which overlaps red, green, and blue to form new colors.

A common way of representing an RGB color as a single string is to use the notation: rgb(levelR, levelG, levelB). This provides a way of denoting a full RGB color in a single, concise unit. In the last example above, we can denote that RGB color as rgb(255, 255, 0). This is the format which web developers use when specifying RGB colors in their style declarations.

Hex Color Model

A hex triplet is a 6 digit hexadecimal number with a # prefix which is used to represent a color. A hexadecimal number is a number which uses digits 0-9 and A-F, where a hexadecimal A equals a decimal 10 If that concept seems a bit tricky or is hard to understand, you can think of it instead as a series of 6 characters, each of which can be 0-9 or A-F. If you'd like to learn more about hexadecimal numbers before proceeding, please visit our brief introduction to hexadecimal numbers. The two leftmost digits represent the level of red in the color, the two middle digits represent the level of green, and the two to the right represent the level of blue. For example, the hex code for an rgb color with red=9, green=100, and blue=55 will be #096437. This is very similar to the RGB model; here we are encoding the entire color with one single digit / 6 sequence string instead of a group of 3 seperate values. In some cases, a 3 digit shorthand can be used to represent a full hex triplet, such as #0F8 which expands to #00FF88 by expanding each digit into two. Other than mentioning its existence, further discussion of this shorthand is out of scope for this article. In the table below, we'll give some examples of hex codes, how they translate into red, green, and blue, and their output colors. Each color level will include the hexademical value and how it translates to decimal values in the range 0 - 255.

Hex Code	Level of Red	Level of Green	Level of Blue
#000000	00₁₆ = 00₁₀	00₁₆ = 00₁₀	00₁₆ = 00₁₀
#B8B9FF	B8₁₆ = 184₁₀	B9₁₆ = 185₁₀	FF₁₆ = 255₁₀
#30D54C	30₁₆ = 48₁₀	D5₁₆ = 213₁₀	4C₁₆ = 76₁₀
#F0530F	F0₁₆ = 240₁₀	53₁₆ = 83₁₀	0F₁₆ = 15₁₀
#00FF00	00₁₆ = 00₁₀	FF₁₆ = 255₁₀	00₁₆ = 00₁₀

Where is Yellow?

If you're familiar with the primary colors, you may be wondering how tvs and computer screens can display the color yellow without any yellow bulbs. Yellow is a primary color, and primary colors cannot be formed by mixing other colors, so it may seem that screens would not be able to produce the color yellow by mixing combinations of red, green, and blue. Technically speaking, this is true: TVs and computer screens do not emit a true yellow light. However, when a pixel emits a certain combination of green and red intensities, the human eye percieves the combination of these as if it were a yellow light, as if the pixel were "tricking" the eye into perceiving it as yellow when it is actually not.

Color Playground

You can use the controls below to experiment with creating colors using different intensities of red, green, and blue. The pixel column approximates what the actual pixel might look like close up, where darker colors indicate lower intensity and brigher colors indicate higher intensity. The color column represents what the color actually looks like.

The color currently being displayed is: rgb(75, 130, 50) with a hex value of #4b8232.
To learn more about this color and how it relates to other colors, feel free to visit our Color Visualizer.

Input	Pixel	Color
Red Green Blue

Congrats, you made it to the end of the article! We think one of these articles below might be a good next step along your journey:

Thanks for reading! This page was last updated on 1/22/2022
Follow us on social media for updates and new dev pages and to help support our brand!