A Primer to Colors in Digital Design – uxdesign.cc

Source: Pixabay

As a beginner in the world of design, I often struggled with picking the right colors to provide visual depth to my artworks. Consequently, my initial works seemed out of balance as the colors lacked contrast and harmony, robbing my illustrations of the much needed visual acuity. Since painting wasn’t my forte, I hadn’t experimented enough with mixing physical colors using brushes in the past and felt overwhelmed just by looking at the color picker in tools such as Illustrator and Photoshop. Although it took time to educate myself on color theory and principles of harmony in design, the lessons I imbibed along the way certainly helped boost my confidence in picking colors.


Our brain helps us perceive colors when light reflected off an object is received by the eyes. Objects do not inherently bear color, albeit it is the interplay of absorption and reflection of a choice of continually distributed wavelengths from the visible spectrum by the object that determines its appearance. Therefore, two of the most basic colors, ‘Black’ and ‘White’ respectively denote absence and presence of light and aren’t actually colors. Sunlight, considered as the natural source of light is characteristically ‘White’ but with a pinch of salt. Each white light source has a degree of ‘warmth’ attached to it which is determined by a property called ‘Color Temperature’. This property varies for different light sources as we find the warmth of a halogen bulb, an artificial source of light, inclining towards the yellow side of the spectrum, making the spectral distribution different than daylight. In simple words, appearance of an object depends on the properties of incident light(s) and is never really a single color.


Color Models are a popular way to represent a range of colors. The underlying principle for almost all color models is the concept of primary colors. Primary colors represent a small set of colors that can be combined to generate all possible colors in the range. These colors maintain an individual identity of their own and cannot be used to generate each other.

Colors on Screen

Colors on screens and displays are intangible and are generated artificially by combining lights of different colors. They are therefore represented by what is known as ‘Additive Color Models’.

  1. RGB

RGB is an additive color model used to represent colors on scanners and displays. With ‘Red’, ‘Green’ and ‘Blue’ as the primary colors, RGB color model can be used to produce 16 million (16777216 to be precise) colors as each of R,G and B use 8 bits to take a value between 0 to 255 to construct colors in the range. Red, Green and Blue combine to form ‘White’ [R:255, G:255, B:255], while the absence of all of them produces Black [R:0, G:0, B:0]. On LED screens, each pixel fundamentally comprises a subpixel grid of Red, Green and Blue LEDs which light up at a given intensity to produce the required color in that space on the screen. Additive models are device dependent as the rendering of color varies for monitors. Therefore, a color in RGB space, say [R:32, G:64, B:128], may appear different on different screens. RGB spaces can be customized by using new primaries for Red, Green and Blue and selecting a gamma value. Therefore, other open-ended RGB spaces exist such as the Photo RGB, DCI-P3Pro, Rec 209. Rec 2020, scRGB and ACES(Academy Color Encoding System) some of which are used and were developed primarily for motion pictures by film academies. sRGB(developed by HP and Microsoft together) and Adobe RGB are the two defaults on computers and the internet.

2. HSV and HSL

RGB, although very helpful in making computers understand color doesn’t agree much with human perception of colors. It makes more sense to think in terms of ‘lightness’, ‘darkness’ and ‘intensity’ of the color rather than contemplating numeric values of R,G and B to get to the right color. Therefore, HSL (Hue, Saturation, Lightness) and HSV(Hue, Saturation, Value) exist as transformations of RGB model to make a designer’s life easier.

3. Indexed Color
This system, simply put, assigns a number or ‘index’ to each color in the palette. Images with limited colors in the range save memory and can be refreshed quickly on displays. thereby consuming less power. An index system helps the cause by only requiring the computer to store the indexed number instead of the entire color table.

4. Bitmap
Another memory friendly image representation system that uses 1 bit per pixel. Images are stored as a 2-dimensional grid (map) of pixels.

5. Grayscale
Commonly referred to as ‘Black and White’, this image system has no color and just stores the value of intensity of light (White: High Intensity, Black: Low Intensity)

6. YUV

Bandwidth comes at a premium and back in the days of Black and White televisions, the analog age, signal transmission capabilities were limited and the system required a way to compress data to be transmitted. Human visual system(HVS) is more sensitive to intensity of light than colors and it receives low frequencies(in Visible EM spectrum) better over the high frequencies. Tapping into workings of human visual system allowed the engineers to create the YUV color space that worked as a color encoding system for broadcasting purposes. While Y captured luma (or luminance i.e perceptive brightness), U and V are chromacities that captured color as factor of difference from Y component. Unlike RGB, where all three values use 8 bits, YUV space allots more space to Y, which stores intensity information, than U and V as HVS is more sensitive to intensity over color, thereby compressing the overall data stream. Among analog television systems PAL(Europe except France and Southeast Asia) used YUV, NTSC(Americas, Japan, South Korea and Suriname) adopted YIQ, a variation of YUV and SECAM utilized YDbDr. In the YUV family of spaces, YCbCr is another variation popular for digital image compression and forms the basis of the JPEG and MPEG algorithms. All three color spaces are fundamentally similar and work as storage and transmission channel intermediates that cannot be rendered directly on screen.

Colors in Print

Colors you can touch are ‘tangible’ and exist due to natural(or natural + artificial) lighting in the environment. Since these are a result of light reflected off of an object, they are represented by what are called ‘Subtractive Color Models’. A plain paper is perceived as ‘white’ as it reflects all the cored wavelengths of light that fall on it. With the help of ink ,the white paper can be made to absorb some of the colored wavelengths such that a color appears on paper. This is how inks fundamentally operate, however there are two mechanisms to achieve this:

I Spot Colors based Print
When each color in the print job is achieved with a separate ink, the print is Spot colored based since spots from individual colored inks or pigments are used to obtain the final print. Spot colored prints produce the best output as the colors are exact but prove expensive with increasing number of colors in the final job. Some standard proprietary spot color systems are ANPA, Colour Index International, DIC, FOCOLTONE, HKS, Munsell, NCS, Pantone, RAL, TOYO and Truematch.

  1. Pantone Matching System(PMS)

PMS is a proprietary color space owned by Pantone Inc.(now under X-Rite) and is the leading standard for spot colors in the printing industry. Each of the 1,114 spot colors in the PMS system could be identified by it’s unique PMS number. PMS is preferred across the industry to maintain consistent branding across the globe. Only a small subset PMS colors can be reproduced using the CMYK model which is used for process printing.

II Process Colors based Print
Process printing works on the concept of primary colors where a handful of spot colors are used to create new colors. Reprographic techniques such as ‘Halftone’ in process color printing create an optical illusion of a new color by strategically spacing differently sized dots of spot colors in a way that they appear as a new color or a smooth transition between colors. Although, not as vivid as spot color print, process printing saves costs.

  1. CMYK

(C)Cyan, (M)Magenta, (Y)Yellow and (K)Key-Black is a subtractive color model that can be used to achieve a range of colors. Combining C,M,Y and K at 100% each produces pure black while absence of all is white which is opposite to the RGB model as CMYK is implemented using inks and pigments rather than light. When inks combine in full concentration they absorb all the light, producing black. Reproduction of image using CMYK bases process printing produces different results as this model is also device dependent.

Optical Illusion when using Process Colors

Device Independent Color

Device dependent color management system often have suppressed gamuts(range of colors). Age, make, subpixel arrangement, display panel type (OLED, LCD, Plasma) affect the rendering of color in monitors. Similarly among printers, paper type, nozzle make and dye account for variations in color reproduction. International Consortium on Illumination (CIE) began work on color spaces that would provide a nexus between physical wavelengths in visible spectrum and human perception of colors as early as 1931. This was before the age of transistors and the system developed was device independent. It started with CIE XYZ and subsequently CIE LUV and CIE LAB were derived.

  1. LAB

Derived from the CIE XYZ color space, CIE LAB is the mathematical representation of all perceivable colors in a 3-dimensional space. While ‘L’ defines lightness on one axis, ‘A’ and ‘B’ are color channels. The LAB space creates a much wider gamut than RGB and encompasses 50% more colors. In fact, a lot of values on LAB space are not even colors since they fall outside the spectrum of perceivable colors by the human visual system. The displays aren’t capable of rendering all the values in LAB either and therefore it finds it’s rare but very important use in medical imaging and computer vision applications where pushing RGB spaces just produces white instead of a possible color value.

You can’t depend on your eyes when your imagination is out of focus.
-Mark Twain

Author: Archit Jha

Collect by: uxfree.com