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  # css  # css3  # html  # 编码  # 浏览器  # red  # class  # href  # 样式表  # background  # 两位  # 的是  # 这是  # 也可  # 这段  # 英文  # 更重要  # 均可  # 最简单  # 写在 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何实现事件和监听器？（Event & Listener实战）  如何快速搭建自助建站会员专属系统？  教你用AI将一段旋律扩展成一首完整的曲子  Thinkphp 中 distinct 的用法解析  详解Oracle修改字段类型方法总结  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  Swift开发中switch语句值绑定模式  油猴 教程,油猴搜脚本为什么会网页无法显示？  实例解析Array和String方法  Bootstrap整体框架之JavaScript插件架构  如何获取上海专业网站定制建站电话？  Laravel怎么使用Intervention Image库处理图片上传和缩放  Laravel如何实现全文搜索_Laravel Scout集成Algolia或Meilisearch教程  js实现点击每个li节点，都弹出其文本值及修改  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  EditPlus中的正则表达式实战(6)  手机软键盘弹出时影响布局的解决方法  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  如何在万网自助建站中设置域名及备案？  如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体  Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层  如何在建站宝盒中设置产品搜索功能？  Laravel用户密码怎么加密_Laravel Hash门面使用教程  EditPlus中的正则表达式 实战(1)  如何快速搭建虚拟主机网站？新手必看指南  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  canvas 画布在主流浏览器中的尺寸限制详细介绍  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  Laravel Telescope怎么调试_使用Laravel Telescope进行应用监控与调试  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  bootstrap日历插件datetimepicker使用方法  Android实现代码画虚线边框背景效果  如何快速搭建二级域名独立网站？  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  在centOS 7安装mysql 5.7的详细教程  微信公众帐号开发教程之图文消息全攻略  JavaScript如何实现错误处理_try...catch如何捕获异常？  轻松掌握MySQL函数中的last_insert_id()  QQ浏览器网页版登录入口 个人中心在线进入  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  Python高阶函数应用_函数作为参数说明【指导】  如何在建站主机中优化服务器配置？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？