移动端背景色#ff9659显示暗淡，与桌面端效果差异问题咨询

问题描述 #

使用#ff9659作为页面固定顶部栏的背景色，桌面端显示明亮正常，但切换到移动端视图时，背景色变得暗淡无光。相关代码如下：

CSS代码 #

.site-promotion {
    position: fixed;
    background-color: #ff9659;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    color: #fff;
    font-size: 16px;
    padding: 10px 0;
    font-family: 'Gotham', sans-serif;
    cursor: pointer;
    text-align: center;
}

HTML代码 #

<div class="site-promotion">
<a href="" target="_blank" style="color:#fff;"> Brand new to HŌMTOWN Yoga? Click here</a>
</div>

桌面端效果：

移动端效果：

可能原因及解决办法 #

1. 移动端浏览器的颜色自动调整 #

部分移动端浏览器（如iOS Safari、Chrome移动端）会根据系统深色模式、高对比度模式等设置自动优化网页颜色，导致饱和度过低。可通过CSS强制保留原始颜色：

.site-promotion {
    /* 保留原有属性 */
    background-color: #ff9659;
    /* 强制浏览器不调整颜色 */
    color-adjust: exact;
    /* 或者明确指定sRGB颜色空间，避免色彩管理差异 */
    background-color: color(srgb 1 0.588 0.349);
}

2. 移动端媒体查询覆盖颜色 #

检查是否存在针对移动端的媒体查询规则，意外修改了.site-promotion的背景色。比如：

@media (max-width: 768px) {
    .site-promotion {
        background-color: #ccc; /* 这类规则会覆盖原始颜色 */
    }
}

若存在此类规则，删除或修改即可恢复原始颜色。

3. 设备系统显示设置影响 #

部分设备的“降低白点值”“色彩校正”等系统设置会全局调整屏幕显示效果，导致颜色暗淡。这种情况可建议用户检查系统设置，但开发者优先通过上述CSS方案从代码层面规避。

内容的提问来源于stack exchange，提问作者suresh