I wrote about semantic HTML for colors 5 years ago，因为当颜色的外观是重要的内容时，不仅是样式：

• 设计系统可用调色板
• 选择要购买的衣服
• 关于油漆网站的预览色板
• 可能更多的颜色非常重要！

我的原始帖子建议了一个标有<input type=color readonly>，但是从那以后，我考虑了这是如何跌倒的：

• 可以显示wide-gamut colors或一般的managed color
• 可以显示半透明，渐变，图案或其他花式色板
• 可以在<a>，<button>，另一个表单s<label>等内筑巢
• readonly仍然不允许在<input type=color>�和the color picker/inspection popup isn’t accessible yet anyway上

因此，我最初的结论是<svg>可能是一个更好的主意。 （我在该帖子上使用我的编辑按钮。

现在，这些问题很重要，但是我写这篇文章的真正原因是pettier：我在github.com上使用了“检查元素”并为此感到生气。

Github的十六进制代码色板

github具有一个功能，如果您在markdown文件/注释/wather中键入6位十六进制代码，它将以rrggbb格式显示该hex的颜色点：

例如，如果键入`#aa4400`，则github的html输出看起来像：

<code>#aa4400
  <span
    class="ml-1 d-inline-block border circle color-border-subtle"
    style="background-color: #aa4400; height: 8px; width: 8px;"
  ></span>
</code>

这有问题：

未接触到

忘记文本替代方案，现在完全不存在辅助技术

太容易覆盖了

通过黑暗/光模式浏览器扩展，builtin Dark Mode browser support，用户样式等。

在强制颜色下看不见

koude8是Windows High-Contants模式之类功能的标准化名称，该功能完全关闭background-color

我们可以用内联SVG解决大多数问题：

<code>#aa4400
  <svg width="8" height="8"
    fill="#aa4400"
    class="ml-1 border circle color-border-subtle"
  >
    <rect width="100%" height="100%"/>
  </svg>
</code>

上述标记上的一些注释：

• 我还没有访问它，因为事实证明是a whole section’s worth of considerations
• 不再需要d-inline-block类（<svg>是inline-block）
• 否style属性让它与严格的内容安全策略一起发挥作用

但是，当我们可以成为完美主义者时，为什么要停下来

github的当前实现也有我认为是一个错误，它在较大文本中看起来很愚蠢：