Colir

什么是 Colir？

Colir 是一个基于 Web 的渐变生成器，让您使用基于曲线的控制创建自定义渐变，而不是固定的线性或径向规则。它使用 GPU 加速实时渲染渐变，并提供视觉效果和混合模式来优化最终外观。

Colir 的核心目的是帮助设计师和创作者生成具有更可控流动性和纹理的渐变（并减少如条带等视觉伪影），然后导出用于项目。

主要功能

• X/Y 曲线控制渐变流动：编辑两条曲线（一条 X 轴，一条 Y 轴）来塑造颜色在画布上的移动方式，实现超出简单线性或径向渐变的效果。
• 实时 WebGL 渲染：渐变使用 GPU 加速的 WebGL 交互式更新，支持更高分辨率下的流畅编辑，无需渲染等待。
• 12 种混合模式实现分层效果：应用多种混合模式（如 Multiply、Screen、Overlay、Difference），并与曲线结合改变渐变层的交互方式。
• 视觉效果控制纹理和边缘：使用包括 噪声（减少条带）、羽化（柔化边缘）、闪光、扭曲 和 图案 等效果，每种效果均有自己的混合模式。
• 调色板预设和颜色停止点：从 9 个内置调色板 开始（基于 Vibrant、Warm、Cool、Complementary 等类别），然后通过在渐变条上添加和移动颜色停止点进行微调。
• 高分辨率导出选项：以 PNG 或 WebP 格式导出渐变，支持可选缩放因子（1× 至 4×）。

如何使用 Colir

1. 在 Colir 中 开始新渐变。
2. 使用内置预设或颜色选择器 挑选颜色，然后在渐变条上 添加/移动颜色停止点。
3. 调整曲线：点击添加点并拖动重塑 X 和 Y 曲线，控制渐变流动。
4. 应用滤镜/效果（噪声、羽化、闪光、扭曲、图案），通过强度设置和混合模式优化。
5. 导出 结果为 PNG 或 WebP（选择所需缩放），或使用提供的分享链接。

使用场景

• 品牌标识渐变：创建不依赖标准线性/径向外观的自定义渐变，然后导出高分辨率素材用于品牌材料。
• 印刷设计准备：生成具有可控纹理和柔和过渡的渐变（例如使用羽化），并以更高缩放导出 PNG/WebP。
• Web 和 UI 视觉：生成适配设计系统的渐变，使用曲线控制和分层混合模式实现一致、非默认样式。
• 视频和动态背景：使用渐变工作流程创建纹理背景，可置于动态素材后；Colir 还预告即将支持 Web 和动态设计的动画渐变。
• 数字艺术和插图：构建带有噪声/闪光/扭曲的渐变，并通过混合模式组合，实现绘画式或风格化效果。

常见问题

• Colir 支持哪些输出格式？

  Colir 可将渐变导出为 PNG 或 WebP，并提供 1× 至 4× 缩放选项。还可使用分享链接保存和重用渐变。

• Colir 支持实时渲染渐变吗？

  是的。页面描述使用 GPU 加速的 WebGL 实现 任意分辨率的实时渲染，专为流畅编辑设计。

• 曲线控制与典型渐变有何不同？

  Colir 允许编辑两条独立曲线（X 和 Y），控制颜色在画布上的流动，而非标准线性或径向行为。

• 可以应用哪些效果？

  列出的效果包括 噪声（缓解条带）、羽化、闪光、扭曲 和 图案。每种效果均可通过强度调整，并使用混合模式。

• 当前版本之外有计划功能吗？

  网站提到即将推出的功能，包括 AnimatedGradients、更多视觉效果和扭曲选项、模板 以及 Figma 集成。即将功能可能变更。

替代方案

• 带有渐变编辑器的矢量/设计工具：具备渐变选择器和图层/混合功能的应用程序可以生成渐变，但可能更多依赖预设渐变类型，而非 Colir 所述的 X/Y 曲线控制工作流程。
• 用于渐变和纹理工作流程的图像编辑器：结合渐变、噪点、蒙版和混合模式的工具可以产生类似视觉效果，但通常需要更手动化的图层处理过程。
• 3D/着色器图工具：基于着色器的工作流程可以提供高度灵活的渐变塑造和效果，但可能需要与 Colir 的基于 Web 编辑器和导出流程不同的技术设置。
• 生成式渐变库或预设：基于模板的渐变集合可以快速上手，但通常会牺牲详细的曲线控制和效果混合，以换取更快、自定义程度较低的输出。