HTML5如何用颜色名或#十六进制设置颜色

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《HTML5如何用颜色名或#十六进制设置元素颜色》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

HTML5通过CSS定义颜色，支持颜色名称、十六进制（#RRGGBB/#RGB）、RGB/RGBA、HSL/HSLA等格式；需注意兼容性、可访问性及深色模式适配。

HTML5 本身不直接“定义颜色”，而是通过 CSS（层叠样式表）来设置元素的颜色。HTML5 提供了更语义化的标签结构，而颜色控制完全交给 CSS，支持多种写法：颜色名称、十六进制（#RRGGBB 或 #RGB）、RGB/RGBA、HSL/HSLA 等。

用颜色名称设置文字或背景色

最简单的方式是使用预定义的英文颜色名，如 red、blue、green、orange、teal 等。共约 140 个标准名称（含 CSS2 和 CSS3 扩展），大小写不敏感。

示例：

用十六进制（#）定义精确颜色

这是最常用的方式，格式为 #RRGGBB（6位，每两位代表红、绿、蓝分量），也可简写为 #RGB（3位，每位自动扩展为两位，如 #f93 → #ff9933）。

说明：

• #000 = 黑色，#fff = 白色，#f00 = 纯红（#ff0000）
• 字母 a–f 不区分大小写：#3A8Fcc 和 #3a8fcc 效果相同
• 支持 8 位十六进制（#RRGGBBAA）表示透明度，但需 CSS 支持（如 rgba 替代更通用）

内联、内部、外部 CSS 中均可使用

颜色值可写在任意 CSS 上下文中，不限于内联 style 属性：

注意兼容性与可访问性

颜色名和 #RRGGBB 在所有现代浏览器中完全支持；但部分冷门颜色名（如 rebeccapurple）在旧版 IE 中可能无效。更重要的是：

• 避免仅靠颜色传递关键信息（如“红色=错误”需搭配图标或文字）
• 确保文本与背景有足够对比度（建议 WCAG AA 级 ≥ 4.5:1）
• 深色模式下，硬编码的 #000 或 #fff 可能不适应，可配合 prefers-color-scheme 媒体查询优化

本篇关于《HTML5如何用颜色名或#十六进制设置颜色》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！