HTML中的颜色表示法全汇总（新手友好）-html教程-PHP中文网

html中无原生颜色标签，颜色均由css控制，主流表示法仅四种：十六进制（#rrggbb/#rgb）、rgb()/rgba()、命名色（仅推荐基础16个）、hsl()/hsla()，且需关注对比度合规性。

html中的颜色表示法全汇总（新手友好）

直接说结论：HTML 里没有原生的“颜色标签”，所有颜色都靠 CSS 控制；所谓“HTML 颜色表示法”，实际是指 color、background-color、border-color 等 CSS 属性能接受的值类型——共四种主流写法，没有第五种，也不需要记 140 个颜色名。

这是最常用、兼容性最好、也最容易出错的写法。浏览器要求必须带 #，漏掉就完全失效。

#FF5733 是标准六位写法，每两位分别对应红、绿、蓝通道（FF=255，57=87，33=51）
#F53 是合法缩写，等价于 #FF5533，但仅当每位数字重复时才成立（#ABC → #AABBCC）；#FA3 不会自动补成 #FFAA33，它就是 #FA3，浏览器按 #FFAA33 解析 —— 这是常见误解
大小写不敏感，#ff5733 和 #FF5733 效果一样，但团队协作建议统一小写
八位写法 #RRGGBBAA（如 #FF573380）支持透明度，AA 是 alpha 通道十六进制值（00=全透明，FF=不透明），但 IE 不支持，需谨慎

rgb(255, 0, 0) 看起来直观，但参数必须是整数 0–255，不能写小数或百分比（除非显式加 % 单位）；rgba() 第四个参数是浮点数 0–1，不是 0–100。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

错误写法：rgb(100%, 0%, 0%) 虽然合法，但容易和 hsl() 混淆；更常见的是误写 rgba(255, 0, 0, 50)（把透明度当成 0–100），结果变成不透明黑色（因为超出范围被截断为 1）
rgba(0, 0, 0, 0.8) 表示 20% 透明的黑，比用十六进制八位更易读，也更适合动态计算（比如 JS 生成颜色时直接拼接数值）
注意：IE8 及以下不支持 rgba()，若需兼容，得配 fallback 或用半透明 PNG

浏览器确实认得 tomato、rebeccapurple 这类名字，但它们本质是 CSS 关键字，不是 HTML 特性；而且 140 个名字里，真正“安全”的只有最初那 16 个（如 red、blue、black）。

orange 是 CSS2.1 加入的，rebeccapurple 是 CSS Color Module Level 4 新增的，老版本 Android WebView 或旧版 Safari 可能不识别
名字不区分大小写，但 LightBlue 不是标准名，lightblue 才是；写错一个字母（比如 slategray 写成 slategrey）在部分浏览器里会回退为 currentColor，导致文字消失
开发中几乎没人靠记名字选色，设计稿给的都是十六进制或 RGB 值，硬背名字反而增加出错概率

hsl(0, 100%, 50%) 表示纯红，hsl(120, 100%, 50%) 是纯绿——色相（H）是角度，饱和度（S）和亮度（L）是百分比。它对人眼更友好，但对机器不友好。

修改色调只需调 h 值（比如从 0° 红调到 240° 蓝），比改 RGB 三位数直观得多；做主题切换或深色模式时，常配合 CSS 变量一起用：--primary-h: 200; + hsl(var(--primary-h), 80%, 60%)
色相 0 和 360 是同一个红，但有些工具输出 hsl(360, ...)，某些旧引擎解析异常，建议统一用 0–359
HSLA 的 alpha 同样是 0–1 浮点数，和 RGBA 一致；但 Safari 对 hsla() 的早期实现有渲染抖动问题，2020 年后已修复，但仍建议在动画场景中优先用 rgba() 或 opacity

真正容易被忽略的不是写法本身，而是颜色对比度是否达标——比如 #999 文字配 #fff 背景，在 WCAG AA 级要求下是不合格的；工具不会报错，但会影响真实用户。写完颜色，顺手用 axe 或 Lighthouse 检查一下对比度，比死记 140 个名字重要得多。