rgb
十六进制颜色代码参考大全
补充说明
网页设计中常用十六进制颜色代码（HEX）表示颜色，格式为 #RRGGBB，每两位十六进制数（00-FF）分别代表红、绿、蓝三原色的亮度。本文按色系分类整理了常用颜色代码，便于快速查阅。
参考色块预览图：
红色系
红色用于警告、错误、紧急等需要突出注意的场景。
| 颜色名 | 代码 | 用途 |
|---|---|---|
| 浅三文鱼 | #FFA07A |
柔和提醒 |
| 三文鱼 | #FA8072 |
次要警告 |
| 轻珊瑚 | #F08080 |
轻微警告 |
| 印第安红 | #CD5C5C |
重要提示 |
| 赤红 | #DC143C |
严重警告 |
| 耐火砖 | #B22222 |
错误提示 |
| 红色 | #FF0000 |
紧急警告 |
| 深红 | #8B0000 |
最高级别警告 |
橙色系
橙色用于吸引注意但非紧急的内容，适合警告框和提示。
| 颜色名 | 代码 | 用途 |
|---|---|---|
| 珊瑚 | #FF7F50 |
温和提醒 |
| 番茄 | #FF6347 |
注意事项 |
| 橙红色 | #FF4500 |
重要提示 |
| 金 | #FFD700 |
警告框首选 |
| 橙子 | #FFA500 |
一般警告 |
| 深橙色 | #FF8C00 |
中度警告 |
黄色系
黄色用于提示、高亮和次要警告。
| 颜色名 | 代码 | 用途 |
|---|---|---|
| 浅黄色 | #FFFFE0 |
柔和提示 |
| 柠檬雪纺 | #FFFACD |
轻微提示 |
| 浅金黄色 | #FAFAD2 |
一般提示 |
| 莫卡辛 | #FFE4B5 |
中性提示 |
| 黄褐色 | #F0E68C |
一般警告 |
| 黑色卡其 | #BDB76B |
中度警告 |
| 黄色 | #FFFF00 |
明显警告 |
绿色系
绿色用于成功、完成、安全等积极反馈。
| 颜色名 | 代码 | 用途 |
|---|---|---|
| 草坪绿 | #7CFC00 |
成功提示 |
| 柠檬绿 | #32CD32 |
成功完成 |
| 酸橙 | #00FF00 |
高亮成功 |
| 森林绿 | #228B22 |
正文强调 |
| 绿色 | #008000 |
一般成功 |
| 深绿色 | #006400 |
深色成功提示 |
| 黄绿色 | #ADFF2F |
新鲜内容 |
| 春绿色 | #00FF7F |
新功能 |
青色系
青色传达清新、冷静感，适合科技、医疗主题。
| 颜色名 | 代码 | 用途 |
|---|---|---|
| 浅蓝 | #E0FFFF |
柔和背景 |
| 青色 | #00FFFF |
高亮显示 |
| 蓝晶 | #7FFFD4 |
清新元素 |
| 海蓝宝石 | #66CDAA |
海洋主题 |
| 绿松石 | #40E0D0 |
醒目元素 |
| 深青 | #008B8B |
重点内容 |
| 蓝绿 | #008080 |
稳重设计 |
蓝色系
蓝色传达信任、稳定和专业感，最常用于企业、科技类设计。
| 颜色名 | 代码 | 用途 |
|---|---|---|
| 粉蓝色 | #B0E0E6 |
柔和背景 |
| 天蓝色 | #87CEEB |
明亮元素 |
| 深天蓝 | #00BFFF |
醒目按钮 |
| 道奇蓝 | #1E90FF |
链接颜色 |
| 矢车菊蓝 | #6495ED |
温和强调 |
| 钢蓝 | #4682B4 |
企业设计 |
| 宝蓝 | #4169E1 |
皇家风格 |
| 海军蓝 | #000080 |
正式设计 |
| 午夜蓝 | #191970 |
深色背景 |
紫色系
紫色传达奢华、创意和神秘感，适合艺术、美妆类设计。
| 颜色名 | 代码 | 用途 |
|---|---|---|
| 薰衣草 | #E6E6FA |
柔和背景 |
| 蓟 | #D8BFD8 |
淡紫色调 |
| 李子 | #DDA0DD |
温和紫色 |
| 紫罗兰 | #EE82EE |
醒目元素 |
| 洋红 | #FF00FF |
高对比度 |
| 中紫色 | #9370DB |
通用紫色 |
| 紫色 | #800080 |
经典紫色 |
| 靛青 | #4B0082 |
最深紫色 |
粉红色系
粉色传达温柔、浪漫感，适合美容、时尚主题。
| 颜色名 | 代码 | 用途 |
|---|---|---|
| 粉色 | #FFC0CB |
柔和背景 |
| 浅粉红 | #FFB6C1 |
温柔元素 |
| 亮粉红 | #FF69B4 |
醒目强调 |
| 深粉红 | #FF1493 |
强烈强调 |
| 浅紫红 | #DB7093 |
柔和紫粉 |
| 中紫红 | #C71585 |
深度粉紫 |
白色系
白色系提供纯净背景，适合内容展示和空间层次。
| 颜色名 | 代码 | 用途 |
|---|---|---|
| 纯白 | #FFFFFF |
主要背景 |
| 雪白 | #FFFAFA |
柔和背景 |
| 薄荷白 | #F5FFFA |
淡青调白 |
| 爱丽丝蓝 | #F0F8FF |
极淡蓝色 |
| 烟白 | #F5F5F5 |
次背景色 |
| 米色 | #F5F5DC |
温暖背景 |
| 古董白 | #FAEBD7 |
温暖白 |
| 象牙白 | #FFFFF0 |
淡黄调白 |
灰色系
灰色提供中性色，适合文本、边框和层次划分。
| 颜色名 | 代码 | 用途 |
|---|---|---|
| 恩斯伯勒灰 | #DCDCDC |
淡灰背景 |
| 浅灰 | #D3D3D3 |
次要背景 |
| 银灰 | #C0C0C0 |
边框分隔 |
| 深灰 | #A9A9A9 |
次要文本 |
| 标准灰 | #808080 |
正文文本 |
| 暗灰 | #696969 |
强调文本 |
| 石板灰 | #708090 |
专业灰色 |
| 纯黑 | #000000 |
主要文本 |
棕色系
棕色传达温暖、自然和稳重感。
| 颜色名 | 代码 | 用途 |
|---|---|---|
| 玉米丝 | #FFF8DC |
淡黄背景 |
| 小麦色 | #F5DEB3 |
自然背景 |
| 浅棕色 | #DEB887 |
中等棕色 |
| 棕褐色 | #D2B48C |
中性棕色 |
| 巧克力色 | #D2691E |
深巧克力 |
| 鞍棕色 | #8B4513 |
深棕色 |
| 赭色 | #A0522D |
红棕色 |
| 棕色 | #A52A2A |
标准棕色 |
| 栗色 | #800000 |
深红棕色 |
色彩使用原则
对比度标准
| 文本大小 | AA 标准 | AAA 标准 |
|---|---|---|
| 正常文本 | 4.5:1 | 7:1 |
| 大文本 | 3:1 | 4.5:1 |
色彩含义参考
| 色系 | 传达含义 |
|---|---|
| 红色 | 紧急、激情、危险、重要 |
| 橙色 | 活力、温暖、友好、创意 |
| 黄色 | 快乐、警示、能量、乐观 |
| 绿色 | 成功、自然、安全、成长 |
| 蓝色 | 信任、稳定、专业、冷静 |
| 紫色 | 奢华、创意、神秘、智慧 |
| 灰色 | 中性、专业、简洁、现代 |
使用示例
CSS
.warning-box {
background-color: #FFD700;
color: #8B0000;
}
Markdown 内联样式
<span style="color:#228B22;">绿色文字</span>
相关命令
- rgb 👈 当前所在位置