Design for web

Chapter 3: Colour

word illustration: colour

colour perception & theory

Colour in design is a vast subject, one that causes much debate and discussion. Before we take a closer look at how to create colour schemes for our designs, let's consider some of the basic conceptions and meanings commonly associated with colours.

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 7MB (optimised) PDF, 40.1MB (original)

referenced sites

  1. An explanation of colour blindness, Jon Hicks
  2. colour bookmarklet - by wearepandr.com/labs/colour_bookmark (offline)
  3. Symbolicons - symbolicons.com
  4. Adaptd - adaptd.com (offline)
  5. Kaleidoscope App - kaleidoscopeapp.com
  6. Gift Rocket - giftrocket.com
  7. You Know Who Design, Sarah Parmenter - youknowwhodesign.com
  8. duoh! - duoh.com
  9. Veerle’s blog - veerle.duoh.com

colour references

  1. check browser support for HSLA on caniuse.com
  2. HSLa Explorer, Chris Coyier

colour spaces

When we open up any graphics app and create a new file, one of the first things confronting us are the colour settings. Which settings apply depends on the output of the design. Making this decision at the very start of our design process will mean less time needs to be spent on recalibrating the final colours. And this is an easy decision ~ for our work as web designers, we will always work in RGB.

web

  • Always work in RGB!
  • all monitors use RGB with varying profiles
illustration of rgb colour mode

RGB (Red, Green, Blue) is an additive colour model. Colours are created by combining varying intensities of red, green, and blue light. Each colour channel has a value ranging from 0 to 255, where 0 represents no intensity, and 255 represents maximum intensity.

print

  • Typical requirement: CMYK
  • talk to the printer to confirm colour specs
illustration of cmyk colour mode

CMYK (Cyan, Magenta, Yellow, Black) is a subtractive colour model, based on the absorption of light. Colours are formed by combining varying percentages of the inks ~ at high intensity, resulting in black.

The 2 colour modes vary in how a design’s colour will look in the final output. If we forget this setting and work in CMYK, the final result of the graphic will likely look more dull and less vibrant on screen. We can, of course, change the colour mode after starting the work but this will also change our colour’s tones and shades. We will then have to spend time on changing all colours to recalibrate the colours for the appearance we planned for.

color game screenshot

Color: Practice color harmonies.

hex game screenshot

What the HEX: guess the colour.

where to start...?

Creating a new colour scheme for any design can be quite a challenge. It often means staring at the blank canvas and not even knowing where to start. However, colour is one of the most powerful aspects of design ~ one that can be used for emphasis and have great impact. It can be so much fun ツ

The following slides introduce three methods of how we could approach the colour scheme for a given client project. Using a tea room as fictional client, we can use the logo as well as context to create very different approaches to colour, followed by some video tutorials to demo the mentioned methods.

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 2.2MB (optimised) PDF, 14.7MB (original)

A bit of advice

As you explore the world of colour it is easy to get stuck or distracted due to the endlessness of possibilities when it comes to colour schemes. There is a seemingly infinite number of tools and examples online which you should explore by all means. My advice would merely be not to get too hung up on tools but to work towards creating your own unique colour schemes to fit your project's purpose and mission.

colour scheme design with blend tool

summary

  1. use any SVG to design your colour scheme
  2. keep naming all layers and artboards as you work
  3. use the artboard tool to make copies
  4. extract colours with the eyedropper tool
  5. use the colour swatches to create a blend of the colours
  6. change blend options to smooth or steps
  7. expand the blend for further edits
  8. ungroup for easy selection

tips

  • pay attention to your settings - for this method, use only fill (no stroke)
  • work with the right selection tool
  • remember that the blend tool requires 2 clicks — your shapes can be selected or not, but both need to be clicked on with the blend tool
  • to apply colour, select the object and then use the eyedropper tool
  • work with layers to keep graphics in meaningful groups, easy for editing
  • make note of your colour codes as text, consider adding those inside a comment to your CSS

colour scheme design via image pixelation

Affinity Photo

  1. open image file + rename layer
  2. duplicate layer for edits
  3. select new layer & apply filter
  4. top menu: Filters > Distort > Pixelate
  5. adjust quantisation for less/more colours
  6. create 6 square shapes for final colour pick
  7. pick colours, apply to squares
  8. make note of HEX code via colour chooser

Adobe Photoshop

  1. open image file + rename layer
  2. duplicate layer for edits
  3. select new layer & apply filter
  4. top menu: Filter > Pixelate > Mosaic
  5. adjust cell size for less/more colours
  6. create 6 square shapes for final colour pick
  7. pick colours, apply to squares
  8. make note of HEX code via colour picker

the importance of colour contrast

One of the most important aspects of colour use in design is the contrast ~ mainly the contrast between fore- and background, between text and the background colour. While a soft and subtle colour combination can be very effective aesthetically, it could also result in text that becomes difficult to read, or even illegible. This is when the visual appearance or preference has to come second to the usability of our colour scheme design.

Colour use therefore needs to provide sufficient contrast to ensure legibility. This get further complicated through monitor/screen settings as well as colour blindness. We have to make ourselves aware that what we see on our screens might not be what others might see. Testing is therefore vital and understanding how we can best compensate for some of these factors will be important.

colour blindness

Colour blindness is essentially a colour vision deficiency. It occurs when someone has difficulty perceiving certain colours or distinguishing between different colours. The prevalence of colour blindness tends to vary depending on the population and geographical location. Generally speaking, it is approximately 8% of males and 0.5% of females globally who are affected.

colour vision: full vision colour vision: deuternatopia vision colour vision: tritanopia vision colour vision: protanopia vision

  1. full vision: seeing all colours
  2. deuternatopia: green-blindness
  3. tritanopia: colour vision deficiency for blue tones
  4. protanopia: red-blindness

To tackle this issue for our colour schemes, we consider the colour contrast carefully. Testing a design in purely black and white (as would be the case for complete colour blindness) will highlight whether the clarity of visuals and text works. This approach is typical for the early stages of design, such as logo and icons design already and can serve us well here too.

Colour accessibility

Geri Coady is an illustrator and author whose work is both beautiful and colourful. She has written about making colour accessible in her book 'Color Accessibility Workflows', published by A Book Apart. Her work is wonderful and the following are screenshots of her website's 'about' page from 2013. They are perfect examples how effective colour contrast is to ensure that a design's details are not lost.

screenshot:  full colour vision screenshot: protanopia vision screenshot: tritanopia vision screenshot: protanopia vision

checking colour contrast

In addition to visual checks which might be subjective, we need to make sure that our colours meet accessibility guidelines. Luckily, we can use digital tools to measure the colour values against the specifications.

useful tools

veerle.duoh.com

Veerle is a graphic and web designer, she is well known for many of her projects, such as the branding of the Adobe Creative Suite on its first launch. Her personal blog has been an inspiration to many for many many years. She is one of my favourite web people ツ Her site features articles and tutorials (especially for vector graphics) and the inspiration section is updated frequently and always offers something fresh ~ have a look at the inspiration section.

stuck? need inspiration, from Veerle's blog

The experimental phase is most important and the heart of the creative process—often leading to unexpected results.

In this article Veerle tells the story of the redesign of her blog and her “... Design Process and the Struggles Along the Way”. The quality of her designs is undisputed and we always learn so much when someone so openly shares their work process. A worthy read, highly recommended.

Colour scheme design

tearoom logo

‘Hattie's Team Room’ is looking for a refresh of their brand. They are keen to keep the visual, typeface and logo design itself but are looking to update the feel of their visual identity. You brief is to give their logo a face list by refreshing the colour palette, using different colours entirely and to create a colour scheme that can extend beyond the logo itself.

Objectives

Produce two colour scheme proposals with an expanded palette to be used across all media outputs. Consider the logo itself, as well as promotional materials such as business cards, menus as well as the website and online profiles.
Requirements for each of the 2 proposals are as follows:

  1. logo design to be kept as given
    (full graphic including teapot icon, steam and ornamental lines as well as text and typeface/typesetting)
  2. logo colours: limited to 2 colours only
    (following given logo's colour approach, the colour limit is to be maintained)
  3. new brand colour scheme: expand the number of colours to a total of 6
    (i.e. addition of 4 colours to the 2 logo colours)

Source files:

download source file vector of logo as SVG and .ai file

Note on file format:
The SVG is the universal vector format and you will be able to open and edit this in any vector app you prefer. The .ai file is the format for Adobe Illustrator specifically; Affinity Designer can also open this file.

CSS colours

Colours in CSS can be applied in an increasing number of ways, such as using the standard HEX[1] code (which is always fully opaque), or the more nuanced RGBA[2] and HSLA[3] codes which include settings for opacity. Note that the CSS for colour in CSS is spelled as in American English, without the 'u': color.

illustration of CSS colour values, © MDN

To learn more about implementing the colours in your design, check out the 'Applying color to HTML elements using CSS' section which will outline elements which can have colour and how to target them in your CSS. read: Applying color to HTML elements using CSS

footnotes

  1. hexadecimal code: a six-digit alphanumeric representation of colours in web design and development
  2. RGBA stands for Red, Green, Blue, and Alpha, a colour model based on the RGB model with an additional alpha channel that represents the level of transparency or opacity of a colour
  3. HSLA stands for Hue, Saturation, Lightness, and Alpha, a color model based on the HSL with an additional alpha channel that represents the level of transparency or opacity of a colour