Colir

Colir 是什麼？

Colir 是一個基於網頁的漸層產生器，讓你使用曲線控制而非固定線性或放射規則來建立自訂漸層。它使用 GPU 加速即時渲染漸層，並提供視覺特效與混合模式來精煉最終外觀。

Colir 的核心目的是幫助設計師與創作者產生更具控制流動與紋理的漸層（並減少如色帶等視覺偽影），然後匯出用於專案。

主要功能

• X/Y 曲線控制漸層流動：編輯兩個曲線（X 與 Y 各一）來塑造顏色在畫布上的移動方式，創造超越簡單線性或放射漸層的效果。
• 即時 WebGL 渲染：漸層以 GPU-accelerated WebGL 互動更新，支援高解析度順暢編輯而無需等待渲染。
• 12 種混合模式創造層次效果：套用多種混合模式（例如 Multiply、Screen、Overlay、Difference）並結合曲線，改變漸層層次的互動方式。
• 視覺特效控制紋理與邊緣：使用包括 noise (減少色帶)、feather（柔化邊緣）、glitter、distortion 與 patterns 等特效，每種皆有專屬混合模式。
• 調色盤預設與顏色停點：從 9 種內建調色盤 開始（依類別如 Vibrant、Warm、Cool、Complementary 等），再透過在漸層條上新增與移動顏色停點微調。
• 高解析度匯出選項：以 PNG 或 WebP 匯出漸層，支援可選縮放因子（1× 至 4×）。

如何使用 Colir

1. 在 Colir 中 開始新漸層。
2. 使用內建預設或顏色選擇器 挑選顏色，然後在漸層條上 新增/移動顏色停點。
3. 調整曲線，點擊新增點並拖曳重塑 X 與 Y 曲線，控制漸層流動。
4. 套用濾鏡/特效（noise、feather、glitter、distortion、patterns），透過強度設定與混合模式精煉。
5. 匯出 結果為 PNG 或 WebP（選擇欲縮放），或使用提供的分享連結。

使用情境

• 品牌識別漸層：建立不依賴標準線性/放射外觀的自訂漸層，匯出高解析度資產用於品牌素材。
• 列印設計準備：產生具控制紋理與柔和過渡的漸層（例如使用 feather），以高縮放匯出 PNG/WebP。
• 網頁與 UI 視覺：產生符合設計系統的漸層，使用曲線控制與層次混合模式達成一致、非預設樣式。
• 影片與動態背景：使用漸層工作流程建立紋理背景置於動態資產後方；Colir 也預告即將推出動畫漸層用於網頁與動態設計。
• 數位藝術與插圖：以 noise/glitter/distortion 建立漸層，透過混合模式結合創造繪畫或風格化效果。

常見問題

• Colir 支援哪些輸出格式？ Colir 可匯出漸層為 PNG 或 WebP，提供 1× 至 4× 縮放選項，並有分享連結可儲存與重複使用漸層。

• Colir 是否即時渲染漸層？ 是的。頁面描述使用 GPU-accelerated WebGL 實現任意解析度即時渲染，設計用於順暢編輯。

• 曲線控制與典型漸層有何不同？ 非標準線性或放射行為，Colir 讓你編輯兩個獨立曲線（X 與 Y）來控制顏色在畫布上的流動。

• 可套用哪些特效？ 列出的特效包括 noise（解決色帶）、feather、glitter、distortion 與 patterns。每種特效可透過強度精煉並使用混合模式。

• 目前版本外是否有規劃功能？ 網站提及即將推出功能，包括 AnimatedGradients、額外視覺特效與扭曲選項、templates 與 Figma integration。也註明即將功能可能變更。

替代方案

• 具漸層編輯器的向量/設計工具：具漸層選擇器與圖層/混合功能的應用程式可產生漸層，但可能更依賴預設漸層類型，而非 Colir 所述的 X/Y 曲線控制工作流程。
• 用於漸層與紋理工作流程的影像編輯器：結合漸層、雜訊、遮罩與混合模式的工具可產生類似視覺效果，但通常需更手動的圖層處理程序。
• 3D/著色器圖形工具：基於著色器的流程可提供高度彈性的漸層造型與效果，但可能需不同技術設定，與 Colir 的線上編輯器與匯出流程相比。
• 生成式漸層庫或預設：基於範本的漸層集合可快速啟動，但通常以較快、較不可自訂的輸出，換取詳細曲線控制與效果混合。