Color Depth

Share

What is the "Color Depth" of an Image or Screen?

The color depth of an image is how many bits are used to store the color information of the pixels of the image. The same concept applies to screens.

Images on the web typically have a color depth of 24 bits per pixel (or 24bpp). Since 8 bits is 1 byte, we can also say they have a color depth of 3 bytes per pixel. This is true for images in the RGB format in which each color channel has a precision of 8 bits or 1 byte. In other words, 8 bits per color channel, or 1 byte per color channel, means 24 bits per pixel. In images with transparency (alpha), e.g. PNG, the format is RGBA, meaning we have 4 color channels, so the color depth is said to be 32 bits per pixel.

While editing images and video, it's recommended to work on a higher color depth for better quality, as performing multiple operations on a color, such as applying multiple filters, will start introducing rounding errors that become banding artifacts. Typically, working with 16 bits per channel is enough to get rid of the issues caused by the low precision of 8 bits per channel.

With 8 bits per channel, the value of red, green, and blue go from 0 to 255, but with 16 bits it goes from 0 to 65535, which is a lot more.

It's worth noting that if your screen is 8 bits you should see no difference when switching between color depths in an image. That's because the 16 bit color depth will need to be converted by a program to 8 bit color depth in order to be displayed on the low fidelity screen. However, operations on the data done while editing in an image editor or video editor will still be performed in high color depth, so while you can't see the extra bits, they are still used whenever the program makes modifications to pixel colors.

Using a greater color depth is practically a requirement in order to work with linear color profiles. To display an image on the screen, the data of the image needs to be converted to the monitor's color profile, which means we will be multiplying numbers by some amount. Since the numbers in 8 bit are integers from 0 to 255, any multiplication we do will end up "skipping" some numbers, losing the data. With 16 bits, we start with a much more precise range, so even if we lose some precision we'll still have enough precision to avoid losing substantial amounts of data when converting the color data for the monitor's color profile.

An infograph comparing gamma-corrected sRGB, linear sRGB, and wide gamut (rec. 2020) color profiles in 8 bits pers channel and 16 bits per channel. The effect was made by using a copy with gaussian blur in Addition blend mode. Compared to gamma-corrected sRGB, linear sRGB results in brighter colors, and wide gamut has even brighter colors including changing the hue of green to yellow. 8 bit displays banding artifacts at the edges of the Gaussian blur that become more clear in wide gamut.
A comparison of 8-bit and 16-bit color depths and gamma-correct sRGB (perceptual sRGB), linear sRGB, and a wide gamut color space known as Rec. 2020 using a glow effect created in Krita.
Written by Noel Santos.

About the Author

I'm a self-taught Brazilian programmer graduated in IT from a FATEC. In a world of increasingly complex and essential computers, I decided to use my technical expertise in hardware, desktop applications, and web technologies to create an informative resource to make PC's easier to understand.

View Comments