Or in other words – why don’t my page elements match my CSS background colours!
Following on from my recent article exploring the basics of Colour Management, I am going to explain the reasons why getting consistent colour throughout your website design can sometimes seem troublesome. From the previous article, we can see why colour profiles are important. They provide information on how the colours contained within an image file should be rendered – not just on your monitor, but on anyone’s monitor.
Remember the sequence of Target Profile > Conversion > Destination Profile. In terms of the world wide web, this usually means
Target profile – This is usually, but not confined to:
- Un-tagged (un-managed) RGB – the sort of JPEG output you get from Adobe Fireworks. Also, GIF and PNG files are by nature, un-tagged.
- sRGB Images – most often the result of working in a colour managed application, such as Photoshop. sRGB is actually the standard for the web, but we will soon see how this can cause problems in Safari.
- Adobe 1998 RGB – usually confined to situations where photographs have been included which have been tagged with the Adobe 1998 RGB profile.
Conversion – whichever default colour engine is being used by the operating system. The differences between the output from these engines, for the purposes of rendering web content is negligible, so don’t worry too much about which engine is doing the work.
Destination profile – This will be the default monitor profile on the end-user’s machine. Most uncalibrated systems just use a standard monitor profile that ships with the operating system. Often wholly inaccurate, but for the purpose of consistency, this isn’t really important. We are just trying to demonstrate how the colour shifts occur within the end-user’s system. Read More…