在HTML5里，定义元素的颜色值通常有两种常见方式：直接使用颜色名称，或者使用以井号开头的十六进制颜色代码。这两种方式都能作用在文字、背景、边框等样式属性上，是前端开发必须掌握的基础能力。
一、使用颜色名定义颜色
HTML5和CSS中内置了一部分标准颜色名称，比如red、green、blue、black、white等。使用颜色名的好处是直观，不需要计算数值，但可选范围比较小，大概只有一百四十多个标准色。
我们可以在style属性里直接写颜色名：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>颜色名示例</title>
</head>
<body>
<p style="color: red;">这一段文字是红色</p>
<div style="background-color: lightblue; width: 200px; height: 100px;">
蓝色背景区块
</div>
</body>
</html>
二、使用#十六进制定义颜色
十六进制颜色值以#开头，后面跟六位十六进制数字，格式为#RRGGBB，其中RR表示红色分量，GG表示绿色分量，BB表示蓝色分量，每个分量的范围是00到ff。比如#ff0000是纯红，#00ff00是纯绿，#0000ff是纯蓝，#000000是黑色，#ffffff是白色。
也可以用简写形式，当每两位相同时可缩写为三位，例如#f00等价于#ff0000。
常见十六进制颜色示例
| 颜色说明 | 十六进制值 | 简写 |
|---|---|---|
| 红色 | #ff0000 | #f00 |
| 灰色 | #808080 | 不支持简写 |
| 白色 | #ffffff | #fff |
十六进制颜色代码演示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>十六进制颜色示例</title> </head> <body> <p style="color: #336699;">这段文字使用十六进制颜色</p> <p style="color: #f00;">简写红色文字</p> <span style="background-color: #ffff00; padding: 4px;">黄色背景</span> </body> </html>
三、在CSS中统一设置
除了写在标签的style属性里，我们更推荐在<style>块或外部CSS里定义颜色，便于维护：
/* 使用颜色名 */
.title {
color: navy;
}
/* 使用十六进制 */
.content {
background-color: #f5f5f5;
border: 1px solid #cccccc;
}
四、如何选择
如果你只是做快速演示或简单页面，颜色名够用且好记；如果需要精确控制品牌色或渐变搭配，十六进制方式更合适。实际项目中也可以混用，只要保证团队写法一致即可。
注意：HTML5本身不新增颜色定义语法，颜色能力来自CSS，但因为在HTML5文档中我们使用这些方式来设置元素表现，所以通常说HTML5定义颜色。
掌握颜色名与#十六进制两种写法，你就能轻松完成绝大多数网页元素的颜色设置任务。