Requires browser with WebGL support
You can use the buttons to alternate between the RGB cube and HSL cylinder of a series of RGB values.
The sliders can be used to filter saturation and lightness values, this will let you visualise how saturation and lightness relate to RGB values.
When animation is off you can use the W/A/S/D keys to move the camera. You can use Up/Down/Left/Right to rotate the object.
RGB colours are made up of a set of three values between 0 and 255. These can be represented as either rgb(255, 255, 255) or, its hexadecimal equivalent, #ffffff (ff being equal to 255 in base 16).
These values can be mapped neatly in 3D, where each axis represents a different colour value - usually represented as a cube. The coordinate (0, 0, 0) represents the colour black in the bottom corner and the coordinate (255, 255, 255) represent white in the top corner. The other corners are the base colours (where one value is 255 and the other two are 0) pure red, green, and blue and their counterparts cyan, magenta, and yellow (where two values are 255 and the other is 0).
HSL was created as a way to easily compute saturation and lightness from a given hue (or, alternatively, to create a colour of a different hue but the same saturation or lightness). It is also made up of three values: hue - given a value between 0 and 360 - saturation, and lightness - both given a value between 0 and 1 (or often as a % value)
HSL can also be represented as a 3D geometry. However, it is represented as a cylinder instead of a cube. Lightness is represented by the height of cylinder, hue by the angle around the cylinder, and saturation by the distance from the centre of the cylinder along a line of radius.
Created at Small Hadron Collider Labs in Bristol