设计网页时，想让按钮显示纯净的红色，写了 “red” 却发现颜色偏暗；制作 APP 界面，设计师给的蓝色样品，自己输入代码后显示的色调总差一点。如果你也被这些颜色匹配的问题困扰，那一定得了解颜色的十六进制代码。今天就来聊聊常见颜色的十六进制代码是什么，以及它们在实际开发中的用法。
颜色十六进制代码是一种用十六进制数字表示颜色的方式，开头通常带一个 “#”，后面跟着 6 位数字（或 3 位简写，如 #f00 等同于 #ff0000）。这 6 位数字分为三组，分别代表红色、绿色、蓝色的亮度（从 00 到 ff，对应十进制的 0 到 255）。掌握这些代码，能让开发者精准还原设计稿的颜色，避免因 “red”“blue” 等英文单词表示的颜色不精准而出现的偏差，让界面视觉效果更统一。
一、常见颜色的十六进制代码及含义
- 基础色
- 纯黑：#000000（红、绿、蓝三种颜色亮度都为 0，混合后为黑色）
- 纯白：#FFFFFF（三种颜色亮度都达到最大，混合后为白色）
- 红色：#FF0000（只有红色亮度最大，其他为 0）
- 绿色：#00FF00（只有绿色亮度最大）
- 蓝色：#0000FF（只有蓝色亮度最大）
- 黄色：#FFFF00（红色和绿色亮度最大，混合成黄色）
- 紫色：#FF00FF（红色和蓝色混合）
- 青色：#00FFFF（绿色和蓝色混合）
- 常用中性色（灰色系）
- 深灰：#333333
- 中灰：#666666
- 浅灰：#EEEEEE
- 接近白的浅灰：#F5F5F5
- 实用色彩
- 橙色：#FFA500（常用于警示、提醒按钮）
- 粉色：#FFC0CB（常用于女性相关主题）
- 棕色：#A52A2A（常用于复古风格设计）
- 深蓝色：#0000CD（常用于专业、稳重的界面元素）
- 草绿色：#32CD32（常用于成功状态提示）
二、实际案例：用十六进制代码实现精准配色
做一个电商 APP 的 “加入购物车” 按钮时，设计师要求按钮为 “珊瑚红”，色值为 #FF7F50。
- 错误做法：直接用background-color: red;，显示的红色偏鲜艳，和设计稿不符。
- 正确做法：使用十六进制代码background-color: #FF7F50;，按钮颜色和设计稿完全一致。
- 拓展：如果想让按钮点击时颜色变深一点，可以用 #E9967A（比珊瑚红的红色和绿色亮度稍低），代码如下：
| .button {
background-color: #FF7F50; /* 正常状态 */ } .button:active { background-color: #E9967A; /* 点击状态 */ } |
三、常见误区与使用技巧
- 误区一：混淆大小写
十六进制代码中的字母（A-F）大小写不影响显示效果，#FF0000 和 #ff0000 表示同一种红色。但为了代码规范，建议统一用大写或小写（通常小写更常见）。
- 误区二：认为 3 位代码和 6 位代码完全一致
3 位简写是 6 位代码中每两位相同的简化，比如 #F00 等同于 #FF0000，但如果是 #FC0，等同于 #FFCC00，而非 #FC0000。新手容易记混，使用时最好对照完整 6 位代码。
- 技巧：借助工具获取代码
如果不知道某个颜色的十六进制代码，可以用截图工具（如微信截图、Snipaste）取色，鼠标放在颜色上会显示对应的十六进制代码；也可以用在线调色板（如 Adobe Color）选择颜色后直接复制代码。
常见颜色的十六进制代码是设计和开发之间的 “沟通语言”，精准使用能让界面效果更符合预期。记住那些常用的代码，能提高开发效率，避免反复调试颜色。你在开发中常用哪些颜色的十六进制代码？或者有什么取色小技巧？欢迎在评论区分享。
评论