将1到16777215之间的数字转换为颜色值

Question

我正在尝试将1到16,777,215之间的数字转换为使用Javascript/jQuery在色谱中增量的任何颜色格式(RGB/HSL/HEX).

数字16,777,215是RGB(255,255,255)的总可能组合,其为32位颜色.

我最初认为使用toString(16)将值转换为十六进制值会在频谱中增加,但随着数字增加,它似乎通过不同的亮度值而不是闪烁.这种不受欢迎的行为的一个例子是http://jsfiddle.net/2z82auka/

var colour = 16777215;
window.setInterval(function(){
    colour -= 1000;
    $('body').css({background:'#' + colour.toString(16)});
}, 50);

如何将1到16777215之间的值转换为下面显示的色谱上的颜色？

Answer 1

下面的代码将完全按照您的要求进行操作 - 它将为您提供与下图完全相同的鲜艳色彩,并且为了证明这一点,演示将打印出颜色旁边的整数值.结果将如下所示.请使用代码中的rainbow函数setInterval.

var colours = 16777215;

function rainbow(numOfSteps, step) {
	var r, g, b;
	var h = 1 - (step / numOfSteps);
	var i = ~~(h * 6);
	var f = h * 6 - i;
	var q = 1 - f;
	switch(i % 6){
		case 0: r = 1, g = f, b = 0; break;
		case 1: r = q, g = 1, b = 0; break;
		case 2: r = 0, g = 1, b = f; break;
		case 3: r = 0, g = q, b = 1; break;
		case 4: r = f, g = 0, b = 1; break;
		case 5: r = 1, g = 0, b = q; break;
	}
	var c = "#" + ("00" + (~ ~(r * 235)).toString(16)).slice(-2) + ("00" + (~ ~(g * 235)).toString(16)).slice(-2) + ("00" + (~ ~(b * 235)).toString(16)).slice(-2);
	return (c);
}

function render(i) {
	var item = "<li style='background-color:" + rainbow(colours, i) + "'>" + i + "</li>";
	$("ul").append(item);
}

function repeat(fn, times) {
	for (var i = 0; i < times; i+=10000) fn(i);
}

repeat(render, colours);

li {
  font-size:8px;
  height:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul></ul>

(我不能赞成这个代码,但我可以因为不放弃和解决生涩的颜色变化而受到赞扬.参考:https://gist.github.com/ruiwen/6163115)