屏幕色温调节 - 全屏滤色叠加层
生成半透明暖色或冷色遮罩层叠加在页面上,模拟护眼模式或色温调节。
UD5工具箱
自定义滤蓝光 / 暖色护眼覆盖层,保护视力缓解疲劳
#FFA726 ·
覆盖强度 38%
蓝光是可见光谱中波长在380-500纳米之间的高能短波光线,广泛存在于阳光、LED屏幕、荧光灯等光源中。电子设备屏幕(手机、电脑、平板)是日常生活中蓝光的主要来源之一。
过滤蓝光的原因:
使用琥珀色或暖黄色色层覆盖屏幕,是过滤蓝光最直接有效的方式之一,被广泛应用于f.lux、Night Shift等知名护眼工具中。
本工具通过在网页最上层叠加一层固定定位的半透明色层来实现护眼效果。该色层覆盖整个浏览器视口,并使用CSS的pointer-events: none属性确保用户依然可以正常操作色层下方的所有网页元素。
技术原理:
position: fixed固定覆盖全屏,不随页面滚动而移动。该方案兼容所有主流浏览器,无需安装额外插件,开箱即用。
不同场景推荐的护眼色:
| 使用场景 | 推荐预设 | 建议强度 | 说明 |
|---|---|---|---|
| 白天办公 | 暖黄阅读 | 20%-30% | 轻微暖色,不明显影响色彩判断 |
| 傍晚/夜间 | 滤蓝光琥珀 | 35%-45% | 有效过滤蓝光,保护褪黑素分泌 |
| 深夜使用 | 深夜暗暖 | 45%-60% | 强力滤蓝光,营造温暖暗光环境 |
| 长时间阅读 | 护眼柔绿 | 25%-35% | 柔和绿色调,缓解视疲劳 |
| 代码/设计 | 自定义 | 15%-25% | 低强度,保留色彩准确性 |
琥珀色和暖黄色对蓝光的过滤效率最高,绿色虽对蓝光过滤较弱但对缓解视觉疲劳有独特优势。建议根据实际感受灵活调整。
在合理强度范围内(建议3%-55%),护眼色层对屏幕可读性的影响非常有限:
本工具特别设计了快速关闭按钮和一键开关,方便用户在需要时即时切换。
色温(单位:开尔文K)描述了光源的冷暖程度:
本工具的滤蓝光琥珀和深夜暗暖预设模拟了低色温环境(约3000K以下),有效减少蓝光暴露。护眼柔绿则通过另一种机制——利用人眼对绿色最敏感的特性——来减轻视觉负担。
建议白天使用中性色温,傍晚后逐步切换到低色温暖光,顺应人体自然生物节律。
软件滤蓝光(如本工具):
防蓝光眼镜:
建议:两者结合使用效果最佳。日常使用软件滤蓝光,需要精准色彩时依赖防蓝光眼镜,全方位保护眼睛健康。
除了使用护眼色层,以下护眼习惯同样重要:
护眼色层是综合护眼方案的一部分,配合良好习惯才能达到最佳效果。
是的,科学研究证实了这一效果。
人眼视网膜中的内在光敏视网膜神经节细胞(ipRGC)对蓝光特别敏感。当这些细胞感知到蓝光时,会向大脑的视交叉上核(生物钟中枢)发送信号,抑制褪黑素分泌,从而延迟睡意。
多项研究表明:
建议:睡前1-2小时启用滤蓝光琥珀或深夜暗暖预设,强度设置在40%-60%,可有效改善入睡质量和睡眠深度。
生成半透明暖色或冷色遮罩层叠加在页面上,模拟护眼模式或色温调节。
展示几组在各类色盲下仍可区分的定性数据配色方案,含Hex码。
为图片添加类似胶片漏光的红黄色调渐变或光晕效果,营造怀旧氛围。
请求和释放屏幕唤醒锁,并监听释放事件,适用于视频播放或演示场景。
将图片灰度化后,把阴影区域映射为一种颜色,高光映射为另一种,创造经典双色效果。
为照片四周添加纯色或渐变暗角,调整强度与羽化程度,营造复古或突出中心效果。
将屏幕变为纯白色或指定颜色,最高亮度辅助照明或信号。
创建 Shadow DOM 与普通 DOM 元素,对比样式隔离效果,理解 @layer 和 scoped styles。
请求Screen Wake Lock防止屏幕关闭,监听释放事件,适用于观看长内容等场景。
列出所有标准 CSS 光标值(pointer, grab, zoom-in 等),鼠标悬停实时查看对应光标样式并复制代码。
拖拽滑块调整背景模糊度、透明度与边框发光,实时预览毛玻璃面板并复制CSS代码。
制作像荧光笔划过的高亮背景或扫描下划线效果,导出类名。
输入HEX,从内置的Pantone色库中寻找最接近的彩通色号及名称。
调整透明度、模糊度和边框,实时预览毛玻璃UI卡片,生成兼容CSS backdrop-filter代码。
拖放 lcov.info 文件,以颜色标示每行代码的覆盖状态。
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
在线颜色选择器,支持从色盘取色、HEX/RGB/HSL颜色值转换,提供调色板功能,方便前端设计取色。
为图片添加CRT电视的扫描线、像素抖动和雪花噪点效果,营造怀旧氛围。
输入电源电压和LED串并配置,为每组LED计算所需的限流电阻值。
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案,确保视觉一致性。
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
拖拉RGB三个滑块混合颜色,模拟硬件调色体验,显示16进制及色温感觉。
支持任意格式颜色输入,计算对比度并显示WCAG 2.1各级别通过情况,含颜色建议。
上传两张图片,实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
叠加多重box-shadow,模拟不同光源方向,直观生成逼真阴影CSS代码。
拖拽基色指针,自动计算互补、近似、三等分等七种和谐配色方案,复制十六进制值。
输入文本,滑块调节letter-spacing和word-spacing,实时显示效果并复制CSS。
根据电源电压、LED正向电压和电流,计算所需串联限流电阻的阻值和功率。
选择触发位置、箭头方向与样式,生成轻量悬停提示框代码。
选择多张图片或纯色叠加,切换所有CSS混合模式并实时预览图层效果。