如何通过JS/jQuery获取CSS十六进制颜色码并自动显示在页面元素中

原生JavaScript完全可以实现该效果，不需要额外依赖库。实现后仅需维护CSS中的颜色类定义，脚本会自动读取实际渲染的背景色、转换为十六进制格式后填充到对应.hexcode标签中，新增颜色项时无需手动修改HTML文本。

核心实现逻辑 #

• 监听页面DOM加载完成事件，确保所有样式规则生效后再读取属性，避免取值为空
• 遍历所有带.color类的色块元素，通过浏览器原生getComputedStyleAPI获取元素实际生效的background-color属性值
• 浏览器默认返回rgb/rgba格式的色值，编写转换函数将其统一转为标准十六进制hex格式
• 通过DOM节点关联，找到当前色块所在.global-box容器内的.hexcode标签，写入转换完成的色值

可直接使用的代码 #

将以下JavaScript代码放在页面</body>闭合标签之前即可：

// RGB格式转十六进制格式工具函数
function rgbToHex(rgbString) {
  // 从rgb/rgba字符串中提取R、G、B三个通道的数值
  const channelValues = rgbString.match(/\d+/g).slice(0, 3).map(Number);
  // 每个通道转16进制，不足两位时前面补0，拼接为标准hex色值
  return '#' + channelValues.map(value => {
    const hex = value.toString(16);
    return hex.length === 1 ? `0${hex}` : hex;
  }).join('').toUpperCase();
}

// DOM加载完成后执行色值填充
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.color').forEach(colorBlock => {
    // 读取元素实际渲染的背景色
    const bgColor = window.getComputedStyle(colorBlock).backgroundColor;
    // 转换为hex格式
    const hexValue = rgbToHex(bgColor);
    // 定位同容器内的hexcode标签，写入色值
    const hexLabel = colorBlock.closest('.global-box')?.querySelector('.hexcode');
    if (hexLabel) hexLabel.textContent = hexValue;
  })
})

扩展说明 #

• 如果你需要小写格式的hex色值，删掉代码中toUpperCase()调用即可
• 后续如果要新增其他色系的颜色块，只要保持.global-box内包含.color色块和.hexcode标签的结构不变，脚本会自动适配，不需要修改JS代码
• 如果需要支持带透明度的rgba颜色，只需修改rgbToHex函数，提取第四个alpha通道值转为两位十六进制，拼接在hex值末尾即可得到8位带透明度的hex色值

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