顏色模型轉換工具(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(紙質媒體的色彩還原)。

使用提示

  • HEX程式碼輸入框支援帶`#`或不帶`#`、三位簡寫形式(例如`#f60`)和六位完整形式兩種輸入方式。
  • 通過取色器選擇的顏色會自動反映到HEX程式碼中,可以一邊憑感覺選色一邊確認具體數值。
  • 如果想在CSS中用`hsl()`函式指定背景色或文字顏色,可以直接把這裡計算出的HSL數值套入`hsl(H, S%, L%)`格式中使用。
  • 製作印刷用資料時請注意,這裡顯示的CMYK數值只是簡易換算值,與實際印刷廠根據ICC配置檔案得出的轉換值可能會有細微差異。

常見問題

RGB是將光的三原色紅・綠・藍分別用0〜255的數值混合來表現顏色的方式,是計算機處理顏色時的基本格式。而HSL則是用「色相・飽和度・明度」這三個更接近人類感官的軸重新表現同一種顏色,因此在進行「稍微亮一點」「稍微鮮豔一點」這類直觀調色時更加方便。

HSV和HSL都共享色相(H)和飽和度(S),但第三個軸的定義不同。HSL的明度(Lightness)表示「與黑色・白色混合的程度」,而HSV的明度(Value)只表示「該顏色中混入了多少黑色」。當想要選擇接近純色的鮮豔顏色時,HSV通常被認為更直觀,因此被Photoshop等許多設計工具的取色器所採用。

理論上均勻疊加青色・品紅・黃色三種油墨應該會得到黑色,但實際的油墨並非完全純淨,三色混合後只會得到接近渾濁棕色的顏色。因此印刷行業會額外新增黑色油墨(黑版,K),以便清晰地印刷文字等黑色內容。

顯示器是通過混合紅・綠・藍三種光來生成顏色的「加色混合」,因此基於光的三原色的RGB更為適合。而在紙張上疊加油墨的印刷則是通過吸收光來生成顏色的「減色混合」,因此使用油墨三原色加黑色的CMYK。由於兩者的原理不同,螢幕上看到的顏色與印刷出來的顏色有時並不完全一致,這種差異被稱為「色域(gamut)」的不同。
ツールくん

閒話 ― 色彩模型的歷史與用途區分

RGB加色混合的理念本身可以追溯到19世紀的色彩理論,但真正在計算機圖形學中廣泛使用是從20世紀70年代以後開始的。當時的彩色電視和顯示器都是通過點亮陰極射線管上紅・綠・藍三種熒光體來產生顏色的,因此RGB被採用為直接對應這種物理結構的數值模型。

HSL和HSV都是在20世紀70年代到80年代之間,由計算機圖形學研究者為解決「人類直接調整RGB數值並不直觀」這一課題而設計出來的。其中HSV尤以1978年Alvy Ray Smith(後來成為Pixar的聯合創始人之一)在論文中正式提出而聞名。

CMYK是伴隨印刷技術的歷史發展而來的色彩模型,源自一種稱為四色分色印刷(four-color process printing)的方法。為了解決僅用青・品紅・黃三色難以還原有深度的黑色這一印刷特有的課題,才加入了K(黑版)。時至今日,膠版印刷、噴墨印表機等眾多印刷技術依然將CMYK作為標準使用。