低色域屏颜色失真需强制srgb渲染：声明color-scheme元标签与css、禁用广色域函数、嵌入srgb icc配置、js探测降级、canvas锚定srgb色彩空间。
如果您在低色域显示屏上使用HTML函数工具时发现颜色失真、偏灰或饱和度严重不足，则可能是由于浏览器未正确应用色彩配置文件，或HTML/CSS未适配sRGB以外的色彩空间。以下是实现正常显示的多种技术路径：
一、强制声明sRGB色彩空间
低色域屏（如多数TN面板、老旧笔记本屏）默认仅支持sRGB色域，但部分HTML渲染引擎可能因元数据缺失而启用宽色域假设，导致颜色压缩异常。通过显式声明可锁定渲染基准。
1、在HTML文档的
中插入标准色彩描述元标签：2、添加以启用系统级色彩提示。
3、在CSS根选择器中设置color-scheme: light dark；并为所有颜色值使用sRGB语法（如#RRGGBB、rgb(r,g,b)而非display-p3）。
二、禁用CSS宽色域函数
现代CSS支持display-p3、rec2020等广色域函数，但在低色域屏上会被错误映射，造成对比度塌陷与色相漂移。必须彻底排除此类函数的隐式调用。
1、全局搜索项目中所有color-mix()、color()、lab()、lch()、oklab()、oklch()调用，全部替换为rgb()或hsl()。
2、检查CSS变量定义，确保无--accent-color: color(display-p3 0.8 0.2 0.3); 类似声明。
3、移除所有@media (color-gamut: p3) { ... } 媒体查询区块及其内部样式。
三、嵌入sRGB ICC配置文件
部分浏览器（如Chrome 117+）在检测到时会主动加载嵌入式ICC配置，强制将页面色彩输出约束至sRGB色域边界，避免硬件层过驱动。
1、下载标准sRGB IEC61966-2.1.icc文件（大小约3KB），存放于项目/static/icc/目录下。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
2、在HTML
中添加链接：<link rel="color-scheme" href="/static/icc/sRGB_IEC61966-2.1.icc">。
3、验证是否生效：打开开发者工具 → Rendering → 勾选“Emulate CSS color-gamut”并设为srgb，观察颜色变化是否收敛。
四、JavaScript运行时色域探测与降级
通过Window API获取当前设备色域能力，并动态切换CSS类名，实现无感降级。该方法绕过浏览器自动适配缺陷，由脚本精确控制。
1、执行const gamut = window.matchMedia('(color-gamut: srgb)').matches;判断是否处于sRGB受限环境。
2、若返回true，在document.documentElement上添加class="low-gamut"。
3、编写对应CSS规则：.low-gamut :is([style*="color"], [style*="background"]) { color-adjust: exact; }，并重载所有渐变、滤镜、阴影为sRGB线性插值版本。
五、Canvas 2D上下文色彩锚定
HTML Canvas在低色域屏上默认启用硬件加速色彩转换，易导致drawImage()、fillStyle、createLinearGradient()输出溢色。需手动锁定像素级色彩空间。
1、创建canvas时传入{ colorSpace: 'srgb' }选项：const ctx = canvas.getContext('2d', { colorSpace: 'srgb' });
2、所有图像绘制前调用ctx.imageSmoothingQuality = 'low';防止双线性插值引入非sRGB中间色。
3、使用ctx.fillStyle = 'rgb(255, 128, 64)';而非ctx.fillStyle = '#ff8040';，规避十六进制解析阶段的潜在色彩空间歧义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
