求rgb彩虹颜色算法?

Question

这网上找的算法，只有红到蓝，求红到紫算法。

想破头也改不出

let m = 77;

for (let i = 0; i < m; i++) {
  let r = (255 - (255 * i) / (m - 1)) >> 0;
  let g = ((i * 510) / (m - 1)) >> 0;
  let b = ((i * 255) / (m - 1)) >> 0;

  if (g > 255) g = (510 - g) >> 0;

  console.log(`\x1b[38;2;${r};${g};${b}m${r} ${g} ${b}\x1b[39m`);
}

---

修改了采纳的内容最终得到我想要的结果

function hue2rgb(p: number, q: number, t: number): number {
  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;
}

/** 接收的是浮点数 */
function hslToRgb(h: number, s: number, l: number): number[] {
  let r: number, g: number, b: number;

  if (s === 0) {
    r = g = b = l; // achromatic
  } else {
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const 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)];
}

for (let i = 0; i < 100; i++) {
  const [r, g, b] = hslToRgb(i / 120, 1, 0.5);
  console.log(`\x1b[38;2;${r};${g};${b}m${r} ${g} ${b}\x1b[39m`);
}

Answer 1

定义一个“彩虹表”，对相邻的颜色进行线性插值（转成HSV，相关算法都是网上找的）

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)];
}

function rgbToHsl(r, g, b) {
  (r /= 255), (g /= 255), (b /= 255);
  var max = Math.max(r, g, b),
    min = Math.min(r, g, b);
  var h,
    s,
    l = (max + min) / 2;

  if (max == min) {
    h = s = 0; // achromatic
  } else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }
    h /= 6;
  }

  return [h, s, l];
}

function lerp(a, b, t) {
  a = { h: a[0], s: a[1], v: a[2] };
  b = { h: b[0], s: b[1], v: b[2] };
  var h;
  var d = b.h - a.h;
  if (a.h > b.h) {
    var h3 = b.h2;
    b.h = a.h;
    a.h = h3;
    d = -d;
    t = 1 - t;
  }
  if (d > 0.5) {
    a.h = a.h + 1;
    h = (a.h + t * (b.h - a.h)) % 1;
  }
  if (d <= 0.5) {
    h = a.h + t * d;
  }
  return [h, a.s + t * (b.s - a.s), a.v + t * (b.v - a.v)];
}

var red = rgbToHsl(255, 0, 0);
var orange = rgbToHsl(255, 127, 0);
var yellow = rgbToHsl(255, 255, 0);
var green = rgbToHsl(0, 255, 0);
var blue = rgbToHsl(0, 0, 255);
var indigo = rgbToHsl(102, 0, 255);
var violet = rgbToHsl(160, 0, 240);
var colors = [red, orange, yellow, green, blue, indigo, violet];
var maxt = 10;
for (var k = 0; k < colors.length - 1; k++) {
  var color_a = colors[k];
  var color_b = colors[k + 1];
  for (var i = 0; i < maxt; i++) {
    var color = lerp(color_a, color_b, i / maxt);
    var [r, g, b] = hslToRgb(color[0], color[1], color[2]);
    console.log(`\x1b[38;2;${r};${g};${b}m${r} ${g} ${b}\x1b[39m`);
  }
}

Answer 2

我不太理解彩虹颜色的算法，也许你只是需要从颜色startColor到endColor渐变，那只需要将颜色转换为r,g,b三种数值，再计算2个颜色之间的RGB差异，在根据你设置的百分比差异去遍历累加。

var diffRed = endColor.red - startColor.red;
var diffGreen = endColor.green - startColor.green;
var diffBlue = endColor.blue - startColor.blue;

diffRed = (diffRed * percentFade) + startColor.red;
diffGreen = (diffGreen * percentFade) + startColor.green;
diffBlue = (diffBlue * percentFade) + startColor.blue;

Answer 3

换个角度看，网页CSS 用的 HSL 的颜色格式，可以很好的显示出彩虹过度
只要修改 H 的值（0-360），而且是循环的

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

搜一个 HSL 到 RGB 的转换公式，一切迎刃而解