Display color Basics -101

Undoubtedly display units are one of the most important pieces of hardware in our life. From TV to computers, from smartphones to kitchen appliances we see it everywhere. That’s why it doesn’t require any formal introduction. There are a handful of properties of ‘color’ that govern the performance of a display unit. Nowadays those properties are well optimized by the software application. But sometimes it becomes necessary to manually set those settings. This article doesn’t tell about any technology rather concentrates on how color in the display is managed, what are the concepts behind that? Lastly, for formality, let’s have a look at the definition of a display, they are an output device that is used to visually represent any information with the help of images and pictures. Please note that videos are nothing but some pictures in motion.

Basics properties used in a color display: 

Let us visit some core aspect of color theory and photography in which a couple of concepts are there which not only are required for display designers, also equally important for photographer, animator, painter, electronics hobbyist, & pretty much every smartphone, computer user. To better control the display color there are some essential concepts which we use pretty much every day but we don’t know what that means?  Let’s check them one by one.  

A) Color mixing: 

Colour mixing the core component of generating different colors (yellow, magenta, cyan) from 3 basic colors, I.e. Red, Green, & Blue. This scheme is called ‘additive color mixing’ which is the basis of the RGB color scheme for the computing devices. In the RGB scheme, when green and blue lights mix, the result is a cyan.  

Additive color scheme, red, green, blue together make white

There exists another color scheme which is called ‘CMYK’ color scheme which is based on ‘subtractive color mixing’. In this scheme, basic colors are Cyan, Magenta, yellow, & Black. In the CYMK scheme, the color green is created by mixing cyan and yellow (i.e., by removing red and blue respectively).

Subtractive color scheme, blue is made by subtracting cyan from magenta

B) Brightness: 

It is a measure of how much amount of light energy is produced by the source (an image here). As the absolute amount of brightness cannot be considered, a relative measurement is chosen for brightness.

C) Contrast: 

It is the difference between the maximum and minimum pixel intensity in an image. For example, if we consider a black rectangular area then the intensity of the color is the same everywhere inside the black area, thus its contrast is 0.

D) Contrast ratio: 

The contrast ratio is a property of a display system, defined as the ratio of the luminance of the brightest color (white) to that of the darkest color (black) that the system is capable of producing. A high contrast ratio is a desired aspect of any display.

F) Gamma: 

A unitless numerical value, or the degree of contrast in a video picture. Picture monitors have a nonlinear relationship between the input voltage and brightness, which often doesn’t match with the picture provided by the camera. That’s why often a gamma correction is needed. There is complex mathematics is involved in calculating gamma, which is out of the scope of this article. It is sufficient to know that gamma larger than 1 make the shadows darker, while gamma smaller than 1 make dark regions lighter.   

G) Hue: 

It represents the pure colours (be basic colours i.e., RGB or derived colours from basic colour). If Every single colour is represented in terms of its wavelength. Hue ranges from 0° to 359° when measured in degrees. Hues can refer to the set of "pure" colors within a color space.

H) Saturation: 

saturation influences the grade of purity or vividness of a colour. It scales from 100% to 0%, where the former represents a colour hue and 0% represents the fullest version of that ‘hue’. It is often represented by the brightness of the hue. In a colour cone, it is represented by a triangle along with a hue, whose base is the hue itself, and the vertex is the black color. 

The color wheel, the center represents the dullest shade of hue

I) Pixel: 

Pixels are the fundamental unit for showing images in any kind of display. Each pixel is consisting of a combination of red, green, & blue (RGB) light sources. In optics, all other colours of lights (yellow, magenta, pink etc.) can be created by mixing RGB with right proportion. In a photograph, a camera, or a display the capture area is two dimensional, i.e., it has a width and length. In that case,

the total number of pixels = no. of pixels along length x no. of pixels along the width

J) Pixel density:

It is the measurement of how better a display is I terms of resolution. It is defined by the number of pixels per square inch. For TVs, cell phone, the computer screen displays a Pixel density of 300 dpi is enough, as to human eyes the pixel density of more than 300 dpi is indistinguishable for a distant vision.

K) Memory consumed by a picture: 

It is entirely depending upon the colour shades available in the scheme. For example, a grayscale image has 256 different colours. Which means, every pixel can choose a number between 0 to 255. Each number is denoting a particular shade of colour. Now, surprisingly 2^8 = 256, which means by a combination of 8-bit number in binary we can represent a shade. That clearly signifies the bits per pixel (bpp) is 8 here. In general, the formula would be 2 bpp = total No. of colours in the scheme. If a display can produce 16.7 million different shades of colours, then its bpp is 24.

Memory calculation of a 1024x720 resolution screen

Let’s consider an image of resolution 1024 x 720 (HD quality), 1024 means no of pixels along width & 720 means no. of pixels along the length. Its total no of pixels would be 1024x720 = 737280 & bits per pixel is 24 so, total no of bits required to accommodate the data of that picture would be 17694720 bits or 2211840 bytes, or 2160 Kilobyte or 2.109375 megabytes (when no compression technology is used). It is fun to calculate the memory requirement. 

Conclusion:

  We have gone through several properties of colors in a display namely, color mixing, brightness, contrast, contrast ratio, hue, saturation, etc. These are essential concepts to come from a fundamental idea of the ‘color wheel’ in color theory. Also, we have seen what is a pixel, pixel density, resolution, etc. Most interestingly, we have seen how to calculate the memory consumed by a picture. By using all these ideas one can very accurately tune any display to its optimum performance.