HSL Complement
HSL

Roughly speaking, in the Hue, Saturation, Lightness (HSL) model. Hue is color as an angle: 0° is red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta; saturation is purity of hue from 0% (grey) to 100% (full color); and lightness (or brightness) is mix of black or white from 0% (black) to 100% (white).

Hue to compare ripeness of bananas, saturation for chocolate milk and brightness for bread and toast (Tech Museum).

In painters terminology: mix white for a tint, mix gray for a tone and mix black for a shade ...

Color gradient

The following text is written to an HTML5 canvas using a linear color gradient.

Javascript used to set linear gradient and draw the text:

	    
	      let gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
 	      gradient.addColorStop("0"," green");
	      gradient.addColorStop("0.5", "blue");
	      gradient.addColorStop("1.0", "red");
	      ctx.fillStyle = gradient;
	      ctx.fillText("...", xx, yy);
	      ctx.stroke