OUGD504 - Design for Screen - Production

Web Colours

In order for the developer to select specific colours to include in coding, other industry standard colour modes and values need to be considered. Simply typing in 'red' doesn't give the designer control of the tone of red, and it will typically be a solid, deep red. I aim to be able to justify specific colours and tones for the typeface and boxes so I can communicate and articulate my desired solution to a developer.

Considering and researching into these processes will prepare my work for industry standards. Similar to print, if the colour mode isn't set up correctly it won't be published accurately. In order to input specific colours desired for screen the user can input numerical values. Unlike print, screen uses RGB colour values instead of CMYK:

RGB

Red

Green

Blue

Different values of red, green and blue alter the colour and tones. 255 is the maximum numerical value for a colour, the colour picker on Adobe allows the user to view the RGB allowances:

Currently, red is 255 which creates a solid tone of red. Altering G and B will ultimately change the colour and tone of the colour. This allows for accurate selections and consistent colour palettes.

Choosing a green allows me to see how the RGB values can effect the colour:

R: 47
G: 218
B: 155

Referring to swatches can allow me to type in the numerical values of R, G and B and the colour will be automatically presented.

Hexadecimal

RGB has its limitations and can be problematic when publishing work online which is why Hex codes are often preferred. They are the most common colour format and are another way to represent RGB colors. Hex codes provide a range of hues and tones that the developer can add to the code in order to create a specific finish.
The example above shows #2FDA9B which effects the hue and saturation of the colour. Hex codes can alter the darkness/lightness of the colour and also the hue and saturation. Professionals prefer to use this method when finalising colour palettes and finishes.

RGBA 

An extension of RGB colour values however with an alpha channel. This specifies the opacity for a colour. An RGBA colour value is specified with: rgba (red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). RGBA documents are much smaller in size which can help to produce a quick loading screen.

I wasn't aware that other colour modes and values had to be changed depending on unique finishes, however this research has introduced me to industry standards which I aim to keep consistent throughout the project. 

Paul Hebert Design

http://paulhebertdesigns.com/web_colors/

Paul Hebert set out on a project to gather information about what colour schemes popular websites use in order to identify any specific trends. Currently the website was last updated 18th September 2016 - Accurate data. Based on this research I can identify what is most appropriate for People of Print in order to follow trends or avoid trends and stand out. 

10 most popular sites and the colours they use:

Herbet confirms the most popular colour for websites is blue:

Perhaps using a blue colour scheme will make the site feel friendly and familiar. 

Herbert also confirms that the most popular format for colours was hexadecimal:

This evidence proves that my websites colour format should be hexadecimal and if I take on a web based project again I will consider the flexibility and consistency of hexadecimal colours. 

People of Print

As my solution is predominantly image lead, the colour mode is important in order for the colours to be accurate. A hexadecimal colour mode would be appropriate for the website because it is the most flexible solution and is supported by Herbet's study.

My colour scheme will be easily developed because the only colours used are CMYK, these values can be converted into RGB values:

Cyan -

R: 30
G: 174
B: 236

Magenta - 

R: 234
G: 21
B:139

Yellow - 

R: 252
G: 239
B: 53

Black - 

R: 34
G: 31
R: 31

Converting these values into hexadecimal values for the developer to input into the coding:

Cyan:

#1EAEEC

Magenta:

#EA158B

Yellow:

#FCEF35

Black:

#221F1F