OLED屏幕对CSS颜色敏感，因每个像素自发光，纯黑（如#000、rgb(0,0,0)、black）可彻底关闭像素、功耗为0；而hsl(0,0%,0%)等写法在部分浏览器中可能转译为rgb(2,2,2)等非零值，导致微亮耗电。
为什么OLED屏幕对CSS颜色敏感
OLED每个像素自发光，黑色像素完全关闭、功耗为0；而白色像素需全子像素点亮，功耗最高。这意味着#000000（纯黑）比#010101或rgb(1,1,1)省电得多——后者仍会微弱驱动红绿蓝子像素。iOS和Android系统本身不干预网页渲染的像素级供电，但浏览器最终输出的RGBA值会直接映射到物理像素，所以CSS里写的“黑”，必须是真正关断所有通道的黑。
哪些CSS颜色值在OLED上最省电
关键不是“看起来黑”，而是“让R/G/B/A通道实际输出0”。以下写法等效且最优：
-
color: #000或color: #000000—— 有效，十六进制全零 -
color: rgb(0, 0, 0)—— 有效，整数通道全0 -
color: rgba(0, 0, 0, 1)—— 有效，alpha=1不影响RGB关断 -
color: black—— 有效，CSS标准关键字，等价于#000
这些都会触发OLED像素彻底熄灭。但注意：hsl(0, 0%, 0%)和hwb(0, 0%, 0%)虽视觉为黑，部分浏览器（尤其旧版Safari）可能转译为近似rgb(1,1,1)，导致微功耗——实测中hsl在iOS 16.5 Safari里渲染出的像素值为rgb(2,2,2)，不可靠。
哪些“看似黑”的写法反而费电
常见踩坑点集中在透明度、色空间转换和缩写模糊性：
立即学习“前端免费学习笔记（深入）”；
-
color: rgba(0,0,0,0.99)—— alphargb(10,10,10) -
color: #00000080（8位hex with alpha）—— 即使RGB为0，部分Android WebView会错误解析为半透层，叠加背景后迫使像素点亮 -
background-color: transparent—— 若父容器有背景，实际像素仍显示父层颜色；真正省电需显式设为#000并确保无叠加 -
color: currentColor—— 若继承自非纯黑值（如body { color: #111; }），则无效
移动端适配建议与验证方法
不能只信开发者工具的颜色预览——它不反映真实像素供电状态。实测建议：
- 用iPhone在暗室下，将页面放大至200%，肉眼观察纯黑区域是否“彻底消失”（无泛灰光晕）；若有微光，说明存在非零RGB值
- 使用Android的
adb shell dumpsys display查看当前帧buffer中0x000000像素占比，或用gfxinfo对比不同CSS写法下的GPU绘制耗时差异（间接反映像素激活量） - 避免CSS变量动态计算黑色：
--dark: hsl(240, 5%, 5%); color: var(--dark);→ 改为--dark: #000; color: var(--dark);
真正的省电黑，必须是字面量级的0，而不是“足够暗”。任何中间计算、插值、继承或透明度操作，都可能让OLED悄悄亮起。
