我怎样才能生成颜色（不是偶然的），使它们有不同的颜色，而不是阴影？

问题描述 投票：1回答：1

是否可以 "添加 "另一种颜色，并让它从原来的地方开始着色？例如，假设你开始有30个项目要着色，但用户添加了第31个项目。有没有办法让它继续使用当前生成的颜色集，并简单地生成一个与之前的色调和步骤一致的第31种颜色？我找到了一个例子，但我不明白如何使用它。

function rainbow(numOfSteps, step) {
    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
    // Adam Cole, 2011-Sept-14
    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
    var r, g, b;
    var h = 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 * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
    return (c);
}
javascript rgb
1个回答
2
投票

有32种颜色看起来很独特，这并不容易。特别是当你想做的是改变色调时，你可以看到这里有32种颜色，只改变色调。

enter image description here

const hsl = (h, s, l) => `hsl(${h * 360 | 0},${s * 100}%,${l * 100}%)`;
for (let i = 0; i < 32; ++i) {
  const div = document.createElement('div');
  div.style.background = hsl(i / 32, 1, 0.5);
  div.className = 'b';
  document.body.appendChild(div);
}
.b {
 width: 32px;
 height: 32px;
 display: inline-block;
}

你可以尝试使用不同的颜色空间，如HCL，但它同样存在问题。

enter image description here

for (let i = 0; i < 32; ++i) {
  const div = document.createElement('div');
  div.style.background  = chroma.hcl(i / 32 * 360, 80, 70).css();
  div.className = 'b';
  document.body.appendChild(div);
}
.b {
 width: 32px;
 height: 32px;
 display: inline-block;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/chroma.min.js"></script>

我建议你也可以考虑改变亮度。比如16种浅色和16种深色

但更多的我建议不管你在做什么你都要考虑增加图案。比如平面VS格子VS竖条纹VS横条纹VS斜条纹VS钻石等等......。

enter image description here

或者符号♠️ ♦️ ♣️ ♥ ◾️ ● ▲等等。

至于选择距离最远的颜色，你可以把int的位数反过来，但是你需要先选择范围。比如我们选择的范围是0到255（8位），那么通过反转位，前2项的距离就会最大。0和128）。接下来的2项将是这2项之间的最大距离（64和192）。接下来的4项将是每项之间的最大距离（32，96，160，224），等等。

请看 这个

1
投票

我找到了一个例子，但我不明白它怎么能用来

你需要决定你想把梯度分成多少个不同的段。然后你要在该段上循环 total 并像这样生成渐变的每一段。

function rainbow(numOfSteps, step) {
    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
    // Adam Cole, 2011-Sept-14
    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
    var r, g, b;
    var h = 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 * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
    return (c);
}

const total = 100;
for (let i = 0; i < total; i++) {
  const $div = document.createElement('div');
  $div.className = 'box';
  $div.style.background = rainbow(total, i);
  document.body.appendChild($div);
}
.box {
  position: relative;
  width: 100%;
  height: 10px;
}
0
投票

如果你想保留色调，那就从HSVHSL开始，然后再转换成RGB，这样会更容易。

    function generateHslaColors (saturation, lightness, alpha, amount) {
      let colors = []
      let huedelta = Math.trunc(360 / amount)

      for (let i = 0; i < amount; i++) {
        let hue = i * huedelta
        colors.push(`hsla(${hue},${saturation}%,${lightness}%,${alpha})`)
      }

      return colors
    }

    /**
     * Converts an HSL color value to RGB. Conversion formula
     * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
     * Assumes h, s, and l are contained in the set [0, 1] and
     * returns r, g, and b in the set [0, 255].
     *
     * @param   {number}  h       The hue
     * @param   {number}  s       The saturation
     * @param   {number}  l       The lightness
     * @return  {Array}           The RGB representation
     */
    function hslToRgb(h, s, l){
        var r, g, b;

        if(s == 0){
            r = g = b = l; // achromatic
        }else{
            var hue2rgb = function hue2rgb(p, q, t){
                if(t < 0) t += 1;
                if(t > 1) t -= 1;
                if(t < 1/6) return p + (q - p) * 6 * t;
                if(t < 1/2) return q;
                if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            }

            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }

        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.