The hue variable and the percentages in the hsl style controls the color.
To start with the RGB color 150, 150, 200, set the hue to 240, the saturation (the second parameter in hsl) to 25% and the brightness (the third parameter) to 78%.
To end at the RGB color 190, 160, 200, you need to loop until the hue value reaches 285. You also need a variable for the saturation value, as that should end at 20%.
HSL colors
Alternatively, use RGB colors instead of HSL colors...
Edit:
If you want to stop the interval, you need to store it's handle in a variable:
var interval = window.setInterval(blank, 50);
Then you can use it to stop the interval:
window.clearInterval(interval);
I don't know exactly why you would want to use a random value to change the color. For simplicity I just replaced it with a fixed value in this example:
var hue = 240;
var sat = 25;
function blank() {
context.fillStyle = 'hsl(' + hue + ', ' + sat + '%, 80%)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
hue += 0.9;
sat -= 0.1;
if (hue > 285) window.clearInterval(interval);
}
var interval = window.setInterval(blank, 50);
Edit:
If you want to repeatedly fade in and out instead of ending at a specific color, create a variable for the direction, and change it when you reach each ending color:
var hue = 240;
var sat = 25;
var dir = 1;
function blank() {
context.fillStyle = 'hsl(' + hue + ', ' + sat + '%, 80%)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
hue += 0.9 * dir;
sat -= 0.1 * dir;
if (hue <= 240 || hue >= 285) dir = -dir;
}
window.setInterval(blank, 50);