问html 颜色代码有哪些 常用写法汇总

html 里面设置颜色主要分为四大类写法，分别是十六进制颜色代码 rgb 颜色函数 rgba 带透明通道颜色 以及预设颜色名称，这几种写法都可以直接写在 style 样式里面，用来修改文字颜色 背景色 边框颜色。很多新手刚接触的时候只知道十六进制代码，不清楚还有英文颜色名和 rgb 写法，不同写法本质都是表达同一个颜色，只是书写格式不一样，浏览器全部支持，日常项目里面十六进制代码使用频率最高，因为紧凑通用，rgba 适合需要半透明效果的场景，英文颜色名适合快速写简单测试页面。十六进制颜色代码以井号开头，后面六位字符，每两位分别代表红 绿 蓝三个通道，取值范围是 00 到 ff，也支持三位简写形式，比如 fff 代表白色，f00 代表红色，三位简写只适合每两位数值相同的颜色。rgb 写法是用 rgb 函数，红 绿 蓝三个数值，范围是 0 到 255，rgba 在 rgb 基础上增加第四个参数，也就是透明度，数值 0 是完全透明，1 是完全不透明。英文颜色名称是 w3c 标准内置关键词，像 red blue black 这类，优点是好记，缺点是可选颜色数量有限，精细调色一般不会使用英文名称。

四类颜色代码详细说明

十六进制颜色代码

格式 井号加六位字符 或者三位简写

取值规则 每两位对应 R 红 G 绿 B 蓝，00 是最低亮度 ff 是最高亮度

适用场景 网页背景 文字 边框，前端项目最主流写法

示例 黑色 000000 白色 ffffff 纯红 ff0000 纯绿 00ff00 纯蓝 0000ff

rgb 颜色代码

格式 rgb 数值 数值 数值

取值规则 红绿蓝每通道 0 到 255 整数

适用场景 需要直观调整通道数值，代码可读性高

示例 rgb 0 0 0 黑色 rgb 255 255 255 白色

rgba 颜色代码

格式 rgba 数值 数值 数值 透明度

取值规则 红绿蓝 0 到 255，透明度 0 到 1 小数

适用场景 半透明背景 悬浮遮罩 渐变透明效果

示例 rgba 255 0 0 0.5 半透明红色

预设英文颜色名称

属于标准关键字，不需要井号也不需要函数

优点 记忆简单，写测试页面快捷

缺点 颜色种类有限，不能自定义精细色彩

常用基础色 black white red green blue yellow orange purple gray

常用基础颜色代码对照表

html 里面颜色代码使用步骤

1 找到需要改颜色的标签，比如 p div span

2 给标签添加 style 内联样式，或者写在 css 样式表里面

3 选择一种颜色代码格式，填入 color 或者 background 属性

4 保存 html 文件，浏览器打开预览颜色效果

5 如果需要半透明，优先选择 rgba 代码，普通纯色优先十六进制

补充要点

1 hsl 和 hsla 也是现代 css 支持的颜色写法，按色相 饱和度 亮度表达颜色，属于扩展写法，很多教材也会归类进 html 颜色相关代码体系

2 十六进制代码不区分大小写，FF0000 和 ff0000 效果一样，行业习惯一般小写

3 三位简写十六进制，不能随便使用，只有每两位重复才可以，比如 ff0000 可以简写成 f00，但是 ff6600 不能强行简写

4 旧版 html 标签自带的 bgcolor 属性，现在已经不推荐使用，新标准推荐使用 css 样式写颜色代码

【常见问题】

问题 1 html 颜色代码十六进制三位简写是什么规则

回答 1 html 颜色代码十六进制三位简写，要求红绿蓝每两位数值重复，比如 ff0000 简写为 f00，普通六位不重复的 html 颜色代码不能使用三位简写

问题 2 html 颜色代码 rgba 和 rgb 区别是什么

回答 2 html 颜色代码 rgb 只有红绿蓝三个通道，rgba 在 rgb 基础上增加透明度参数，html 颜色代码 rgba 可以实现半透明效果，rgb 只能纯色

问题 3 html 颜色代码英文名称可以自定义吗

回答 3 html 颜色代码英文名称是标准预设关键词，不能自定义新增，想要精细调色需要使用十六进制或者 rgb 这类 html 颜色代码

问题 4 html 颜色代码可以写在 bgcolor 里面吗

回答 4 html 颜色代码可以写在旧属性 bgcolor 里面，但是新标准已经废弃 bgcolor，推荐使用 css 样式来设置 html 颜色代码

问题 5 html 颜色代码 hsl 属于标准写法吗

回答 5 html 颜色代码 hsl 属于现代 css 标准写法，通过色相饱和度亮度定义色彩，和十六进制 rgb 一样都是合法 html 颜色代码

【免责申明】

本文是 html 颜色代码基础汇总，不同浏览器对新版颜色函数支持程度存在差异，html css 标准会持续更新，本文内容仅作为前端入门学习参考，不构成项目强制开发规范。