跳至主要內容
Lizely

色彩混合器

將任意兩種顏色混合，並讀取結果的精確十六進位碼與 RGB 值——兩者之間會呈現即時漸層效果。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.請在顏色 A 欄位輸入第一種顏色，格式可為十六進位碼（如 #f00 或 #3b82f6）或 rgb() 字串，或點選選項來視覺選擇。
  2. 2.請以相同方式在顏色 B 欄位輸入第二種顏色。
  3. 3.拖動比例滑桿來設定兩種顏色的混合比例——0% 為純粹的 A，100% 為純粹的 B，50% 為中點。
  4. 4.在結果面板中閱讀混合後顏色的十六進位碼與 RGB 值，並使用漸層條預覽兩種顏色之間的每一個步驟。
  5. 5.點選複製，將結果的十六進位碼複製到剪貼簿。

關於色彩混合器

色彩混合器會取兩種顏色，並以你選擇的比例混合成單一結果，接著顯示精確的十六進位碼與 RGB 值，讓你可將結果應用於各處。你可以在任一框中輸入顏色，例如簡短的十六進位碼如 #f00、完整十六進位碼如 #3b82f6，或 rgb() 字串如 rgb(59, 130, 246)；此工具支援這三種格式，並能容忍額外空白、缺少井號、大小寫不一致的情況。你也可以點選每個欄位旁的原色選項來視覺選擇顏色。將比例滑桿從 0% 拖動至 100%，即可讓混合結果從純粹的顏色 A 過渡到純粹的顏色 B，結果會即時更新。

混合方式的運作機制值得清楚說明。此工具使用簡單的 sRGB 線性插值：針對紅、綠、藍三個通道，分別計算加權平均值，結果 = 四捨五入(A × (1 - 比例) + B × 比例)。當比例為 0.5 時，會得到兩種通道值的精確中點。這與大多數設計工具、CSS 漸層以及使用者介面系統使用的數學邏輯相同，因此非常適合用來建立色彩尺度、找出兩種品牌色之間的淡色或深色中間值、為圖表配色設定步驟，或輕微調整一種顏色向另一種靠近。

請注意這工具的限制。sRGB 線性插值是混合螢幕光強值，而非實際的顏料。它並非經過伽馬校正的光學混合，也絕非減法繪畫或墨水混合。因此，這裡將純紅 (#ff0000) 與純藍 (#0000ff) 混合會產生純淨的洋紅 (#800080)，而實際在畫布上混合紅色與藍色油漆則會產生混雜的深紫色或褐色。如果你是為網站、應用程式、圖示、圖表或任何螢幕上的設計匹配數位顏色，sRGB 插值正是你需要的。但若你想預測實際的丙烯顏料或印刷油墨在紙張上混合的結果，此工具無法模擬，也沒有一種基於螢幕的混合能正確反映真實情況。

漸層條顯示兩種顏色之間的十一個等距混合步驟，包含兩端點，讓你可以一目瞭然地觀察整個過渡過程，並判斷哪個中間色最為悅目。比例標籤始終顯示當前的分佈，例如 70% A / 30% B，因此結果可重複複製。當你找到想要的顏色時，結果面板會提供小寫六位數的十六進位碼與 rgb() 字串，並提供一鍵複製功能，將十六進位碼複製到剪貼簿。

所有操作皆在你的瀏覽器中以本機色彩運算完成。不會有任何顏色、值或輸入資料上傳至伺服器，無需註冊，也沒有使用限制。速度快、隱私性高，且可自由使用，無論你是設計師調整配色、開發者產生漸層步驟，還是僅僅好奇兩種顏色混合會產生什麼結果。

方法與來源

每聲道 sRGB 線性插值：對於 R、G、B 各分量，結果 = 四捨五入(A * (1 - 比率) + B * 比率)，其中比率限制在 [0, ZX/1]。聲道會限制在 0-255 並四捨五入。這是一種直接加權平均 8 位 sRGB 值 —— 加法風格的螢幕光線混合，不是經過伽馬校正的光線混合，也不是減法顏料混合。

常見問題

色彩混合器是如何混合兩種顏色的？
它使用簡單的 sRGB 線性插值。針對紅、綠、藍三個通道，計算加權平均值——結果 = 四捨五入(A × (1 - 比例) + B × 比例)——其中比例來自滑桿。當比例為 50% 時，會得到兩種顏色通道值的精確中點。
為何紅色與藍色混合會產生洋紅，而不是紫色或褐色？
這個工具將螢幕光值以 sRGB 進行混合，屬於加法式插值，而非減法塗料混合。將 #ff0000 跟 #0000ff 混合後會平均出 #800080，呈現乾淨的洋紅色。實際的紅藍塗料會減法混合出暗沉的紫色，而螢幕基底的混合方式無法模擬這種效果。
我可以輸入哪些色彩格式？
可輸入簡短十六進位 (#f00)、完整十六進位 (#3b82f6)、以及 rgb() 字串，例如 rgb(59, 130, 246)。輸入不區分大小寫，額外空格會被忽略，且開頭的井號是可選的。你也可以使用每個欄位旁邊的色彩選擇器來選擇顏色。
我的資料會被上傳到任何地方嗎？
全部色彩計算都在你的瀏覽器上執行，不會傳送到伺服器，無需註冊，也沒有使用限制。

相關工具

色彩工具 使用指南

查看全部