許虎虎 開發者工具集

HSV 轉 RGB

H: S: V:

R: G: B:
HSV 轉 RGB

將 HSV 顏色轉換為 RGB 顏色涉及根據色調(Hue)、飽和度(Saturation)和亮度(Value)的值來計算對應的紅色、綠色和藍色分量。這個轉換對於許多數位設計應用非常重要,尤其是在顯示設備(如螢幕)中顯示顏色時。

什麼是HSV顏色模型?
H (Hue):色調,範圍是0°到360°,表示顏色的基本類型(如紅色、綠色、藍色等)。
S (Saturation):飽和度,範圍是0%到100%,表示顏色的純度或強度,飽和度越高,顏色越純。
V (Value):亮度,範圍是0%到100%,表示顏色的亮度,0%是黑色,100%是最亮。
轉換步驟:
將HSV轉換為RGB的公式:

C = V * S
計算色彩的強度,S為飽和度,V為亮度。

X = C * (1 - |(H / 60) % 2 - 1|)
這是輔助變數,根據色調來計算。

m = V - C
計算偏移量,這樣最終的顏色可以向黑色或灰色調整。

根據色調H(0°到360°)的範圍,計算RGB的各個通道值:

如果 0° <= H < 60°,則:
R = C
G = X
B = 0
如果 60° <= H < 120°,則:
R = X
G = C
B = 0
如果 120° <= H < 180°,則:
R = 0
G = C
B = X
如果 180° <= H < 240°,則:
R = 0
G = X
B = C
如果 240° <= H < 300°,則:
R = X
G = 0
B = C
如果 300° <= H < 360°,則:
R = C
G = 0
B = X
最後,將RGB的每個通道值加上偏移量m:

R = (R + m) * 255
G = (G + m) * 255
B = (B + m) * 255
例子:
假設我們有一個HSV顏色:H = 180°, S = 100%, V = 100%(這是青色)。

計算C, X, m:

C = V * S = 1 * 1 = 1
X = C * (1 - |(H / 60) % 2 - 1|) = 1 * (1 - |(180 / 60) % 2 - 1|) = 1 * (1 - |3 % 2 - 1|) = 1 * (1 - 0) = 1
m = V - C = 1 - 1 = 0
計算RGB的各個通道值(由於 180° <= H < 240°,我們使用 R = 0, G = C, B = X):

R = 0
G = 1
B = 1
將RGB轉換為0到255的範圍:

R = (0 + 0) * 255 = 0
G = (1 + 0) * 255 = 255
B = (1 + 0) * 255 = 255
所以,RGB顏色是 (0, 255, 255),即青色。

實際範例:
HSV(0°, 100%, 100%)(紅色)轉換為RGB:
RGB: (255, 0, 0)
HSV(120°, 100%, 100%)(綠色)轉換為RGB:
RGB: (0, 255, 0)
HSV(240°, 100%, 100%)(藍色)轉換為RGB:
RGB: (0, 0, 255)
HSV(60°, 100%, 100%)(黃色)轉換為RGB:
RGB: (255, 255, 0)
總結:
HSV轉RGB的核心步驟是先根據HSV值計算輔助變數C、X和m,然後根據色調H的區間來確定紅、綠、藍三個通道的值,最後進行偏移處理,將RGB值轉換為0-255的範圍。
這樣的轉換有助於設計師更靈活地使用顏色,尤其在數位設計中進行顏色的調整。