цвет фона в зависимости от положения курсора, определенных цветовых спектров

Question

Я использую JS позиции курсора X/Y, чтобы создать изменения цвета фона в спектре RGB:

$(document).mousemove(function(e){ 
var $width = ($(document).width())/255; 
var $height = ($(document).height())/255; 
var $pageX = parseInt(e.pageX/$width,10); 
var $pageY = parseInt(e.pageY/$height,10); 
$("body").css("background-color", "rgb("+$pageX+","+$pageY+","+$pageX+")"); 
}); 

Это работает как шарм (спасибо Stack Overflow!) Но мне интересно, можно ли использовать конкретный цветовой спектр, а не полный спектр RGB? т. е. только красные от темно-красного до бледно-красного? Я думаю, что это, вероятно, будет довольно сложным, и мое понимание JS ограничено в лучшем случае. Итак, до того, как я начинаю озадачиваться, возможен ли этот ограниченный спектр/паллет?

Answer 1

Вы можете использовать либо RGB для конкретного цвета:

$("body").css("background-color", "rgb("+($pageX + $pageY)/2+",0,0)"); 

или использовать значения HSL:

$("body").css("background-color", "hsl(0, "+($pageX/$width)+"%, "+($pageY/$height)+"%)"); 

T он первый номер - это цвет от красного (0) до синего (255)

В принципе, вы можете получить любую цветовую палитру, которую хотите, вам просто нужно найти правильное уравнение для расчета ваших цветовых значений. Так что это скорее вопрос теории математической/цветовой комнаты

Answer 2

Оставьте свои красные на максимальном значении RGB (255). Это создаст оттенки от бледного до темно-красного.

$("body").css("background-color", "rgb(255,"+$pageY+","+$pageY+")"); 

Херес JsFiddle:

http://jsfiddle.net/n47wr7et/1/