顏色模型轉換工具（RGB・HSL・HSV・CMYK）
輸入HEX顏色程式碼或使用取色器選擇顏色，即可同時計算並顯示RGB、HSL、HSV（HSB）、CMYK四種色彩模型的數值。
各色彩模型的區別
| 模型 | 概述 | 主要用途 |
|---|---|---|
| RGB | 一種加色模型，通過0〜255的數值混合光的三原色（紅・綠・藍）來表現顏色。 | 顯示器、Web開發（CSS）以及影像編輯軟體的基本格式。 |
| HSL | 用色相（Hue）・飽和度（Saturation）・明度（Lightness）三個要素表現顏色的模型，更接近人類對顏色的直觀感受，便於調整。 | CSS的`hsl()`函式，以及配色工具中的色相・飽和度調整。 |
| HSV/HSB | 用色相（Hue）・飽和度（Saturation）・明度（Value/Brightness）三個要素表現顏色的模型，與HSL相似但第三個軸的定義不同。 | Photoshop、Illustrator等設計工具的取色器。 |
| CMYK | 一種減色模型，通過疊加青色・品紅・黃色・黑版（黑色）四種油墨來表現顏色。 | 印刷品設計・DTP（紙質媒體的色彩還原）。 |
什麼是色彩模型轉換
色彩模型轉換是指把同一種顏色轉換為 RGB・HSL・HSV（HSB）・CMYK 這些不同表色系的數值。RGB 是基於顯示器發光機制的數值，HSL・HSV 是以色相、飽和度、亮度（明度）這類貼近人類感覺的軸來表示顏色的數值，CMYK 則是基於印刷油墨疊印的數值；即便是同一種顏色，所依據的軸也截然不同。
本工具會把以 HEX 色碼或檢色器指定的一種顏色，一次轉換並顯示為上述四種表色系的數值。適用於網頁製作中想改變 CSS 的書寫形式、設計工具之間色彩指定方式不同、想確認印刷用 CMYK 值等，僅靠單一顏色轉換無法應對的「希望同時對比多個模型」的場合。
色彩模型轉換工具的使用方式
- 輸入 HEX 色碼 帶不帶 `#`、以及3位省略形式（`#f60`）均可輸入。
- 或用檢色器選擇顏色 所選顏色會自動反映到 HEX 色碼欄。
- 透過預覽確認顏色 可用色塊目視確認輸入值是否被正確辨識。
- 確認 RGB・HSL・HSV・CMYK 的轉換結果 四種表色系的數值會同時顯示。
- 依用途使用數值 如轉寫至 CSS 的 `hsl()` 函數、確認印刷用 CMYK 值等，依目的使用相應數值。
用好本工具的小技巧
- HEX程式碼輸入框支援帶`#`或不帶`#`、三位簡寫形式（例如`#f60`）和六位完整形式兩種輸入方式。
- 通過取色器選擇的顏色會自動反映到HEX程式碼中，可以一邊憑感覺選色一邊確認具體數值。
- 如果想在CSS中用`hsl()`函式指定背景色或文字顏色，可以直接把這裡計算出的HSL數值套入`hsl(H, S%, L%)`格式中使用。
- 製作印刷用資料時請注意，這裡顯示的CMYK數值只是簡易換算值，與實際印刷廠根據ICC配置檔案得出的轉換值可能會有細微差異。
色彩模型轉換的應用情境
CSS 中色彩指定形式的轉換
可把設計稿中指定的 HEX 色碼，轉換為想用 CSS 的 `hsl()` 函數微調色相與飽和度時所需的 HSL 值。
確認印刷用資料的 CMYK 參考值
把為網頁決定的 RGB/HEX 配色沿用到印刷品之前，先確認 CMYK 換算值，更易察覺螢幕與紙張的色差。若需要正確的色彩再現，請另行確認基於印刷公司 ICC 特性檔的轉換。
設計工具之間的色彩交接
Photoshop、Illustrator 等常以 HSV（HSB）顯示檢色器，當數值看起來與網頁色碼不一致時，可用本工具確認其對應關係。
配色的微調
分解為色相、飽和度、亮度三個值後，更易掌握「維持色相不變、只改變明暗」之類的調整方向。製作精細的配色方案時，也請另行活用調色盤產生工具。
用語集
- RGB
- 把紅（Red）・綠（Green）・藍（Blue）的光混合以表現顏色的加法混色模型。各成分以0～255的數值表示，用作顯示器與 CSS 的基本色彩指定方式。
- HSL
- 以色相（Hue）・飽和度（Saturation）・亮度（Lightness）三要素表示顏色的模型。相較僅有數值的 RGB，其特點是更易直觀地調整「明暗」與「鮮豔度」。
- HSV（HSB）
- 以色相（Hue）・飽和度（Saturation）・明度（Value/Brightness）三要素表示顏色的模型。與 HSL 相似但明度的定義不同，被 Photoshop 等的檢色器廣泛採用。
- CMYK
- 把青（Cyan）・洋紅（Magenta）・黃（Yellow）・黑版（Key plate，黑）四色油墨疊加以表現顏色的減法混色模型。用於印刷品的設計（DTP）。
- 色相（Hue）
- 把紅、綠、藍等「顏色的種類」以0～360度的角度表示的值。是 HSL・HSV 共用的軸，呈環狀自紅出發，經黃、綠、藍、紫再回到紅。
- 飽和度（Saturation）
- 表示顏色鮮豔程度的值。飽和度越接近0%越接近灰色，越接近100%則成為鮮豔的純色。
- 亮度/明度（Lightness / Value）
- HSL 的亮度（Lightness）表示黑與白的混合程度，HSV 的明度（Value）表示該顏色中混入了多少黑。是同一顏色在不同模型下數值含義不同的代表例。
- 黑版（K）
- CMYK 中的黑色油墨成分。僅靠青、洋紅、黃三色難以再現有深度的黑，因此印刷時會另行疊加黑色油墨，使文字與深色更為清晰。
常見問題
閒話 ― 色彩模型的歷史與用途區分
RGB加色混合的理念本身可以追溯到19世紀的色彩理論，但真正在計算機圖形學中廣泛使用是從20世紀70年代以後開始的。當時的彩色電視和顯示器都是通過點亮陰極射線管上紅・綠・藍三種熒光體來產生顏色的，因此RGB被採用為直接對應這種物理結構的數值模型。
HSL和HSV都是在20世紀70年代到80年代之間，由計算機圖形學研究者為解決「人類直接調整RGB數值並不直觀」這一課題而設計出來的。其中HSV尤以1978年Alvy Ray Smith（後來成為Pixar的聯合創始人之一）在論文中正式提出而聞名。
CMYK是伴隨印刷技術的歷史發展而來的色彩模型，源自一種稱為四色分色印刷（four-color process printing）的方法。為了解決僅用青・品紅・黃三色難以還原有深度的黑色這一印刷特有的課題，才加入了K（黑版）。時至今日，膠版印刷、噴墨印表機等眾多印刷技術依然將CMYK作為標準使用。