UD5工具箱
漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果，营造怀旧氛围。
🎨 颜色隔离效果
保留单色，其余黑白 — 在线图片颜色隔离工具，支持取色与实时预览
📤 上传图片
点击上传或拖拽图片
支持 JPG / PNG / WebP
🎯 保留颜色
#E74C3C
RGB(231, 76, 60)
🎨 预设颜色
📏 颜色容差
25
精确匹配
宽松匹配
🔄 处理模式
正向：保留选中颜色
原图（点击可取色）
隔离效果
上传图片后显示
处理结果将显示在此
📖 常见问题与知识点
颜色隔离效果，也称为色彩突出或选择性色彩，是一种图像处理技术：保留画面中某一特定颜色，其余部分全部转换为黑白灰度。这种手法能极大突出主体、引导视线，广泛用于摄影后期、海报设计和社交媒体创意图片中。
上传图片后，在原图上移动鼠标会显示取色光标，光标边框实时反映悬停像素的颜色。直接点击图片即可锁定该颜色。也可以使用内置的颜色选择器手动调色，或从预设颜色中快速选择红、蓝、绿等常用色。
容差控制颜色匹配的宽松程度。容差越低（接近0），只有与目标颜色几乎完全一致的像素被保留；容差越高（接近100），相近的颜色也会被保留。建议从默认值25开始，根据效果微调。对于渐变或光照不均的区域，适当提高容差可获得更自然的过渡。
正向模式：保留选中颜色，其余部分转为黑白（突出目标色）。反向模式：仅将选中颜色转为黑白，其余保持彩色。反向模式适合你想弱化画面中某个刺眼颜色、或创造独特艺术效果的场景。
支持 JPG、PNG、WebP 等主流格式。图片在浏览器本地处理，不会上传到服务器，确保隐私安全。处理后的图片以PNG格式下载，保留透明通道（如有）。大尺寸图片会自动缩放处理以保证流畅体验，最大处理尺寸为1200px。
常见应用包括：突出人物服装色彩、强调红色花朵或果实、保留车辆或建筑标志色、制作电影海报风格图片、产品展示中突出品牌色、社交媒体中创造视觉冲击力强的"色彩聚焦"效果等。
可能原因：①容差设置过低，尝试提高容差；②图片中的颜色因光照、阴影呈现不同色调，属于正常现象——适当放宽容差即可覆盖；③图片颜色空间差异。建议在原图上用取色器直接点击目标区域获取最准确的颜色值。
完全支持！移动端触摸屏幕即可在原图上点击取色，所有滑块和按钮都针对触屏优化。处理过程同样在手机浏览器本地完成，无需网络传输。
色盲友好调色板 - 定性数据配色推荐
展示几组在各类色盲下仍可区分的定性数据配色方案，含Hex码。
毛玻璃面板生成器 - 模糊/透明度/边框精细调节
拖拽滑块调整背景模糊度、透明度与边框发光，实时预览毛玻璃面板并复制CSS代码。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
点彩画效果生成器 - Voronoi格子点描风格
通过加权Voronoi点算法将图片转换为类似针笔画的黑白点描艺术效果。
全屏护眼色层 - 自定义滤蓝光/暖色
在网页顶部添加半透明暖色或暗色覆盖层，调节不透明度，降低屏幕刺眼感。
屏幕色温调节 - 全屏滤色叠加层
生成半透明暖色或冷色遮罩层叠加在页面上，模拟护眼模式或色温调节。
Oklch调色板生成器 - 感知均匀色彩搭配
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案，确保视觉一致性。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
像素绘板 - 网格填色与动画帧
在可缩放网格上选区颜色绘制像素图，支持多帧预览简单动画。
调色板导出为 Tailwind 配置 - 从图片/手动生成色阶
从一个基色或图片提取的颜色，自动生成 50-950 的色阶并导出为 Tailwind CSS 配置。
双色调效果生成 - 高光阴影颜色映射
将图片灰度化后，把阴影区域映射为一种颜色，高光映射为另一种，创造经典双色效果。
Tailwind 调色板可视化浏览器 - 所有色阶一览
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶，点击复制类名或色值。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
老电视效果滤镜 - 图片添加扫描线雪花
为图片添加CRT电视的扫描线、像素抖动和雪花噪点效果，营造怀旧氛围。
自定义下拉选择框美化 - 取代原生select
创建带有向下箭头和自定选项风格的自定义选择框HTML+CSS代码。
CSS 滤镜预设画廊 - 一键复制复古/鲜艳等效果
展示多种组合好的 CSS filter 效果（如 1977、古铜色），点击图片应用并复制代码。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
渐变网格着色器 - 多点自由色渐变
在画布上放置多个色点，颜色平滑插值形成类似矢量网格渐变的梦幻背景。
正则匹配交互式高亮器 - 实时多颜色分组
编写正则表达式，在文本中用不同颜色高亮整个匹配和每个捕获组。
代码审查清单动态生成 - 按语言和项目定制
选择编程语言和关注领域（安全、性能、可读性），生成定制化的代码审查核对表。
Etch A Sketch电子画板 - 旋钮控制绘图
模拟经典玩具，按方向键或虚拟旋钮绘制线条，按空格键晃动清除。
HTML空格实体可视化 - 查看不可见空白
显示文本中的非换行空格、全角空格等隐藏字符映射。
视差背景生成器 - 纯 CSS 多层效果
上传图片并设置层位置和滚动速度，生成纯 CSS 的多层视差滚动背景代码。
文本换行优化器 - 标题漂亮折行预览
输入标题文本，尝试不同容器宽度，手动插入<br>或使用text-wrap:balance显示效果。
CSS 系统颜色演示 - Canvas/Window/Highlight 等
展示 CSS 系统颜色关键字（如 CanvasText, LinkText）在明暗模式下的实际渲染值。
在线颜色选择器 - 拾色器与调色板工具
在线颜色选择器，支持从色盘取色、HEX/RGB/HSL颜色值转换，提供调色板功能，方便前端设计取色。
配色环和谐规则可视化 - 实时补色与分裂互补
拖拽基色指针，自动计算互补、近似、三等分等七种和谐配色方案，复制十六进制值。
多层阴影层设计器 - 拟物化/纸雕效果
添加多个阴影层，独立调节每层的偏移、模糊、扩展和颜色，创造复杂立体效果。
毛玻璃效果生成器 - CSS Glassmorphism在线
调整透明度、模糊度和边框，实时预览毛玻璃UI卡片，生成兼容CSS backdrop-filter代码。