十六进制颜色代码大全 🎨
十六进制颜色代码大全 🎨
✨ 目录
✨ 色彩使用原则
设计基础原则
- 🎯 一致性 - 在整个项目中保持颜色使用的一致性
- 👁️ 可访问性 - 确保颜色对比度符合 WCAG 2.1 标准
- 🎨 语义化 - 使用颜色传达明确的含义和信息
- ⚖️ 适度性 - 避免过度使用鲜艳颜色造成视觉疲劳
- 📱 响应式 - 在不同设备上测试颜色显示效果
对比度检查标准
| 文本大小 | AA 标准 | AAA 标准 |
|---|---|---|
| 正常文本 | 4.5:1 | 7:1 |
| 大文本 | 3:1 | 4.5:1 |
色彩心理学简要指南
- 🔴 红色: 紧急、激情、危险、重要
- 🟠 橙色: 活力、温暖、友好、创意
- 🟡 黄色: 快乐、警示、能量、乐观
- 🟢 绿色: 成功、自然、安全、成长
- 🔵 蓝色: 信任、稳定、专业、冷静
- 🟣 紫色: 奢华、创意、神秘、智慧
- ⚫ 黑白灰: 中性、专业、简洁、现代
🌈 颜色分类指南
🔴 红色系 - 激情与警告
红色系颜色常用于表示重要警告、错误提示或需要立即注意的内容。
| 预览 | 颜色名称 | 十六进制代码 | 推荐用途 |
|---|---|---|---|
| 浅三文鱼 | #FFA07A | 柔和提醒 | |
| 三文鱼 | #FA8072 | 次要警告 | |
| 黑鲑 | #E9967A | 中等警告 | |
| 轻珊瑚 | #F08080 | 轻微警告 | |
| 印第安红 | #CD5C5C | 重要提示 | |
| 赤红 | #DC143C | 严重警告 | |
| 耐火砖 | #B22222 | 错误提示 | |
| 红色 | #FF0000 | 紧急警告 | |
| 深红 | #8B0000 | 最高级别警告 |
🟠 橙色系 - 活力与注意
橙色系适合用于吸引注意力，表示需要注意但非紧急的内容。
| 预览 | 颜色名称 | 十六进制代码 | 推荐用途 |
|---|---|---|---|
| 珊瑚 | #FF7F50 | 温和提醒 | |
| 番茄 | #FF6347 | 注意事项 | |
| 橙红色 | #FF4500 | 重要提示 | |
| 金 | #FFD700 | 警告框首选 | |
| 橙子 | #FFA500 | 一般警告 | |
| 深橙色 | #FF8C00 | 中度警告 |
🟡 黄色系 - 明亮与提示
黄色系适合用于提示、注意或高亮显示内容。
| 预览 | 颜色名称 | 十六进制代码 | 推荐用途 |
|---|---|---|---|
| 浅黄色 | #FFFFE0 | 柔和提示 | |
| 柠檬雪纺 | #FFFACD | 轻微提示 | |
| 浅金黄色 | #FAFAD2 | 一般提示 | |
| 木瓜鞭 | #FFEFD5 | 温馨提醒 | |
| 莫卡辛 | #FFE4B5 | 中性提示 | |
| 桃扑 | #FFDAB9 | 友好提示 | |
| 淡金黄色 | #EEE8AA | 轻度警告 | |
| 黄褐色 | #F0E68C | 一般警告 | |
| 黑色卡其色 | #BDB76B | 中度警告 | |
| 黄色 | #FFFF00 | 明显警告 |
🟢 绿色系 - 成功与自然
绿色系常用于表示成功、完成状态或与自然相关的内容。
| 预览 | 颜色名称 | 十六进制代码 | 推荐用途 |
|---|---|---|---|
| 草坪绿 | #7CFC00 | 成功提示 | |
| 黄绿色 | #7FFF00 | 积极反馈 | |
| 柠檬绿 | #32CD32 | 成功完成 | |
| 酸橙 | #00FF00 | 高亮成功 | |
| 森林绿 | #228B22 | 正文强调 | |
| 绿色 | #008000 | 一般成功 | |
| 深绿色 | #006400 | 深色成功提示 | |
| 黄绿色 | #ADFF2F | 新鲜内容 | |
| 黄绿色 | #9ACD32 | 更新提示 | |
| 春绿色 | #00FF7F | 新功能 |
🔵 青色系 - 清新与冷静
青色系颜色给人一种清新、冷静的感觉，适合用于科技、医疗或水相关主题的设计。
| 预览 | 颜色名称 | 十六进制代码 | 推荐用途 |
|---|---|---|---|
| 浅蓝 | #E0FFFF | 柔和背景 | |
| 青色/水色 | #00FFFF | 高亮显示 | |
| 蓝晶 | #7FFFD4 | 清新元素 | |
| 海蓝宝石 | #66CDAA | 海洋主题 | |
| 浅绿色 | #AFEEEE | 柔和提示 | |
| 绿松石 | #40E0D0 | 醒目元素 | |
| 中绿松石 | #48D1CC | 平衡设计 | |
| 深蓝绿 | #00CED1 | 深度元素 | |
| 浅海绿 | #20B2AA | 海洋主题 | |
| 军校蓝 | #5F9EA0 | 专业设计 | |
| 深青 | #008B8B | 重点内容 | |
| 蓝绿 | #008080 | 稳重设计 |
🔷 蓝色系 - 信任与稳定
蓝色系传达信任、稳定和专业感，是企业、科技和金融领域常用的颜色。
| 预览 | 颜色名称 | 十六进制代码 | 推荐用途 |
|---|---|---|---|
| 粉蓝色 | #B0E0E6 | 柔和背景 | |
| 浅蓝 | #ADD8E6 | 清新界面 | |
| 天蓝色 | #87CEFA | 天空主题 | |
| 天蓝色 | #87CEEB | 明亮元素 | |
| 深天蓝 | #00BFFF | 醒目按钮 | |
| 亮钢蓝 | #B0C4DE | 专业界面 | |
| 道奇蓝 | #1E90FF | 链接颜色 | |
| 矢车菊蓝 | #6495ED | 温和强调 | |
| 钢蓝 | #4682B4 | 企业设计 | |
| 宝蓝 | #4169E1 | 皇家风格 | |
| 纯蓝 | #0000FF | 传统蓝色 | |
| 中蓝 | #0000CD | 中等强调 | |
| 深蓝 | #00008B | 深度元素 | |
| 海军蓝 | #000080 | 正式设计 | |
| 午夜蓝 | #191970 | 深色背景 | |
| 中石板蓝 | #7B68EE | 紫色调蓝 | |
| 石板蓝 | #6A5ACD | 温和紫色蓝 | |
| 深石板蓝 | #483D8B | 深度蓝紫 |
🟣 紫色系 - 奢华与创意
紫色系传达奢华、创意和神秘感，适合艺术、美容和高档品牌设计。
| 预览 | 颜色名称 | 十六进制代码 | 推荐用途 |
|---|---|---|---|
| 薰衣草 | #E6E6FA | 柔和背景 | |
| 蓟 | #D8BFD8 | 淡紫色调 | |
| 李子 | #DDA0DD | 温和紫色 | |
| 紫罗兰 | #EE82EE | 醒目元素 | |
| 兰花 | #DA70D6 | 女性设计 | |
| 洋红/紫红 | #FF00FF | 高对比度 | |
| 中兰花 | #BA55D3 | 平衡紫色 | |
| 中紫色 | #9370DB | 通用紫色 | |
| 蓝紫 | #8A2BE2 | 醒目强调 | |
| 暗紫 | #9400D3 | 深度紫色 | |
| 暗兰花 | #9932CC | 紫色强调 | |
| 深洋红 | #8B008B | 深色背景 | |
| 紫色 | #800080 | 经典紫色 | |
| 靛青 | #4B0082 | 最深紫色 |
💖 粉红色系 - 温柔与浪漫
粉红色系传达温柔、浪漫和女性化的感觉，适合美容、时尚和爱情主题设计。
| 预览 | 颜色名称 | 十六进制代码 | 推荐用途 |
|---|---|---|---|
| 粉色 | #FFC0CB | 柔和背景 | |
| 浅粉红 | #FFB6C1 | 温柔元素 | |
| 亮粉红 | #FF69B4 | 醒目强调 | |
| 深粉红 | #FF1493 | 强烈强调 | |
| 浅紫红 | #DB7093 | 柔和紫粉 | |
| 中紫红 | #C71585 | 深度粉紫 |
⚪ 白色系 - 纯净与简洁
白色系颜色提供纯净、简洁的背景，适合用于内容展示和创造空间感。
| 预览 | 颜色名称 | 十六进制代码 | 推荐用途 |
|---|---|---|---|
| 纯白 | #FFFFFF | 主要背景 | |
| 雪白 | #FFFAFA | 柔和背景 | |
| 甘露白 | #F0FFF0 | 淡绿调白 | |
| 薄荷白 | #F5FFFA | 淡青调白 | |
| 天蓝白 | #F0FFFF | 淡蓝调白 | |
| 爱丽丝蓝 | #F0F8FF | 极淡蓝色 | |
| 幽灵白 | #F8F8FF | 淡紫调白 | |
| 烟白 | #F5F5F5 | 次背景色 | |
| 贝壳白 | #FFF5EE | 淡粉调白 | |
| 米色 | #F5F5DC | 温暖背景 | |
| 老花边 | #FDF5E6 | 复古背景 | |
| 花白 | #FFFAF0 | 柔和背景 | |
| 象牙白 | #FFFFF0 | 淡黄调白 | |
| 古董白 | #FAEBD7 | 温暖白 | |
| 麻布白 | #FAF0E6 | 自然背景 | |
| 薰衣草腮红 | #FFF0F5 | 淡粉红 | |
| 迷雾玫瑰 | #FFE4E1 | 淡玫瑰色 |
⚫ 灰色系 - 中性与平衡
灰色系提供中性的背景和文本颜色，适合创造层次感和专业感。
| 预览 | 颜色名称 | 十六进制代码 | 推荐用途 |
|---|---|---|---|
| 恩斯伯勒灰 | #DCDCDC | 淡灰背景 | |
| 浅灰 | #D3D3D3 | 次要背景 | |
| 银灰 | #C0C0C0 | 边框分隔 | |
| 深灰 | #A9A9A9 | 次要文本 | |
| 标准灰 | #808080 | 正文文本 | |
| 暗灰 | #696969 | 强调文本 | |
| 浅石板灰 | #778899 | 蓝灰色调 | |
| 石板灰 | #708090 | 专业灰色 | |
| 深石板灰 | #2F4F4F | 深色背景 | |
| 纯黑 | #000000 | 主要文本 |
🟤 棕色系 - 温暖与自然
棕色系传达温暖、自然和稳重的感觉，适合自然、传统和舒适主题的设计。
| 预览 | 颜色名称 | 十六进制代码 | 推荐用途 |
|---|---|---|---|
| 玉米丝 | #FFF8DC | 淡黄背景 | |
| 杏仁白 | #FFEBCD | 温暖背景 | |
| 浓汤色 | #FFE4C4 | 淡橙背景 | |
| 纳瓦霍白 | #FFDEAD | 温暖米色 | |
| 小麦色 | #F5DEB3 | 自然背景 | |
| 浅棕色 | #DEB887 | 中等棕色 | |
| 棕褐色 | #D2B48C | 中性棕色 | |
| 玫瑰褐 | #BC8F8F | 粉棕色调 | |
| 沙棕色 | #F4A460 | 醒目棕色 | |
| 金菊色 | #DAA520 | 金黄棕色 | |
| 秘鲁色 | #CD853F | 温暖棕色 | |
| 巧克力色 | #D2691E | 深巧克力 | |
| 鞍棕色 | #8B4513 | 深棕色 | |
| 赭色 | #A0522D | 红棕色 | |
| 棕色 | #A52A2A | 标准棕色 | |
| 栗色 | #800000 | 深红棕色 |
🎯 使用建议
- 一致性 - 在整个项目或文档中使用一致的颜色编码系统
- 可访问性 - 确保颜色对比度符合WCAG标准，便于色盲用户阅读
- 语义化 - 使用颜色传达意义（红色表示警告，绿色表示成功等）
- 适度使用 - 避免过度使用鲜艳颜色，以免造成视觉疲劳
- 测试 - 在不同设备和照明条件下测试颜色显示效果
🔧 实用技巧
CSS中使用颜色
1 | .warning-box { |
Markdown中使用颜色
1 | <span style="color:#228B22;">绿色文字</span> |
希望这个颜色代码大全能帮助您在设计和开发中选择合适的颜色！🎨
相关推荐
评论