时间戳

首页 > 解决方案 > 我可以仅使用 CSS 将颜色设置为“网络安全”（216 调色板）吗？

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

问题描述

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

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

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

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

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

我对 216 种颜色不那么在意，256 就可以了，但是我怎样才能在 CSS 中模拟它呢？

标签： csscolors

解决方案

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

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

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

0.0625 是 1/16。

那为什么是16？

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

每个颜色通道有 3 位，这意味着 9 位，8 位颜色比 8 多一位。但效果仅适用于复古外观，并非严格仿真。

推荐阅读