无需登录 数据私有 本地保存

渐变网格着色器 - 多点自由色渐变

12
0
0
0
点击画布添加色点  |  拖动移动  |  双击删除色点
预设渐变方案
当前画笔颜色
点击画布以此颜色添加新色点
渐变参数
插值强度 (Power) 2.0
值越小过渡越平滑，越大越锐利分明
显示网格线
HSL 插值模式
HSL模式色彩过渡更自然，但计算稍慢
色点列表 (0个)
点击画布添加色点
最多支持20个色点
导出分辨率: 800×500px
常见问题与知识点
多点自由色渐变使用反距离加权插值（IDW - Inverse Distance Weighting）算法。画布上每个像素的颜色由所有色点共同决定——距离某个色点越近，该色点对该像素的颜色影响就越大。通过调整插值强度（Power）参数可以控制过渡的平滑程度：Power值越低，各色点颜色混合越均匀柔和；Power值越高，色点之间的分界越清晰锐利，趋向于Voronoi图效果。这种技术在数据可视化、地形建模、气象图绘制等领域广泛应用。
使用非常简单：
1️⃣ 在画布上点击任意位置即可添加一个色点，使用当前画笔颜色；
2️⃣ 拖动色点可以自由移动位置，实时查看渐变变化；
3️⃣ 双击色点或点击列表中的删除按钮可移除色点；
4️⃣ 在右侧面板中可单独修改每个色点的颜色；
5️⃣ 调整插值强度滑块改变过渡风格；
6️⃣ 使用预设方案快速获得精美的渐变效果；
7️⃣ 点击导出PNG保存高清渐变图片。
RGB模式直接在红、绿、蓝三个通道上分别进行加权平均，计算速度快，但在处理互补色（如红与青、蓝与黄）时，中间过渡可能出现灰暗色调。

HSL模式将颜色转换到色相（Hue）、饱和度（Saturation）、亮度（Lightness）空间进行插值，色相采用角度最短路径插值，能产生更加鲜艳、自然的色彩过渡，特别适合艺术创作和设计场景。不过HSL模式计算量稍大，在色点较多时渲染略慢。
🎨 颜色搭配：选择色相环上相邻的颜色（如暖色系或冷色系），过渡会更和谐；大胆使用对比色可创造戏剧性效果。
📍 色点分布：将色点散布在画布不同区域，避免全部集中在同一角落，这样渐变更有层次感。
⚡ 插值强度：设计柔和的背景时使用1.5-2.5的Power值；想要锐利的分区和色彩碰撞效果时使用3-5的高Power值。
🔢 色点数量：3-6个色点通常效果最佳，太少缺乏层次，太多则色彩混杂。
🖼️ 应用场景：生成的渐变可导出为PNG，用作网页背景、海报底图、UI设计素材、壁纸等。
📥 点击导出PNG按钮即可下载，导出格式为PNG（无损压缩），分辨率固定为800×500像素。导出内容为纯渐变画面（不含网格线和色点标记），可直接用于设计项目。如需更高分辨率或带网格线的版本，欢迎在反馈中告诉我们，后续会持续优化导出功能。导出文件名包含时间戳，方便版本管理。
✅ 完全支持移动端！本工具针对触屏设备进行了专门优化：
• 支持触摸拖动色点，操作流畅；
• 触屏上的色点命中区域自动放大，方便手指操作；
• 界面采用响应式布局，在手机和平板上自动调整为上下结构；
• 导出功能在移动端同样可用，生成的PNG可保存到相册或分享。建议在横屏模式下使用以获得更大的画布操作空间。
🔧 相关工具