Lea Verou: The Chroma Zone: Engineering Color on the Web

Lea Verou (@LeaVerou) was speaking at Smashing Conference about colour on the web, these are my notes from her talk.

A pixel is three components - red, green and blue sub pixels as horizontal bars.  Your eyes blend the colours to white when the sub pixels are small enough.  If we want to change the colour we change the brightness of each sub pixel - this is RGB additive colour.  The geometry of the sub pixels is different on different types of screen.

The hex numbers for colours are because each sub pixel has 8bits of data for brightness = 24 bits per pixel.

Anti-aliasing

Not all edges of a shape will fall exactly on the border of a pixel.  If an edge falls across a pixel then only part of the pixel is lit in the case of subpixel anti-aliasing.  This can lead to coloured edges of fonts rendered on screen.

Colour and code

RGB codes encode for a 3D space so colour pickers tend to fix one plane and allow 2D exploration of the other planes.  In HTML 3.2 there were two ways to define colour:  the hexadecimal representation of RGB which we are familiar and the useless colour names which come from the 16 colour Windows VGA palette.

CSS 1 gave us other colour formats including rgb(xx, xx, xx) where xx can be decimals or percentages and the three digit hex codes.  Also added orange as a named colour.

CSS colour level 3 added HSL colours which are closer to how we describe colours.   The hue angle is the only thing we need to remember.  50% lightness is the brightest colour between black and white.  HSL is a double cone rather than the cube of RGB - the points are white and black.  With HSL we can add CSS fiters to modify the colours in a more intuitive fasion to colourise an image.

There are problems with HSL - lightness is not correlated to perceived lightness.  RGB does not have perceptual uniformity and neither is HSL as it's just another representation of RGB.    Lightness != luminance.  Luminance weights the lightness of each colour channel for human perception - this is what's used for colour contrast for accessibility. 

With a semi transparent background it becomes more complicated: http://leaverou.github.io/contrast-ratio  Pixels are fully opaque so how does transparency work?  Colours have to composited into a colour via alpha blending.  This is similar to colour interpolation - such as linear gradients.  transparent is/was a short cut to transparent black which can lead to problems but this is being changed with a different blending algroythm.

The CSS keyword currentColor is the first CSS variable - sets to the current value of the text colour.

CSS colour level 4

Gray will be made into a function: gray(50%, .2) value and alpha.  Four digit hex colors - the last digit is the alpha, similarly eight digit hex colours.  The colour function will allow manipulation such as tint, shade and blend.  contrast is an interesting one to look at.  HWB colour space will be added.  Named hues and angles. hsl and rgb will accept alpha without having to use the a suffix.

CMYK is a subtractive colour space but has a limited colour gamut.  Need ICC colour profiles to convert between colour spaces.  Same goes for RGB, screens differ widely in gamut.