This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

.NET 1.1+

Converting Between RGB and HSL Colour Models

The RGB colour model is ideal for producing images on display devices but counter-intuitive for people who wish to adjust colours. The HSL model is intuitive but not fully supported by .NET. This article explains how to convert between the two models.

Colour Models

A colour model provides a means by which colours can be represented numerically. Models are usually optimised for a particular type of device or for a purpose. For example, a colour model may be designed for producing images on screens or for printing, or may be more suited to being used by a designer who wishes to group colours according to their colour or shade. In this article I will describe two commonly used colour models and how you can convert single colours between the two systems. The descriptions will be accompanied by C# code examples. The two models are RGB and HSL.

RGB Colour Model

The RGB colour model defines colours according to the amount of red, green and blue light that must be mixed to produce them. The model is used primarily for display devices and televisions, which mix red, green and blue light to generate the individual pixels that make up an image. Computer displays generally assign a single byte to each component of a colour, giving 256 possible values per component. A value of zero for a component indicates that none of that colour will be included and a value of 255 specifies the largest amount of that colour will be added. With one byte for each of the three component colours, 16,777,216 combinations are possible.

Conceptually, the RGB colour model can be mapped to a cube. The x, y and z co-ordinates of any point in the cube can be thought of as the red, green and blue values. In this model, every point within the cube represents a different colour. No two points have the same colour.

To make it easier to understand how colours are mixed, consider the following bars of colour. The first bar below shows a sequence of colours generated by gradually increasing the red element. The left of the bar is black as all three components are zero. The right of the bar shows the maximum red value, still with no green or blue included.

The next bar shows a similar sequence. This time the green component is increased from zero to the maximum possible value, whilst the red and blue elements remain at zero.

The third bar shows a set of colours with an increasing blue component and no red or green added to the colours.

The first three bars are reasonably intuitive, even for people who are unfamiliar with display technology. The fourth bar is less so. In this case the blue element is zero at every stage. The green component's value is unchanging at 50% of the maximum and the red component is increasing in regular steps from zero to 100%. Users who do not understand the RGB model may be surprised that mixing red and green in these proportions produces these results.

The final bar shows the results of using equal values for all three RGB colours. At zero, the resultant colour is black. When all components are at their maximum, the produced colour is white. In between these stages we see shades of grey. Again, some users may be surprised to find that mixing red, green and blue can produce white.

One of the main drawbacks of RGB is that it is difficult for users to identify the colour that they wish to work with. Tasks that should be simple, such as lightening a colour or finding several different colours with similar brightness are made unnecessarily complicated.

HSL Colour Model

The HSL colour model uses three values to define a colour. The three components are hue, saturation and lightness (or luminance). The hue allows selection of the overall colour, such as red, orange, yellow, etc. The saturation determines how much of the colour is present. If set to the maximum value the colour can be vibrant. When set to zero, all colour is removed to leave grey. The lightness value allows the colour to be darkened towards black or lightened towards white.

Unlike the RGB colour model, not all variations of the three variables produce a different colour. For example, if the saturation is zero changing the hue has no effect. If the lightness is zero the colour will be black, regardless of the hue and saturation. If the lightness is 100%, the resultant colour will be white. When representing the HSL model graphically the colours are mapped onto a cylinder instead of a cube. The hue is represented by the angle of the colour's point across the circular end surface of the cylinder, so is usually given a range of zero to three hundred and sixty. The saturation is the distance from the centre of the end face and is in the range of zero to one. The lightness can be thought of as the height of the colour's point if the cylinder were stood on its circular face. The lightness usually ranges from zero to one.

The HSL model is more intuitive for non-technical users. Adjusting the hue independently allows selection of colours with similar intensities. Changing the saturation allows colours to be faded to grey and adjusting the lightness allows fading between black and white. Each of these seems more natural than trying to obtain the desired colour by balancing red, green and blue.

The colour bar below shows a series of colours, each with a saturation of one and a lightness of 0.5. The hue is increased by 45 degrees in each step. Note that the starting and ending colours are the same, due to the cyclic nature of hue.

The next bar shows the effect of increasing the saturation of a colour whilst leaving the hue and lightness unchanged. The grey at the start of the bar has zero saturation. The orange at the right has a saturation value of one.

Finally, the bar below shows a fixed hue and saturation but an increasing lightness. As you may expect, the lightness of zero produces pure black and a lightness of one creates white.

17 November 2010