UD5工具箱
全屏护眼色层 - 自定义滤蓝光/暖色
在网页顶部添加半透明暖色或暗色覆盖层，调节不透明度，降低屏幕刺眼感。
屏幕色温调节
在全屏滤色叠加层中模拟不同色温，体验护眼与视觉效果。
暖色 1000K
6500K
冷色 10000K
0%
50%
100%
“全屏预览”将滤镜层应用到整个浏览器视口，体验真实屏幕效果。
示例文本预览
这段话将实时反映色温过滤后的效果。调整左侧色温滑块，观察文字和背景的变化，仿佛你的屏幕正在开启护眼模式或夜间模式。
图片示例
视频缩略图
文字区域
知识小贴士：色温越低，光线越偏黄/红，适合夜间使用；色温越高，光线越偏蓝，适合白天提神。
常见问题
色温（单位：开尔文 K）描述光源发出的光的颜色倾向。低色温（< 3000K）偏暖（黄/红），类似黄昏或烛光，能促进褪黑素分泌，适合夜间放松；高色温（> 5000K）偏冷（蓝），类似正午日光，有助于提高警觉性。屏幕长时间使用过高色温可能导致眼疲劳，调节色温可以减轻不适。
我们根据色温值换算成 RGB 颜色，并添加透明度作为滤镜强度。该半透明彩色层覆盖在整个显示区域上方，通过光学混合改变底层内容的视觉色温，与物理滤光片或软件夜间模式的原理相同。
普通预览仅在工具内的示例区域显示滤色效果。点击“全屏预览”后，一个固定定位的叠加层会覆盖整个浏览器视口，让你体验真实全屏阅读或工作的色温效果。按 ESC 或再次点击按钮可退出全屏预览。
适当降低夜间屏幕的蓝光（降低色温）可减少对褪黑素的抑制，改善睡眠质量，并缓解数码眼疲劳。许多操作系统已内置夜间模式，本工具帮助你预览和选择最舒适的色温与强度。
本工具仅用于预览和演示。若需在实际系统中应用，可使用操作系统内置的“夜间模式/护眼模式”，或安装第三方软件如 f.lux、Iris 等，它们能全局调节屏幕色温。
屏幕唤醒锁测试 - 保持常亮及事件监听
请求和释放屏幕唤醒锁，并监听释放事件，适用于视频播放或演示场景。
HSL 颜色微调器 - 滑块调节色相/饱和度/亮度
使用三个滑块精细调整 HSL 各分量，实时预览颜色并复制十六进制或 RGB。
屏幕唤醒锁测试器 - 保持常亮应用演示
请求Screen Wake Lock防止屏幕关闭，监听释放事件，适用于观看长内容等场景。
屏幕手电筒 - 纯色高亮显示
将屏幕变为纯白色或指定颜色，最高亮度辅助照明或信号。
双色调效果生成 - 高光阴影颜色映射
将图片灰度化后，把阴影区域映射为一种颜色，高光映射为另一种，创造经典双色效果。
颜色隔离效果 - 保留单色其余黑白
选择一种颜色，图片仅保留该色相区域，其余转换为黑白，突出主体。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案，含Hex码。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
在线颜色选择器 - 拾色器与调色板工具
在线颜色选择器，支持从色盘取色、HEX/RGB/HSL颜色值转换，提供调色板功能，方便前端设计取色。
毛玻璃面板生成器 - 模糊/透明度/边框精细调节
拖拽滑块调整背景模糊度、透明度与边框发光，实时预览毛玻璃面板并复制CSS代码。
Tailwind 调色板可视化浏览器 - 所有色阶一览
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶，点击复制类名或色值。
漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果，营造怀旧氛围。
CSS 系统颜色演示 - Canvas/Window/Highlight 等
展示 CSS 系统颜色关键字（如 CanvasText, LinkText）在明暗模式下的实际渲染值。
HTML5 视频字幕同步辅助工具 - 在线调整 WebVTT
加载视频和 VTT 字幕文件，允许全局偏移时间轴或逐条修改，实时预览同步效果。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
毛玻璃效果生成器 - CSS Glassmorphism在线
调整透明度、模糊度和边框，实时预览毛玻璃UI卡片，生成兼容CSS backdrop-filter代码。
图片暗角效果工具 - 在线添加Vignette晕影
为照片四周添加纯色或渐变暗角，调整强度与羽化程度，营造复古或突出中心效果。
视差背景生成器 - 纯 CSS 多层效果
上传图片并设置层位置和滚动速度，生成纯 CSS 的多层视差滚动背景代码。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
正则匹配交互式高亮器 - 实时多颜色分组
编写正则表达式，在文本中用不同颜色高亮整个匹配和每个捕获组。
RGB调色滑块模拟 - 像控制LED灯带一样调色
拖拉RGB三个滑块混合颜色，模拟硬件调色体验，显示16进制及色温感觉。
字距与字偶距预览器 - 实时调节CSS letter-spacing
输入文本，滑块调节letter-spacing和word-spacing，实时显示效果并复制CSS。
Oklch调色板生成器 - 感知均匀色彩搭配
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案，确保视觉一致性。
调色板导出为 Tailwind 配置 - 从图片/手动生成色阶
从一个基色或图片提取的颜色，自动生成 50-950 的色阶并导出为 Tailwind CSS 配置。
屏幕标尺量角器 - 叠加元素测量长宽角度
可拖拽的虚拟尺子和量角器叠于当前页面，精确测量像素长度与旋转角度。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
屏幕常亮锁工具 - Wake Lock API演示
请求浏览器保持屏幕唤醒，防止自动锁屏，显示当前唤醒锁状态。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。