HEX与RGB颜色代码基础
网页设计中最常用的两种颜色表示方式是HEX（十六进制）和RGB（红绿蓝）。HEX代码以#开头，由6位字符组成，每两位分别代表红、绿、蓝的强度值，比如#FF5733表示一种橙红色。RGB则是通过0-255的数字组合定义颜色，例如rgb(255, 87, 51)对应同样的颜色。
rgba(255, 87, 51, 0.7)能实现70%不透明度| 颜色名称 | HEX代码 | RGB值 |
|---|---|---|
| 经典蓝 | #0F4C81 | 15,76,129 |
| 活力橙 | #FF6B35 | 255,107,53 |
网页安全色与趋势配色
216种网页安全色是早期显示器时代的产物，现在随着设备升级已不再必需，但某些场景仍值得参考。当前主流趋势包括：
#121212作为基底，文字用#E0E0E0保证可读性#4285F4到#9B72CB）最近Adobe发布的2024年度色彩报告显示，柔和的中性色使用量同比增长37%，特别是灰粉色（HEX: #D8B4A0）在电商着陆页的应用效果突出。
实用配色工具推荐
调试时记得检查WCAG对比度标准，正文文本与背景的对比度至少达到4.5:1。Chrome开发者工具的Color Picker面板内置了实时对比度检测功能，比AA/AAA标准线更直观。
常见场景配色方案
企业官网
通常采用主色+2-3种辅助色，主色占比60%-70%。科技类企业偏好蓝色系（如#1DA1F2），教育机构常用深绿（#2E8B57）传递稳重感。
电商促销页需要强对比刺激消费：
#FF4136配白色文字#FFF2CC移动端H5页面要注意色彩振动问题，避免使用饱和度100%的红色（#FF0000）与蓝色（#0000FF）相邻组合，这会导致边缘出现视觉残影。
移动端屏幕普遍采用广色域显示技术，像OLED屏的色彩覆盖率能达到110%-130% NTSC，这会让原本在电脑上看着正常的颜色变得刺眼。特别是高饱和度的红色（#FF0000）和蓝色（#0000FF），在手机上会显得特别”炸”，就像开了美颜滤镜一样失真。
设计师可以试试这几个实用技巧：把饱和度调低5%-10%，比如把正红改成#EE3B3B；使用HSL色彩模式调整更直观，把饱和度S值控制在75%-90%之间；针对不同设备做适配时，可以用@media (color-gamut: p3)来检测广色域屏幕，单独设置一套柔和些的配色方案。记得在真机上测试效果，模拟器往往显示不出这种差异。
常见问题解答
HEX和RGB颜色代码有什么区别？
HEX代码是6位十六进制数，格式为#RRGGBB，适合网页快速使用；RGB通过0-255的数字组合表示颜色，格式为rgb(R,G,B)，最大优势是支持透明度调节（RGBA）。两者可以互相转换，本质上表示的是同一种颜色体系。
如何选择网页安全色？
现代设备已基本支持全色域显示，216网页安全色不再是强制标准。但在电子看板、老旧设备等特殊场景， 仍使用网页安全色。可以通过Photoshop的”Web安全色”选项或在线工具ColorSafe来筛选这些颜色。
为什么我的网站在手机上显示颜色过艳？
这通常是由于移动设备屏幕色域更广导致的。解决方法：在设计时避免使用100%饱和度的颜色（特别是红色和蓝色）， 将饱和度控制在85%-95%之间；使用CSS的color-gamut媒体查询针对不同设备做适配。
深色模式应该用什么背景色？
纯黑(#000000)会产生强烈对比疲劳，推荐使用深灰系：#121212到#1E1E1E范围最佳。文字颜色 使用#E0E0E0或#FFFFFF，确保WCAG对比度至少达到4.5:1的标准。
如何快速获取网页上的颜色代码？
安装ColorZilla浏览器插件，或使用Chrome开发者工具（F12调出）：在Elements面板选中元素后，Styles标签下的color属性旁有色块，点击即可调出取色器并显示HEX/RGB代码。
