05.08.2020
Print & web, a colorized guide
Posted by
We have to admit it, when we think about big brands such as McDonald’s, Coca Cola or Telekom, their colors instantly pop into our minds: yellow, red and magenta. This is the reason they invested so much effort into their distinguishable signature, so that everyone will wrap their mind around those colors.
The colours play a big role in the image of the brand by adding a subliminal value into our consciousness, so that we will forever associate that colour with that specific brand. Think about Ferrari’s red, Facebook’s blue, Yahoo!’s purple or Xbox’s green. They all have colour shades that are easy to memorize and visually catchy.
Speaking of shades, let’s dive into a deeper understanding of this aspect.
Print versus web
The main point we have to consider when designing is whether we are designing for web or print. For the printed pages, the colours are subtractive, while for the web ones they’re additive, meaning that the colours are rendering differently.
Designing for a print material? Use PMS or CMYK. Working on a web project? Pick RGB and HEX.
PMS or Pantone® Matching System
Made only for print, Pantone® colours are mostly used in one or two combos, because their prices are fairly higher than what you’d be expecting. They are used for premium brochure or other high-end materials to add a bit more value to the four-colours. There are 2100 solid colours, with their wide-known swatches, giving a lot of freedom to choose what fits best.
Fun fact: Calvin Klein used to keep a Pantone® chip in his kitchen so that his chief will know what is the desired colour for his coffee.
CMYK
Cyan, magenta, yellow and black are the four colours that represent the CMYK method. Also used in print, it is ideal for a full-colour brochure, paper or postcard. Unlike PMS, which is a solid colour, the CMYK is formed by adding transparent dots until it makes a solid colour.
Therefore, if you’d put a magnifying glass over a CMYK print, you’d see the small dotted pattern that formed the final product. The code represents the amount of colour from each shade that was put into the final result in order to achieve a new shade.
Fun fact: The first time CMYK was introduced in the printing process was back in 1906!
RGB
RGB is by far the most wide-known method for web/onscreen colours. From TV screens to monitors, tablets and smartphones, RGB is the reason you see the colour that you’re seeing. Formed with red, green and blue, RGB is an additive process, which means that if you mix all of the three colours you will get white and if you subtract everything, it will remain black.
The values oscillate between (0) and (255); for example, (0, 0, 0) will be black, while (255, 255, 255) will be white.
Fun fact: The RGB is based on Young-Helmholtz’s theory of trichromatic colour vision and on James Clerk Maxwell’s colour triangle elaborated in circa 1860.
HEX
The hexadecimal colour method is mostly used onscreen in web design. It is represented by a six-digit code formed by numbers and letters that express its mix of red, green and blue. It has a range from (00) to (FF) in the hexadecimal expression and every byte represents one of the three RGB colours.
Fun fact: Since the code only has three bytes, if you want a shade of grey you just repeat the sequence three times - #282828 or #808080, anything will work!
