When preparing an image for use on a website, it is important to ensure that they are the correct color mode.

What is a Color Mode?

For a detailed description of color modes, take a look at Google.

Basically, the color information for images can be stored in several different formats: CMYK, RGB, and a few others.

CMYK is the standard color mode for the print medium. This is a subtractive colour system in which all colours can be represented using a combination of Cyan, Magenta, Yellow and Key Black.

RGB is used for images that are used on computer screens and other mediums such as websites. It is an additive colour system that uses Red, Green and Blue.

How do I know which color mode my image is using?

Mac OS X

If you are using a Mac, you can right click on an image file and choose “Get Info”. This brings up the properties for the image.

In the screenshot below, we are comparing two images:

Notice the “Color Space” setting?  The image on the left is a CMYK image, and the one on the right is an RGB image.

Windows

On a Windows PC, you need to use an image editing program such as Adobe Photoshop to see which color mode your image is using.

With the image open in Photoshop, click on the Image menu, then the Mode sub menu. The current color mode will be ticked:

In the screenshot above, the image has an RGB color mode.

What if my image isn’t RGB?

If you are going to use an image on the web, it should be in RGB color mode. Otherwise some web browsers will have difficulty displaying it properly. For example, Internet Explorer 8 doesn’t display CMYK images.

How do I convert my image to RGB?

To convert an image, you will need image editing software such as Adobe Photoshop. In Photoshop, click on  the Image menu, then Mode, then click on the RGB Color option.