什麼是色輪？

選擇一個基礎色，在互動色輪上查看互補色、類似色、三色組、分裂互補色、四色組和單色配色方案。每個色塊都會顯示與黑白的 WCAG 對比度，並可將完整配色匯出為純文字或可分享的 PNG 圖片。

色輪基於 HSL 模型,你可以直接拖動基礎色相,也可以輸入任意 HEX 值,對應的色塊會即時跟著旋轉。飽和度和明度滑桿用來一次性調整整組配色。每個生成的顏色都能一鍵複製成 HEX、RGB、HSL、CMYK 或 OKLCH,色輪上還會用帶標籤的圓點標示每個配色位置,讓你看清顏色之間的關係。

使用方法

1. 在色輪上點擊或拖曳選取基礎色相，也可以在輸入欄位中輸入特定的 HEX 色碼。
2. 選擇配色類型（互補色、類似色、三色組、分裂互補色或四色組），查看色輪上醒目顯示的對應顏色。
3. 點擊色塊即可複製 HEX、RGB、HSL、CMYK 或 OKLCH 格式的顏色值。支援將完整調色盤匯出至設計工具中使用。

何時使用

• 品牌主色已定,再為它挑出三到四個搭配色,組成完整視覺包。
• 為按鈕選取與背景在色相上對立的顏色,獲得最大對比。
• 建構 UI 色票時,讓相近色調看起來協調而不是刺眼。

結果

一位網頁設計師選擇 #E87040 作為品牌色，切換到三色組配色方案，一鍵即可取得三個均衡的強調色用於到達頁面設計。

常見問題

類比配色和三角配色有什麼差別?

類比配色取色輪上相鄰的顏色(差距約 30 度內),整體感覺柔和統一。三角配色在色輪上每隔 120 度取一色,對比強又保持平衡,適合需要活力的設計。

什麼時候用互補色,什麼時候用分裂互補色?

互補色取兩個完全相對的色相,衝擊感最強,但兩邊都拉滿飽和度容易刺眼。分裂互補色保留基礎色,搭配對側顏色的左右兩個鄰居,張力還在但比較柔和,更好搭配平衡。

為什麼調明度滑桿,搭配色也跟著變?

色輪保留相對的色相偏移,但會把你的飽和度和明度套用到所有結果上。這樣 40% 明度的類比綠都是深森林色調,不會出現深綠和螢光綠混在一起的情況。

可以把配色匯出成 CSS 變數或設計工具格式嗎?

點任意色塊就可以複製 HEX、RGB、HSL、CMYK 或 OKLCH 到剪貼簿。直接貼進 CSS 寫成 --brand-primary: #E87040,或貼進 Figma 的 hex 欄位,或填到 Tailwind 自訂色票設定,都沒問題。

四方配色就是矩形配色嗎?

是的。四方配色(也叫矩形配色)在色輪上選取構成矩形的四個顏色,等於兩組互補色。配色更豐富,但要選一個主色,不然整體會顯得太花。

相關工具