Digital Colour for Web Designers

1
Digital Colour for Web Designers

• Hooman Nili

2
Colour What is colour?
3
Simple Colour Models

• A colour model is a system for classifying
  individual colours based on usage.
• For example, CMYK is the colour model used in
  printing. RGB is the colour model used in
  screen-based devices. HSL, HSB, HSV, and LCH are
  colour models are based on the human eye
  perception of colours.

4
CMYKCyan Magenta Yellow Black

• A subtractive colour model based on four process
  colours, producing colour when light is reflected
  off a surface. Its suitable for systems which
  user reflected light to generate colours e.g.
  printers.

5
RGB (Red Green Blue)

• An additive colour model based on three primary
  colours of light, producing colour when a surface
  emits a combination three colours. Its suitable
  for devices that emit colours e.g. monitors, TV,
  etc.

6
HSBHue Saturation Brightness

• Approximates the way our eyes perceive colour.
  Colour is defined by three components hue,
  saturation and brightness. Its useful in
  situations where were interested in how a colour
  looks rather than how it should be produced by a
  device.

7
Lab (some times Lab)

• Based on the way we perceive colour. Contains a
  Luminance (lightness) component, and two
  chromatic (purity) components- the a component
  and the b component.
• Based on the original model by CIE

8
Device Dependency

• QuestionWhich colour models (RGB, CMYK, Lab) are
  device dependent?

9
Additive vs Subtractive

• QuestionWhat are the differences between
  additive and subtractive colour models?

10
Colour Wheel

• Useful to experiment how a change in one colour
  component affects other colours. Its also useful
  to compare CMYK colours to those in RGB. Its
  also useful to illustrate the compositional
  relationships between spectral colours.

11
A few Jargons

• Hue Basically the name of the colour, but
  technically the distinguishing factor based the
  dominant wavelength in the reflected or emitted
  light.
• Saturation In simple terms, saturation tells
  us how pure a colour is. Technically, its the
  amount or grey in a colour at a given brightness
  level. Sometimes called chroma, but...
• Brightness How dark or light. The brighter a
  colour, the closer it is to white.

12
Suggestions for graphics on sites

• Ideally graphics on sites should be to do with
  the substance of the site - rather than to jazz
  up the content (if the content is that dull
  probably no graphics will save it).
• Navigation graphics such as buttons and menus
  should be kept small as they represent
  navigation overhead they are not the content
  the user is presumably seeking.
• Consider making your sites home page a quick
  loading with small graphics and deepening the
  graphics content as the user explores further.

13
Shade, Tone, and Tint

• See this web page

14
More

• Effect of resolution on files size and quality
• Resolution in print and screen

15
Resources
Colour Models and Wheels
Additive Colours Applet
Adobe Photoshop Help Files