Interactive Colour Demos

 

The following demos have been written in html, javascript and css. They allow you to explore concepts such as hue, chroma and value (lightness), along with some related concepts such as colour difference, by moving some colour chips around on the screen. The demos were written in 2018 by Stephen Westland and Marjan Vazirian. For any comments or questions please contact us by email e: s.westland@leeds.ac.uk

 

Exploring Hue Relationships: Click on each of the following icons to explore hue relationships. A number of different hue wheels exist and the positions of pure red, green, blue and yellow occur in different places in the different wheels.

 

Exploring Value Relationships: Click on the following icon in order to explore lightness (or value).

 

Exploring Chroma Relationships: Click on the following icons in order to sort different coloured chips by chroma (with chroma increasing from left to right).

 

Exploring the difference between Chroma and Value: Click on the following icons in order to learn about value and chroma. In these demos you will sort chips of approximately equal hue into value and chroma order. Value increases from bottom to top and chroma increases from left to right.