Digital Pictures

Have you ever wondered how computers can understand and display color? Digital pictures are made up of very small pixels that can each have different color codes. Colors can either be denoted with a name like red or cyan, an RGB (red, green, blue) value, or a hexadecimal value.

Source: https://commons.wikimedia.org/wiki/User:Ed_g2s

Color Codes

These same color codes are used in HTML styling. They can be used to style the background of a section or the font.

Any color can be created by combining red, green, and blue light at varying intensities. The RGB Color Encoding system allows us to create colors by specifying the amount of red, green, and blue in the color! Each color has its own channel and each channel gets a value in the range 0 - 255.

If we consider the different possible colors that can be created using all three channels, we get 256³ = 16,777,216 possible colors!

Because there are so many possible color combinations, hexadecimal values can be used instead of using the RGB code.

Our primary number system is the decimal numbering system which has 10 digits.

0 1 2 3 4 5 6 7 8 9

The hexadecimal numbering system has 16 digits!

0 1 2 3 4 5 6 7 8 9 A B C D E F

The RGB values can be converted to hexadecimal values. The first two values represent the red channel, the second two values represent the green channel and the last two values represent the blue channel.

Explore

Click on the RUN button and play around with the numbers in the RGB encoding system to see the resulting color. The corresponding hexadecimal code can be found underneath the paint bucket. Try to find the following colors:

1. Black
2. White
3. Red
4. Green
5. Blue
6. Purple

HTML Color Names

There are also 140 colors that have names in HTML. This way you don’t have to remember the RGB or hexadecimal code.

The full list of colors is available at http://www.w3schools.com/colors/colors_names.asp

Colors in HTML can either be:

• A valid color name like red, green or cyan
• An RGB value like rgb(0, 255, 0)
• A hexadecimal color code like #FF00FF

You Try

Replace the color with a color of your own choosing. Try to use at least one color name, one RGB code, and one hex code.