漸層中段發灰源自 RGB 平均，加中間色就能救

設計

漸層中段發灰源自 RGB 平均，加中間色就能救

CSS 漸層用 RGB 三通道取平均，所以兩個高彩度色的中段會變成灰；解法是換感知色彩空間，或手動算出多個中間色塞進漸層。

怎麼做

預設漸層從純黃到純藍，中段會發灰變髒，作者引用 Erik Kennedy 的說法叫灰色死區。
原因是 CSS 漸層對 R、G、B 三個通道各自取數學平均。
黃（255/255/0）與藍（0/0/255）走到正中央，三個通道都收斂到中間值，結果是灰。
兩個高彩度色混出完全無彩度的色，作者提問能不能只混色相、保持彩度一致。
換成 HSL 內插，起訖色明度與彩度相同時只有色相在變，等於沿色輪走一圈，灰色死區消失。

可以怎麼用

日出主題的天空漸層，改用 12 到 13 個手動色標，中點避開灰色。

可直接複製的素材

<style>
  body {
    /* Fallback for older browsers: */
    background:
      linear-gradient(to right, yellow, blue);
/* Fancy new value: */
    background:
      linear-gradient(to right in oklch, yellow, blue);
  }
</style>

可直接複製的素材

.box {
  background-image: linear-gradient(
    to right,
    #ffff00,
    #f8ea47,
    #f0d465,
    #f0d465,
    #e7bf7c,
    #ddaa8f,
    #d095a1,
    #c280b2,
    #b26cc2,
    #9d56d2,
    #8440e1,
    #6028f0,
    #0000ff
  )
}

注意：原文談的是 CSS 螢幕漸層。

來源：Josh W. Comeau，2022-01-11｜看原文