Hex颜色偏色主因是色彩空间不一致、系统级设置干扰、透明度叠加错觉及显示器未校准；需统一使用sRGB、关闭美化功能、在纯净环境中验证。
Hex颜色显示偏色，通常不是代码写错了，而是颜色空间、显示器校准或CSS渲染上下文导致的视觉偏差。六位十六进制（如 #FF5733）本身是精确值，但“看起来不一样”往往出在环境而非数值本身。
确认你用的是标准sRGB色彩空间
Hex颜色默认基于sRGB——这是Web的标准色彩空间。如果你的设计稿在Adobe RGB、Display P3或ProPhoto RGB中取色，直接转成hex会明显偏暗/偏艳。
- 在Photoshop中：编辑 → 颜色设置 → 工作空间 → RGB → 设为“sRGB IEC61966-2.1”
- 在Figma/Sketch中：导出前确保画布色彩配置为sRGB（多数默认已是）
- 浏览器只认sRGB，其他空间的hex值不会自动转换，必须手动转色
检查是否被CSS color-scheme 或 forced-colors 干扰
某些系统级设置（如Windows深色模式、macOS高对比度、浏览器“强制颜色”）会覆盖你写的hex颜色。
- 在开发者工具中选中元素，看Computed面板里color值是否被
forced-color-adjust: auto或color-scheme: dark影响 - 临时加
color-scheme: only light;或forced-color-adjust: none;测试是否恢复 - 避免在全局:root里用
color-scheme: dark;却不配深色变量
排查透明度与叠加背景造成的错觉
看似偏色，实际是alpha混合或父级背景透出所致。例如：
立即学习“前端免费学习笔记（深入）”；
-
background-color: #FF5733;写在半透明白色卡片上，看起来发粉 -
color: #333;在浅灰背景（#f8f9fa）上，对比度不足，显得发灰 - 用
rgba()或hsla()时误把hex当带透明度使用（hex本身不支持透明）
解决方法：在纯白/纯黑背景下单独预览该颜色块，关闭所有父级filter、backdrop-filter、opacity干扰。
校准显示器并禁用厂商美化功能
很多笔记本和手机出厂开启“鲜艳模式”“动态对比度”“HDR模拟”，会让hex在屏幕上严重失真。
- Windows：设置 → 系统 → 显示 → “颜色管理” → 添加配置文件 → 选sRGB IEC61966-2.1
- Mac：系统设置 → 显示器 → 颜色 → 选“sRGB”或“Apple Display”（非“Ultra HD”等增强模式）
- 关闭NVIDIA/AMD控制面板里的“数字振动”“肤色增强”“动态亮度”
用在线工具如 colorhexa.com 输入你的hex，查看sRGB分量与人眼感知亮度（L*值），比对设计稿中标注的Lab值更可靠。
基本上就这些。Hex本身没问题，偏色是环境在“说话”。统一用sRGB取色、关掉系统美化、在干净上下文中验证，颜色就能稳稳落在你想要的位置。
