顏色模型：RGB、HSV、HSL

本節從計算機圖形（網頁、影像）的角度，提供關於 RGB、HSV 和 HSL 顏色模型的入門資訊。還提供顏色簡介，以支援主要討論。

“顏色”指的是人腦對窄帶波長光的組合的主觀解釋。此外，到達眼睛的波長取決於光源中的波長以及光反射物體所吸收的波長。對於大多數網頁開發者來說，幸運的是，顯示器以相當一致的方式生成自己的光，這簡化了顏色處理。

原色

原色的概念基於以下事實：任何顏色都可以透過將三種顏色與白色和黑色組合來建立。然而，由於顏色可以直接生成（例如，透過顯示器）或透過反射生成（例如，透過油漆），因此對哪組顏色是“原色”有多種定義。實際上，有三組原色。

傳統顏色

艾薩克·牛頓在 1672 年用紅色、黃色和藍色描述了顏色，作為原色。這種顏色方案通常被稱為“畫家顏色”，並且至今仍在廣泛使用。不幸的是，這種原色選擇是不準確的，並非所有顏色都可以使用這三種顏色生成。

減色法顏色

這種顏色方案通常被稱為“印刷顏色”，從白光如何從表面反射的角度來看待顏色；產生的顏色是“減去”白色後的結果。原色是青色、黃色和品紅色。在印刷中，這三種顏色通常與黑色組合使用，形成 CMYK 模型（黑色被稱為“K”，以避免與藍色混淆）。減色法顏色透過讓光線反彈並吸收某些波長來累加形成其他顏色；它們需要外部光源。如果所有減色法顏色混合在一起（例如，將大量油漆或染料混合在一起），它們將形成黑色。

加色法顏色

這種顏色方案從將原色加在一起的角度來看待顏色，這就是顯示器的工作原理。原色是紅色、綠色和藍色。使用這種方法最常見的例子是使用 RGB 模型來製作任何顏色的畫素的螢幕或顯示器。如果您仔細觀察舊的 CRT 電視或電腦顯示器，當螢幕開啟時，很容易看到這三種顏色的條帶。新的 LCD 螢幕也可以顯示，但更難看到。加色法原色本身就是光源。覆蓋整個可見光譜的電磁波源（例如，太陽）將呈現白色。

色相

色相，或“純色”，是兩種原色的組合，其中一種原色處於最大強度。關於色調、陰影和色度的討論將使這個概念更加清晰。

在本文件的剩餘部分，“顏色”將以一般意義使用，“色相”將用於描述純色。

色環

大腦對顏色的解釋的一個有趣的方面是，它以圓形的方式看到顏色之間的關係。色環是一種工具，它提供所有可能色相之間關係的視覺表示。原色以相等的（120 度）間隔排列在圓圈周圍。（注意：色環通常描繪“畫家顏色”原色，這會導致與加色法顏色不同的色相集。）

次色和補色

次色（嚴格來說是色相）是透過將兩種原色都以最大強度新增形成的。在色環上，這些顏色位於每對原色之間（60 度）的中間。次色是青色、黃色和品紅色。請注意，這些與減色法或印刷原色相同。

色相的補色是色環上與其相對（180 度）的色相。每種原色的補色都是一種次色。使用加色法，將色相與其補色以相等比例混合會產生白色。

通常，顏色的補色是具有補色色相且具有相同色調和陰影的顏色的補色。將一種顏色與其補色以相等比例混合會產生灰色陰影。

色調、色相、色度

以下討論使用一個涉及三個投影儀指向螢幕上同一個點的插圖。每個投影儀都可以生成一種原色。每個投影儀的“強度”是“匹配的”，並且可以從零到最大強度進行調整。（注意：“強度”在此處與 RGB 顏色模型的意義相同。匹配每個原色的強度的主題超出了本書的範圍。）請參見 RGB 部分的示例。

色調

色調是透過“使色相變暗”產生的。畫家將其稱為“新增黑色”。在我們的插圖中，一個投影儀設定為最大強度，第二個設定為零到最大強度之間的某個強度，第三個設定為零。這會產生色相。透過將每個投影儀的強度設定降低到其初始設定的相同分數來完成變暗。

在色調示例中，完全變暗色相會導致所有三個投影儀都設定為零強度，從而產生黑色。

色相

色相是透過“使色相變亮”產生的。畫家將其稱為“新增白色”。在我們的插圖中，一個投影儀設定為最大強度，第二個設定為零到最大強度之間的某個強度，第三個設定為零，從而產生色相。“變亮”是透過將每個投影儀的強度設定從其初始設定增加到最大強度的相同分數來完成的。

在色相示例中，請注意第三個投影儀現在正在貢獻。完全變亮色相會導致所有三個投影儀都設定為最大強度，從而產生白色。

加色法模型的一個奇怪屬性與色相和色相的總強度有關。如果一個投影儀的最大強度為 1，則原色具有 1 的組合強度。次色具有 2 的總強度。白色具有 3 的總強度。因此，補色具有比原色更大的總強度。此外，色相或“新增白色”會增加色相的總強度。HSL 模型在設計中解決了這個問題。

色度

色調是一個通用術語，通常由畫家使用，指的是降低色調的“色彩度”的效果；畫家將其稱為“新增灰色”。請注意，灰色不是顏色，甚至不是一個單一的概念，而是指黑色和白色之間所有範圍的值，其中三種原色的強度相等。由於更具體的術語在不同的顏色模型中具有衝突的定義，因此此處使用通用術語色調。因此，陰影使色調偏向黑色，調色使色調偏向白色，而色調使色調偏向灰色。從技術上講，陰影和調色是色調的特殊情況，就像黑色和白色從技術上講是灰色的陰影一樣。

就投影儀示例而言，色調錶示將兩臺投影儀設定為產生色調。接下來，第三臺投影儀的強度發生變化以產生調色。最後，所有三臺投影儀的強度以相同的比例降低，類似於陰影。這保留了所得顏色的關係，以原始色調為基礎，但三個投影儀中的任何一個都沒有處於全強度狀態。眼睛感知結果為色調的飽和度較低或灰色的版本。

選擇顏色模型

沒有哪種顏色模型比另一種顏色模型“更好”。通常，顏色模型的選擇取決於外部因素，例如圖形工具或根據CSS2 或 CSS3 標準指定顏色的需要。以下討論僅描述模型如何執行，重點在於色調、陰影、調色和色調的概念。

RGB

RGB 模型對顏色的方法很重要，因為它

直接反映了“真彩色”顯示的物理特性
大多數圖形工具都支援它，即使它們更喜歡其他顏色模型
它是網頁 CSS2 標準中指定特定顏色的唯一方法。請注意，CSS 現已發展為一系列名為 CSS 4 的模組，但為了方便、程式碼的向後相容性和熟悉性，RGB(A) 顏色定義以及生成的 CSS 程式碼可能更容易使用。

在該模型中，顏色透過指定紅色、綠色和藍色的強度級別來描述。每種顏色的典型強度值範圍（0-255）基於取一個具有 32 位的二進位制數並將其分解為四個位元組，每個位元組八位。八位可以儲存一個值從 0 到 255。第四個位元組用於指定顏色的“alpha”（或不透明度）：這有時會導致所謂的“RGBA”，其中包含 alpha 通道；如果未定義，則假定不透明度為 100%。當具有不同顏色的層疊加在一起時，不透明度就會起作用。如果頂層中的顏色不完全不透明（alpha < 255），則來自底層顏色的顏色會“透射”，產生混合顏色。

在 RGB 模型中，色調透過指定一種顏色為全強度（255），第二種顏色為可變強度，第三種顏色為零強度（0）來表示。

以下提供了一些示例，使用紅色作為全強度顏色，使用綠色作為部分強度顏色；藍色始終為零

紅色	綠色	結果
255	0	紅色 (255, 0, 0)
255	128	橙色 (255, 128, 0)
255	255	黃色 (255, 255, 0)

陰影是透過將每種原色的強度乘以 1 減去陰影係數來建立的，陰影係數的範圍為 0 到 1。陰影係數為 0 對色調沒有影響，陰影係數為 1 會產生黑色

新強度 = 當前強度 * (1 - 陰影係數)

以下提供了使用橙色的示例

0	0.25	0.5	0.75	1.0
(255, 128, 0)	(192, 96, 0)	(128, 64, 0)	(64, 32, 0)	(0, 0, 0)

調色是透過修改每種原色來建立的：增加強度，以便強度與全強度（255）之間的差減少調色系數，調色系數的範圍為 0 到 1。調色系數為 0 不會有任何影響，調色系數為 1 會產生白色

新強度 = 當前強度 + (255 - 當前強度) * 調色系數

以下提供了使用橙色的示例

0	0.25	0.5	0.75	1.0
(255, 128, 0)	(255, 160, 64)	(255, 192, 128)	(255, 224, 192)	(255, 255, 255)

色調是透過同時應用陰影和調色來建立的。執行這兩個操作的順序無關緊要，但存在以下限制：當對陰影執行調色操作時，主顏色的強度會變成“全強度”；也就是說，主顏色的強度值必須用 255 代替。

以下提供了使用橙色的示例

	0	0.25	0.5	0.75	1.0
0	(255, 128, 0)	(192, 96, 0)	(128, 64, 0)	(64, 32, 0)	(0, 0, 0)
0.25	(255, 160, 64)	(192, 120, 48)	(128, 80, 32)	(64, 40, 16)	(0, 0, 0)
0.5	(255, 192, 128)	(192, 144, 96)	(128, 96, 64)	(64, 48, 32)	(0, 0, 0)
0.75	(255, 224, 192)	(192, 168, 144)	(128, 112, 96)	(64, 56, 48)	(0, 0, 0)
1.0	(255, 255, 255)	(192, 192, 192)	(128, 128, 128)	(64, 64, 64)	(0, 0, 0)

與 RGB 不同，HSV 和 HSL 中每個屬性的值範圍是由各種工具和標準任意定義的。請務必確定值範圍，然後再嘗試解釋值。例如，色調值通常從 0 到 360 不等，但 Windows 7^® 中包含的“畫圖”在其 HSL 模型中使用 0 到 239 的範圍。因此，許多工具中的色調為 120 表示“綠色”，而在畫圖中則表示“青色”。

在 CSS 中寫入這些值的格式可能會有所不同：您可以使用 (X, Y, Z) 模型，也可以使用稱為十六進位制值的定義顏色，其中紅色、綠色和藍色的量使用兩位十六進位制數定義。十六進位制數使用標準的十進位制數字 0 到 9 以及 A–F 來表示十六進位制數。例如，上面的 (255, 128, 0) 顏色也可以寫成 #ff8000 ，而 (0, 0, 0) 可以寫成 #000000 。

HSV

HSV 或 HSB 模型根據色調、飽和度和明度（亮度）來描述顏色。這種方法不適用於 CSS，而是傾向於使用 HSL（見下文）。

色調直接對應於顏色基礎部分中的色調概念。使用色調的優勢在於

可以輕鬆識別色輪周圍色調之間的關係
可以輕鬆生成陰影、調色和色調，而不會影響色調

飽和度直接對應於顏色基礎部分中的調色概念，不同之處在於，完全飽和不會產生調色，而零飽和會產生白色、灰色的陰影或黑色。

明度直接對應於顏色基礎部分中的強度概念。

純色是透過指定具有全飽和度和明度的色調來產生的
陰影是透過指定具有全飽和度和部分明度的色調來產生的
調色是透過指定具有部分飽和度和全明度的色調來產生的
色調是透過指定色調和部分飽和度和明度來產生的
白色是透過指定零飽和度和全明度來產生的，無論色調如何
黑色是透過指定零明度來產生的，無論色調或飽和度如何
灰色的陰影是透過指定零飽和度和部分明度來產生的

HSV 的優點是，其每個屬性都直接對應於基本顏色概念，這使得它在概念上很簡單。HSV 的感知缺點是，飽和度屬性對應於調色，因此飽和度較低的顏色具有越來越高的總強度。由於這個原因，CSS3 標準計劃支援 RGB 和 HSL，但不支援 HSV。

HSL

HSL 模型根據色調、飽和度和亮度（也稱為亮度）來描述顏色。（注意：HSL 中飽和度的定義與 HSV 中的定義大不相同。）該模型具有兩個突出的特性

從黑色到色調到白色的過渡是對稱的，並且僅透過增加亮度來控制
- 陰影和調色由單個值（亮度）控制
降低飽和度會過渡到取決於亮度的灰色陰影，從而保持相對恆定的總強度
- 色調由單個值（飽和度）控制

上述特性導致 HSL 被廣泛使用，特別是在 CSS3 顏色模型中。與 HSV 一樣，色調直接對應於顏色基礎部分中的色調概念。使用色調的優勢在於

可以輕鬆識別色輪周圍色調之間的關係
可以輕鬆生成陰影、調色和色調，而不會影響色調
您可以額外新增 alpha 通道資訊以實現不透明度，因此您有時會看到它被稱為“HSLA”或“HSL(A)”。

亮度結合了顏色基礎部分中的陰影和調色概念。假設飽和度為滿，亮度在中點值（例如 50%）處為中性，並且色調顯示為未修改。當亮度低於中點時，它具有陰影效果。零亮度產生黑色。當亮度高於 50% 時，它具有調色效果，並且全亮度產生白色。

當飽和度為零時，亮度控制著最終的灰色陰影。值為零仍然產生黑色，而完全的亮度仍然產生白色。中間值會產生“中間”的灰色陰影，RGB 值為 (128,128,128)。

隨著飽和度的降低，它會產生參考色調的色調，這些色調會匯聚到由亮度決定的灰色陰影。這使得總強度保持相對恆定。以下示例使用紅色、橙色和黃色色調，亮度為中間值，飽和度逐漸降低。顯示了最終的 RGB 值和總強度。

1.0	.75	.5	.25	0
(255, 0, 0), 256	(224, 32, 32), 288	(192, 64, 64), 320	(160, 96, 96), 352	(128, 128, 128), 384
(255, 128, 0), 384	(224, 128, 32), 384	(192, 128, 64), 384	(160, 128, 96), 384	(128, 128, 128), 384
(255, 255, 0), 512	(224, 224, 32), 480	(192, 192, 64), 448	(160, 160, 96), 416	(128, 128, 128), 384

請注意，加色法的物理性質阻止了該方案完全有效，除非色調介於主色調和副色調之間。但是，降低飽和度產生的色調的總強度比單純的色調（如 HSV 中的色調）更接近。

HSL 可以寫成色輪上的單個數字，後面跟著色調、飽和度和亮度值，例如 hsl(120, 100%, 50%); （綠色）、 hsl(120, 100%, 75%); （淺綠色）、 hsl(120, 100%, 25%); （深綠色）。

命名顏色

最後要說明的是定義顏色的第三種方法，即使用專門選擇的命名顏色。一些預定義的英語術語被標準化為 CSS 顏色。這種跨供應商定義某些顏色的嘗試與早期嘗試製作“網路安全”顏色重疊，這些顏色是網站開發人員可以合理地預期在不同作業系統、網路瀏覽器、顯示器等上顯示相同的顏色。當然，在不同的裝置上，沒有顏色會完全相同，但命名顏色（尤其是來自 CSS 1 的顏色）可以預期會非常相似。

CSS 1 顏色

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

CSS 2.1 顏色

orange

CSS 3 顏色

aliceblue
antiquewhite
aquamarine
azure
beige
bisque
blanchedalmond
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan （aqua 的同義詞）
darkblue
darkcyan
darkgoldenrod
darkgray/darkgrey
darkgreen
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray/darkslategrey
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray/dimgrey
dodgerblue
firebrick
floralwhite
forestgreen
gainsboro
ghostwhite
gold
goldenrod
greenyellow
grey （gray 的同義詞）
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgray/lightgrey
lightgreen
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray/lightslategrey
lightsteelblue
lightyellow
limegreen
linen
magenta （fuchsia 的同義詞）
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
oldlace
olivedrab
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
skyblue
slateblue
slategray/slategrey
snow
springgreen
steelblue
tan
thistle
tomato
turquoise
violet
wheat
whitesmoke
yellowgreen

CSS 4 顏色

rebeccapurple

在 CSS 4 中，您還有 transparent 和 currentcolor 選項，後者用於保持相對一致性。

另請參閱

色彩理論