我可以仅使用 CSS 将颜色设置为“网络安全”（216 调色板）吗？

Question

对于一个复古主题的项目，我希望在网络安全配色方案中显示颜色。

我可以重新编辑我的图像以使它们使用旧的 216 调色板，但我更愿意保持原样并在 CSS 中模拟网络安全颜色。

我尝试调整图像的亮度以使其失去一些颜色保真度，然后尝试使用容器元素将其恢复，例如：

<figure style="filter: brightness(100);">
    <img src="/example.jpg" style="filter: brightness(0.01);">
 </figure>

这让我成功了一半，但我需要多少数字才能正确模拟“网络安全”颜色？

我对 216 种颜色没那么大惊小怪，256 种就可以了，但是如何在 CSS 中模拟它呢？

Answer 1

经过一些调整，这给了我想要的效果：

figure:hover {
    filter: brightness(16);
}

figure:hover > * {
    filter: brightness(0.0625);
}

0.0625 是 1/16。

那么为什么是 16？

16 是二进制的 5 位。所以我在每个颜色通道中删除了 8 位中的 5 位。

每个颜色通道有 3 位，这意味着 9 位，8 位颜色比 8 多一位。但效果只适合复古外观，不能严格仿真。