跳转至

HTML 颜色

颜色属于视觉表现，现代页面应通过 CSS 设置，而不是使用旧式 HTML 表现属性。 HTML 提供语义结构，CSS 颜色可以应用于文字、背景、边框和图形。

基本用法

<p class="notice">操作已完成。</p>

.notice {
  color: #12372a;
  background-color: #e8f5ee;
  border-inline-start: 0.25rem solid #2f855a;
  padding: 0.75rem 1rem;
}

优先使用可复用的类，而不是在每个元素上重复内联 style。 不要使用已废弃的 font color、bgcolor 等表现写法。

颜色语法

CSS 支持多种颜色表示：

  • 颜色关键字，如 rebeccapurple。
  • 十六进制，如 #663399 或带透明度的 #663399cc。
  • rgb()，如 rgb(102 51 153 / 80%)。
  • hsl()，如 hsl(270 50% 40% / 80%)。
  • currentColor，表示元素当前的 color 值。

具体写法见颜色名和颜色值。

使用自定义属性

:root {
  --color-text: #17202a;
  --color-surface: #ffffff;
  --color-accent: #2457c5;
}

a {
  color: var(--color-accent);
}

设计令牌让主题与状态颜色保持一致，也便于统一调整对比度。 变量名称宜表达用途，而不是只描述颜色外观。

对比度与可访问性

正文、按钮文字和图标需要与背景保持足够对比度。 应在实际字号、字重、背景和交互状态下使用对比度工具检查。 占位符、禁用态和焦点样式也不能淡到无法辨认。

颜色不能成为唯一信息通道：

<p class="error" role="alert">
  <strong>提交失败：</strong>邮箱格式不正确。
</p>

错误状态同时使用文字、图标或结构说明，不能只把输入框变红。

用户偏好

可通过 prefers-color-scheme 提供深色主题，但必须分别检查两套主题。 系统强制颜色模式可能覆盖作者颜色，因此控件和状态不应只依赖精确色值。

安全提示

不要把不可信字符串直接插入 style 属性或样式表。 如业务允许用户选色，应解析为受支持的格式并输出规范化结果，而不是原样拼接 CSS。

检查清单

  • 使用 CSS 而不是废弃的 HTML 颜色属性。
  • 在普通、悬停、焦点、访问后和禁用状态下检查可读性。
  • 不只用颜色表达成功、警告、错误或选中状态。
  • 同时测试浅色、深色和高对比度环境。
  • 将常用颜色集中为有语义的设计令牌。

下一篇：HTML 颜色名。