色彩混合計算器

拖動滑桿以在兩種數位色彩之間進行插值。

配色計算器

此結果僅供瀏覽器端規劃與參考使用。

顏色 A顏色 B 混合比例

CSS / HEX

指南

當你需要尋找兩種狀態之間的中介 UI 顏色，或建立過渡步驟時，請使用此工具。選擇顏色 A 與 B，然後移動滑桿來設定 B 進入結果的比例。

此工具會對每個 0-255 的 sRGB 色頻道進行線性插值，並以 HEX 回傳結果的 RGB 值。這是數值化的螢幕色混合，不是顏料混合或 Gamma 校正的合成模型。

將 #3366FF 與 #FF6655 按 50 % 混合，可得到三個色頻道的中點。把生成的 HEX 貼到懸停狀態，之後針對真實背景再進行一次對比度檢查。

設計應用使用其他色彩空間或混色模式時，可能會產生不同的中點。請不要將此結果視為 CMYK、專色、不透明度或實體油漆配方。

如何將顏色從顏色混合計算機移到其他應用？

使用結果下方的複製按鈕來複製 CSS、HEX 或 HSL 文字。請確認目標應用程式解析的是相同的顏色格式。

顏色混合計算機的螢幕顏色會和印刷匹配嗎？

不會自動匹配。發光型 RGB 螢幕與反射型紙張與墨水使用不同色域與混合模型，因此仍需要印刷色彩設定檔與打樣。

我可以只靠顏色混合計算機來核准一個 design token 嗎？

先把它作為候補，接著在真實背景、深色模式、互動狀態與文字對比度下測試，再命名並核准 token。