Create Colour Scales for Charts

Heatmaps use colour gradients to show intensity. A blue→yellow→red scale works well for most data — avoid pure red-green for colour-blind users.

Progress bars with gradient fills feel more modern. Use a linear gradient with a slight angle or the same colour at different lightness values.

Create a data colour scale by using a 3-stop gradient: low-value colour, mid-value, and high-value. Copy the CSS to use as a reference for your chart code.

For accessibility, pair your colour gradient with a shape or size cue — not all users can distinguish colours in gradients accurately.