Colour Gradient Explorer #2
An interactive demo that allows users to select a base colour and then generates a series of gradient colours by incrementally adjusting the RGB values. Each gradient colour is displayed in a column with labels showing its Hex, RGB, and HSL values. Users can interact with the gradient by:
- Clicking on a colour column to set it as the new base colour and regenerate the gradient.
- Clicking on any colour label to copy that colour value to the clipboard.
This interactive tool helps users explore colour variations and easily obtain colour codes in different formats for design and development purposes.
The demo is identical to the first colour gradient explorer, but uses a HTML canvas image for selecting the base colour. The canvas spectrum image is generated when the pages loads and the base colour value is captured during a click event using the getImageData()
method (MDN docs).
Comments