什麼是互補色查詢器？
互補色查找器可為任意輸入顏色計算色輪上的對立色。還能展示類似色、三角色和分裂互補色方案，方便你搭建協調的配色。
工具底層使用 chroma-js 的 HSL 計算,把色相環按固定角度旋轉,得到六種配色方案:互補色(180°)、鄰近色(±30°)、三分色(120° 與 240°)、分裂互補色(150° 與 210°)、四色矩形/正方(90°、180°、270°),以及單色調(基礎色的明暗變化)。每塊色票同時顯示 HEX、RGB、HSL 三種值,任一格式按一下即可複製,直接貼到 Figma、Tailwind 設定或 CSS 規則。
使用方法
- 步驟一——以 HEX(#FF6600)或 RGB(255 102 0)格式輸入基礎顏色,或使用取色器選取。
- 步驟二——即時查看互補色（色輪上 180° 對立色）及其色碼。
- 步驟三——探索其他色彩和諧方案（類似色、三角色、分裂互補色），並可複製任意色塊的值。
何時使用
- 圍繞已有的主色,快速排出品牌色板,不用打開 Adobe Color。
- 挑一個在頁面背景上能跳出來的強調按鈕顏色。
- 為圖表挑數據色,確保相鄰顏色不會互相干擾。
結果
一位品牌設計師輸入主色橙 #FF8C00，取得互補藍 #0073FF，以及類似暖色調 #FF4400 和 #FFB800，建構出統一協調的配色方案。
常見問題
- 互補色和分裂互補色差在哪?
- 互補色就是色輪上正對面那一個(180°)。分裂互補色取的是正對面兩側的兩個顏色(150° 與 210°)。分裂版本看起來沒那麼衝突,整個介面要協調比較容易。
- 底色非常深或非常淺時,搭配還算得出來嗎?
- 色相類配色(互補、鄰近、三分色、分裂互補、四色矩形)只旋轉色相,飽和度與亮度都不變,所以淺底色得到淺搭檔,深底色得到深搭檔。單色調則刻意調整你色相的亮度。若色相類搭檔看起來太淡,先把底色飽和度往上拉再生成。
- 用的是美術輪(RYB)還是螢幕輪(RGB)?
- 螢幕輪。這裡紅色(#FF0000)的互補色是青色(#00FFFF),不是顏料理論裡的綠色。數位設計用這個模型才對;真的要調顏料就會覺得怪。
- 為什麼有些底色算出來的互補色看起來差別不大?
- 純灰色的色相是未定義的,旋轉沒有支點,結果就是返回一樣的灰。給底色加上哪怕 5% 飽和度,互補色就能正常拉開。
- 可以一次把整個色板匯出嗎?
- 可以,有四種方式。「下載調色盤」會把每個色塊與 HEX 值存成純文字檔;「下載 CSS」把調色盤輸出為可直接使用的 CSS 自訂屬性(例如 --color-complementary-1: #0099FF;);「Tailwind 設定」產生可貼進 tailwind.config.js 的顏色物件;「PNG 圖片」則把整份調色盤存成附標註的圖片,方便在設計審查時分享。