Color modes

Terms like RGB, CMYK, 8 bits, 16 bits, 24 bits, indexed color, grayscale, HEX, and others are very common in the web and graphic design world. So I guess it is time for you to learn what they all mean and the way you can apply them to your work.

24-bit RGB

RGB stands for Red-Green-Blue, the three primary colors produced inside each pixel of your monitor. The combination of these three colors produce all the colors and tones you can see on the screen of your computer.



As you may already know, computers internal processes are handled by combinations of ones and zeros—the Binary Code. These ones and zeros are called bits. A group of eight consecutive bits is called a Byte. Each Byte represents a decimal number from 0 to 255. See the example below:

   00000000 = 0
   00000001 = 1
   00000010 = 2
   00000011 = 3
   00000100 = 4
   00000101 = 5
   ···
   11111111 = 255

So, with a 8-bit string we can make up to 256 combinations. Got a general picture?

Now, lets go back to our subject at hand. If we assign 1 Byte (8 bits) to each one of our primary RGB colors, we will be able to represent 256 different shades of each color.

   3 colors = 3 Bytes = 24 bits!    That is why it is called the 24-bit RGB mode.

Well, let's do the math. If we combine our 3 RGB colors, with 256 shades each (256 x 256 x 256), we can produce a grand total of 16'777,216 colors. Almost 17 million colors!

Note 1: The human eye can only distinguish about 10 million colors.
Note 2: If a color mode can display more than 10 million colors, it is also known as True Color.

Here are a few examples of color combinations using the RGB color mode:

RGB values	Resulting color
RGB(255,0,0)	Bright red
RGB(0,255,0)	Bright green
RGB(0,0,255)	You got it, bright blue!
RGB(255,255,255)	White (remember the rainbow?)
RGB(0,0,0)	No colors? Then it's black!
RGB(200,200,200)	Light gray
RGB(200,175,50)	This one looks like mustard

Summarizing: The 24-bit RGB color mode allows up to 16.8 million colors. Since web pages are displayed on monitors that use the RGB technology, this is the color mode used in web design.

32-bit CMYK

CMYK stands for Cyan-Magenta-Yellow-Black. The theory is about the same as in RGB, the difference relies in that CMYK is intended for printing purposes (using cyan, magenta, yellow, and black ink colors). Since this color mode combines four colors instead of three, it requires one more Byte (eight more bits) per pixel than RGB.

Remember, CMYK is intended for printing purposes, thus we don't use CMYK for web design.

More pages of this tutorial → Color modes  1234>

Comments & Questions