如果您将PSD文件切图并转换为HTML5页面后发现颜色失真，通常是由于RGB色彩空间配置不一致、浏览器渲染差异或图像导出设置不当导致。以下是几种可立即实施的色彩校正操作：
一、检查并统一PSD文档色彩配置
Photoshop默认可能启用“色彩管理”策略，而导出为Web格式时若未匹配sRGB IEC61966-2.1配置，会导致HTML中显示偏色。需确保整个工作流基于标准Web色彩空间。
1、在Photoshop中打开PSD文件，点击菜单栏编辑 → 颜色设置。
2、在弹出窗口中将RGB下拉菜单设为“sRGB IEC61966-2.1”，并勾选“将嵌入配置文件”和“转换为所配置的RGB”。
立即学习“前端免费学习笔记（深入）”；
3、点击“确定”保存设置，然后重新执行切图导出流程。
二、导出图像时禁用ICC配置文件嵌入
部分导出插件（如Export As、Save for Web）会默认嵌入ICC色彩描述文件，而多数浏览器在HTML中忽略该信息，造成视觉偏差。手动关闭嵌入可强制使用sRGB解释。
1、使用文件 → 导出 → 导出为（或旧版“存储为Web所用格式”）打开导出面板。
2、在导出选项中找到“ICC配置文件”复选框，确保其处于未勾选状态。
3、点击“全部导出”或“保存”，生成不含色彩描述的PNG/JPEG文件。
三、在CSS中强制声明sRGB色彩空间
现代浏览器支持color()函数与预定义色彩空间声明，可在CSS中显式指定sRGB输出，覆盖系统默认渲染逻辑。
1、在HTML的
2、对背景、文字等属性使用color(display-p3 r g b)语法前，先确认对应值已按sRGB映射重算；更稳妥方式是直接采用十六进制色值，如#3498db而非命名色或HSL。
3、在CSS根元素中加入：:root { color-scheme: srgb; }。
四、校验浏览器渲染模式与硬件加速状态
某些浏览器（特别是Chrome 110+及Edge）在开启GPU加速或使用HDR显示器时，可能启用Display P3色彩空间进行合成，干扰sRGB内容呈现。
1、在浏览器地址栏输入chrome://flags/#force-color-profile（Chrome/Edge）或about:config（Firefox）。
2、搜索关键词“force-color-profile”，将其设为“sRGB”并重启浏览器。
3、临时禁用硬件加速：进入浏览器设置→系统→关闭“使用硬件加速模式（如果可用）”，重启后比对颜色变化。
五、使用CSS滤镜进行像素级微调
当上述方法仍存在轻微偏差（如灰阶发青、红色饱和度不足），可通过CSS filter中的brightness、contrast、saturate及hue-rotate组合实现非破坏性视觉补偿。
1、选中需校正的HTML元素，例如一个
2、为其添加内联样式或类样式：filter: brightness(1.02) saturate(0.98) hue-rotate(-0.5deg);。
3、在开发者工具中实时拖动filter参数滑块，观察颜色还原效果，仅保留生效项并写入正式CSS。
