不考虑颜色规则的随机生成颜色码
发布于 1年前 作者 sdfcbs91 732 次浏览
//随机生成颜色 不考虑规则 六位数字/英文

function randomcolor2() {
    var re = "#";
    for (var i = 0; i < 6; i++) {
        var random = Math.random() * 100;
        var r = random > 14 ? random > 28 ? random > 42 ? random > 56 ? random > 68 ? random > 82 ? parseInt(Math.random() * 10) : "f" : "e" : "d" : "c" : "b" : "a";
        re += r;
    }
    return re;
}
9 回复

这样是不好的,实际使用的时候,所生成的大部分颜色是不可用的。真正的随机,就要考虑到一些必要的约束,比如亮度。我的经验是用YUV颜色空间做随机,选定一个亮度值,然后随机一个色相的角度,这样得到的结果会比较实用。

如果需要一系列的很多颜色值,那么后续的颜色值的计算,只需要在前一个颜色的色相上偏转一个角度,就得到新的颜色值了。把偏转角度设置成不是360度因数的值,可以防止后续颜色的重复循环,这样就可以得到无穷的适合的随机颜色序列。而且,偏转角度可以让前后的色彩保持足够的差异,让相邻颜色之间的视觉效果格外分明。

      var color = randomRange(0, 0xC5BF27);
      return '#' + ('000000' + color.toString(16)).slice(-6);

@sdfcbs91 第一个颜色,可以随机取得 var firstValue = Math.random() * 360; var color = []; color[0] = 'hsla(' + firstValue + ', 75%, 50%, 0.3)'

后续的第i个色相,可以通过旋转某个角度取得,比如 color[i] = 'hsla(' + ( firstValue + i * 222.5 ) + ', 75%, 50%, 0.3)'

我这个例子,是假定了颜色范围是 hsla(色相, 75%, 50%, 0.3) 的半透明色彩,用随机函数生成第一个色相,然后每次偏转222.5度(这个角度的叠加估计很难导致达到360的倍数,而且前后两个颜色的差异也足够大)

@wenbob 嗯 这个很不错,只是我调用的是JSCHART插件,属性只针对rgb(rgb)或(rrggbb).

@sdfcbs91 那就最后加个hsl2rgb的转换,也不难

我也觉得使用色相环的方式比较好,色彩学上实用色相环 红橙黄绿蓝紫 来选取的颜色,再配上透明度

回到顶部