如何用HTML5 Canvas及CSS绘制CIE-1931色度图？

问题背景 #

我正在尝试用CSS或Canvas绘制CIE-1931色度图，目前有两个实现思路：

• 利用SVG裁剪蒙版贴合光谱轨迹
• 通过JS结合Canvas手动绘制路径

但现在遇到核心问题：使用CSS的color(xyz-d65)函数时，超出sRGB色域的色彩会被自动裁剪，而理论上这些色彩应该被保留（即使设备无法显示）。以下是我当前的测试代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
.cie-diagram {
  position: relative;
  width: 300px;
  height: 300px;
  background: grey
}

.cie-square {
  position: relative;
  width: 100%;
  height: 100%;
  mix-blend-mode: color;
  background: linear-gradient(to top, color(xyz-d65, 0, 0, 1) 0%, color(xyz-d65, 0, 1, 1) 100%);
}

.cie-square::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: color;
  background: linear-gradient(to top, color(xyz-d65, 1, 0, 1) 0%, color(xyz-d65, 1, 1, 1) 100%);
  -webkit-mask: linear-gradient(to right, transparent 0, white 100%);
  mask: linear-gradient(to right, transparent 0, white 50%, transparent 100%);
}
    </style>
  </head>
  <body>
    <div class="cie-diagram">
       <div class="cie-square"></div>
    </div>
  </body>
</html>

问题原因 #

CSS的颜色处理默认会将所有色彩转换到当前设备的输出色域（通常是sRGB），即使你指定了XYZ色彩空间。这是因为浏览器的渲染管线最终要输出能被显示设备呈现的颜色，所以会自动 clamp（裁剪）超出目标色域的色彩值。

解决方案 #

方案1：Canvas手动计算绘制（最可靠） #

Canvas的ImageData可以直接处理线性RGB或XYZ色彩值，不会自动裁剪。你可以完全控制色彩逻辑：

1. 遍历CIE色度图的每个坐标点，计算对应的XYZ值
2. 将XYZ转换为线性RGB
3. 判断RGB值是否超出sRGB范围（R/G/B > 1或 < 0）
4. 对超色域像素做特殊标记（比如降低饱和度、叠加纹理），而非直接裁剪
5. 将处理后的像素数据写入Canvas

方案2：CSS调整渲染策略（有限支持） #

部分现代浏览器支持通过混合模式或滤镜增强超色域区域的可见性，但无法完全避免裁剪：

.cie-square {
  background: linear-gradient(to top, color(xyz-d65, 0, 0, 1) 0%, color(xyz-d65, 0, 1, 1) 100%);
  /* 用滤镜放大超色域区域的色彩差异 */
  filter: contrast(150%) brightness(110%);
}

方案3：SVG蒙版结合线性色彩插值 #

SVG支持Lab色彩空间，且可通过color-interpolation="linearRGB"减少自动色域转换的影响：

<svg width="300" height="300">
  <defs>
    <linearGradient id="yGrad" y1="100%" y2="0%">
      <stop offset="0%" stop-color="color(xyz-d65 0 0 1)" />
      <stop offset="100%" stop-color="color(xyz-d65 0 1 1)" />
    </linearGradient>
    <linearGradient id="xGrad" x1="0%" x2="100%" xlink:href="#yGrad">
      <stop offset="0%" stop-color="color(xyz-d65 1 0 1)" />
      <stop offset="100%" stop-color="color(xyz-d65 1 1 1)" />
    </linearGradient>
    <!-- 替换为CIE-1931光谱轨迹的Path路径 -->
    <clipPath id="cieClip">
      <path d="M0.7347,0.2653 L0.7163,0.2837 L0.698,0.302 ..."/>
    </clipPath>
  </defs>
  <rect width="100%" height="100%" fill="url(#xGrad)" clip-path="url(#cieClip)" color-interpolation="linearRGB" />
</svg>

总结 #

要完整呈现CIE-1931色度图的全色域（包括超sRGB区域），Canvas手动绘制是最可靠的方案，能完全规避浏览器的自动色域裁剪。CSS和SVG方案受限于渲染管线特性，仅能实现近似效果。

内容的提问来源于stack exchange，提问作者kblst