不考虑颜色规则的随机生成颜色码
发布于 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的转换，也不难

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

不错 不错

回到顶部