色彩轉換器

使用視覺化選色器和 HSL 滑桿,即時在 HEX、RGB、HSL、HSV、CMYK 和 LAB 格式之間轉換顏色。使用互補色、三等色、類似色等色彩理論方案生成和諧調色盤。

色彩選擇器

支援HEX、RGB、HSL格式

HSL調整
11°
100%
60%

色彩預覽

色彩格式轉換

  • 網頁開發中最常用的十六進位色彩代碼
  • 紅、綠、藍通道值 (0-255)
  • 具有色相、飽和度、明度的直覺色彩模型
  • 具有色相、飽和度、明度(亮度)的色彩模型
  • 印刷中使用的青色、洋紅色、黃色、黑色色彩模型
  • 感知均勻的色彩空間模型

在任一列輸入 HEX、RGB 或 HSL 數值,即可轉換成其他格式

色彩調和

生成與您選擇的色彩和諧的色彩

調和類型

色環上相對的色彩,創造強烈對比

色彩調色盤

  • #FF5733

    基礎

  • #33DAFF

使用方法

  1. 使用色彩選擇器或直接輸入色彩值
  2. 所有色彩格式都會即時自動轉換
  3. 點擊複製按鈕來複製所需格式的色彩值
  4. 在「色彩調和」中選擇互補、三角、四角、分裂互補或類似,即可看到依色彩理論產生的調色盤,再點選色票就能使用該色彩

認識色彩格式:HEX、RGB、HSL 及其他

這個轉換工具的作用

同一個顏色可以有多種寫法,而這項工具能一次把單一顏色轉成其中六種表示法。以 HEX、RGB 或 HSL 輸入數值,或用視覺化的色彩選取器挑選,畫面就會立刻顯示對應的 HEX、RGB、HSL、HSV、CMYK 與 LAB 表示法。透過 HSL 滑桿調整色相、飽和度與亮度時,其他格式也會同步更新。

由於六種格式都是從同一個顏色計算而來,而非查固定對照表,因此每次移動選取器或滑桿都會即時重新計算整組數值,你複製到的值永遠對應螢幕上那個色塊。

何時該用哪一種格式

不同工作需要不同的表示法。HEX 與 RGB 是貼進 CSS 和多數設計軟體的寫法;當你想把某個顏色調得稍暗一點或降低飽和度時,HSL 比較好拿捏;CMYK 則在設計要送印時才派上用場;LAB 適合需要讓人眼看起來間距均勻的顏色時使用。六種格式並列在一起,你不必再找第二個轉換器,就能直接取用眼前工作所需的那一種。這些數值很少單獨存在:rgba() 字串正是CSS 陰影產生器做出柔和陰影時所需要的,而單一個 HEX 碼則是Meta 標籤產生器輸出的 theme-color 標籤用來為瀏覽器網址列上色的依據。

範例:轉換 #FF5733

以橘色 #FF5733 為例。以 RGB 表示是 rgb(255, 87, 51):紅色最強、綠色偏少、藍色更少。以 HSL 表示大約是 hsl(11, 100%, 60%),色相靠近色相環的紅色端、飽和度最高、亮度為 60%。送印時大致對應 cmyk(0%, 66%, 80%, 0%)。每種表示法指的都是同一個色塊,只是用不同的數字描述而已,每個數值旁的複製按鈕能讓你直接貼進程式碼或設計檔案。

格式注意事項與邊界情況

HEX 與 RGB 承載相同的資訊——#FF5733 和 rgb(255, 87, 51) 是同一個顏色的不同寫法——因此彼此轉換不會遺失任何內容。HSL 與 HSV 則把這些資訊依人類直覺重新組織,所以較適合微調顏色而非儲存顏色。CMYK 是印刷用的色彩模型,色域比螢幕窄,數值只是接近的近似值而非完全吻合;LAB 則與裝置無關,並且在知覺上均勻。這裡顯示的 HEX、RGB、HSL 結果都能原封不動貼進 CSS。

常見問題

所有轉換都沒有次數限制:你可以在 HEX、RGB、HSL、HSV、CMYK 與 LAB 之間任意切換顏色,使用視覺化選取器與 HSL 滑桿,並產生調和配色盤,這些功能都不會被付費方案或用量上限擋住。