Javascript充满活力的颜色选择器

Question

我正在寻找一种vanilla Javascript方法来选择十六进制或RGB颜色值来获得块状但连续的颜色。该方法应该能够指定多个分区/块，并以任何方式返回符合以下条件的颜色：

• 充满活力：不要太暗或太亮。我不想在那里有黑色或白色。饱和度时颜色应该非常明亮，但光线明亮。此外，避免灰色会很棒但是可选。
• 连续：每个范围/块的颜色应与过去和将来的颜色大致匹配。颜色应该＆＃34; flow＆＃34;在某种程度上，不要互相冲突。颜色不应重复（它是一个光谱）。
• 可重复：如果给出相同数量的块但在不同时间在不同机器上运行，则所选颜色应相同。如果添加更多的分区，颜色应该只有＃34; shift＆＃34;，使光谱更平滑，并减少连续颜色之间的差异。

此示例的样式为随机大小的HTML div。我甚至没有HTML代码。

任何帮助或指示都会很棒！

Answer 1

这是一个快速而肮脏的解决方案，我相信它符合您指定的要求。具体来说 -

• 充满活力 - 在我看来，旁观者的眼睛，但似乎充满活力。
• 连续 - 通过修改hsla颜色的色调值（根据定义）在色轮周围创建。
• 可重复 - 输出将匹配任何JavaScript引擎。

＆＃13;

＆＃13;

colorSpectrum = function(count) {
    if (count <= 0) { 
        throw new Error('Count must be atleast 1'); 
    }
    
    var h = 0,
        s = '75%', 
        l = '50%',
        a = 1,
        current = 0,
        colors = [],
        tohsla = function(h,s,l,a) {
            return 'hsla(' + h + ',' + s + ',' + l + ',' + a + ')';
        }
    
    while (current < count) {
        colors.push({
            h:h, 
            s:s, 
            l:l, 
            a:a
        });
        h += 360 / count; 
        current++; 
    }
    
    return {
        colors:colors.map(function(el) {
            return tohsla(el.h, el.s, el.l, el.a); 
        })
    }
};

var colors = colorSpectrum(24); 

colors.colors.forEach(function(color) { 
    var span = document.createElement('span'), 
        bodyWidth = parseInt(getComputedStyle(document.body).width, 10); 
    console.log(colors.colors.length);
    span.classList.add('color');
    span.style.backgroundColor = color; 
    span.style.width = bodyWidth / colors.colors.length + 'px'; 
    document.body.appendChild(span); 
}); 

＆＃13;

.color {
    height:12px;
    display:inline-block;
}

＆＃13;

＆＃13;

＆＃13;