色彩工具

Color Mixer 顏色混合器

混合兩種色彩，調整比例即時產生新顏色。 支援多種色彩格式，一鍵複製與匯出。

Color A
HEX
RGB
HSL
Color B
HEX
RGB
HSL
混合比例
50%
Color A Color B
匯出
即時預覽
Color A
#2563eb
混合色
#804289
Color B
#dc2626
混合色值
HEX 複製 RGB 複製 HSL 複製 CSS 複製
HEX
#804289
RGB
128, 66, 137
HSL
293, 35%, 40%
CSS
rgb(128,66,137)
CSS 輸出
/* 混合色 CSS */
.color-mixed {
  background: rgb(128, 66, 137);
}
廣告
Google AdSense 廣告區塊

什麼是 Color Mixer？

Color Mixer（顏色混合器）是一款免費線上色彩混合工具，讓您混合兩種顏色並調整混合比例，即時產生全新的色彩。無論您是平面設計師、網頁前端開發者還是數位創作者，都能輕鬆找到理想的配色。

如何使用 Color Mixer？

使用方式非常直覺：在左側分別設定 Color A 與 Color B 的顏色（可透過顏色選擇器、直接輸入 HEX、RGB 或 HSL 值），然後拖曳下方的混合比例滑桿來調整兩色的混合權重。右側會即時顯示混合結果的色塊與詳細色值。

混合原理

本工具使用 RGB 線性插值（Linear Interpolation）進行顏色混合。混合色的每個通道（R、G、B）會根據設定的比例分別計算：Value = (1 - ratio) × ColorA + ratio × ColorB。當比例為 0% 時結果為 Color A，100% 時結果為 Color B，中間比例則產生平滑過渡的色彩。

應用場景

Color Mixer vs Color Palette Generator

Color Mixer 專注於兩種顏色的精確混合，透過調整比例來產生過渡色；而 Color Palette Generator 則是從單一主色出發，產生一組完整的色票。兩者相輔相成，滿足不同階段的色彩設計需求。

常見問題 (FAQ)

混合比例的範圍是多少？
混合比例從 0% 到 100%。0% 代表完全使用 Color A，100% 代表完全使用 Color B，50% 則是兩色各半。您可以透過滑桿精確調整到任何百分比。
混合結果是如何計算的？
使用 RGB 線性插值（Linear Interpolation）計算。混合色的 R、G、B 值分別根據比例在 Color A 和 Color B 之間進行線性過渡。這是最直觀且廣泛使用的顏色混合方式。
支援哪些色彩格式？
Color A 和 Color B 的輸入支援 HEX、RGB 和 HSL 三種格式，所有輸入會即時同步。混合結果同樣提供 HEX、RGB、HSL 以及 CSS background 格式，方便您直接複製使用。
可以匯出混合結果嗎？
可以！您可以使用左側的匯出功能將三色色塊下載為 PNG 或 SVG 圖片，也可以匯出 CSS Variables 檔案。此外，所有色值都可以一鍵複製到剪貼簿。
這個工具會保存我的資料嗎？
完全不會！所有顏色混合計算都在您的瀏覽器中進行，您的任何操作資料都不會傳送到任何伺服器。您可以在完全離線的環境中使用所有功能。
交換顏色後比例會跟著交換嗎？
交換後 Color A 與 Color B 的位置互換，但混合比例保持不變。這表示如果原本是 30% Color B，交換後 30% 變為原本的 Color A，混合結果會隨之改變。

瀏覽器相容性

本工具使用標準 Web API，支援所有現代瀏覽器：

🌐
Chrome
最新版
🦊
Firefox
最新版
🍏
Safari
最新版
🔷
Edge
最新版

隱私說明

此工具完全在您的瀏覽器中執行。您輸入的任何顏色都不會傳送到任何伺服器。我們不會對這個工具使用 Cookie 或追蹤功能。