Roblox 將顏色儲存為 Color3 物件,由介於 0 與 1 之間的紅、綠、藍浮點數組成,而引擎內建的 Color3.fromHSV(hue, saturation, value) 函式是在執行階段將 HSV 轉換為該 RGB 三元組的標準方式。該函式期望色相範圍為 0–1(其中 0 與 1 都會迴繞到紅色),飽和度範圍為 0–1(0 為灰色,1 為完全飽和),明度範圍為 0–1(0 為黑色,1 為全亮度)。當你撰寫 Color3.fromHSV(0, 1, 1) 時,會得到純紅, Roblox 將其回報為 (1, 0, 0)。若要使用大多數選色器和設計工具所輸出的、更常見的 0–360 度色相與 0–100 百分比飽和度及明度標記法,請在將數值傳入建構式之前,先將度數除以 360、百分比除以 100。Roblox 也提供 Color3:ToHSV(),用於執行反向對應以便驗證。若要檢查你打算貼到腳本中的 HSV 三元組是否會產生你所預期的 RGB──或是將已知的 Color3 分解為色相、飽和度與明度以進行研究或分享──瀏覽器版的 RGB to HSV Converter 以可複製的形式提供相同的算術運算。
Roblox Color3 與 HSV/RGB 工作流程
每個 Roblox 零件、GUI 元素,以及公開顏色的 Lighting 屬性,最終都會解析為一個 Color3:三個標示為 R、G、B 的浮點數通道,各自被限制在 0–1 範圍內。這就是為什麼 Studio「屬性」視窗中的滑桿永遠會顯示像 0.472 這種數值,而不是 120;也是為什麼腳本常會以整數形式撰寫 Color3.fromRGB(120, 80, 40),再於內部將其標準化。HSV 表示法與 Color3 並存,而非內含於其中。HSV 將同一種實體光重新組織為色相(色環上的位置)、飽和度(距離灰色的程度)與明度(最強通道的亮度)。Roblox 透過建構式 Color3.fromHSV 與方法 Color3:ToHSV 來公開 HSV,而許多外部選色器、調色盤工具與著色器編輯器預設即以 HSV 描述顏色。
由於 Roblox 的建構式與你的選色器講的是略有不同的 HSV「方言」,最常見的摩擦點在於範圍。Roblox 以 0–1 的圓圈來表示色相,其中 0 與 1 為同一個紅色錨點──也就是將 360 度色環摺疊到單位區間上。飽和度與明度同樣為 0–1 的分數。然而大多數設計工具將色相描述為 0–360 度、飽和度與明度描述為 0–100 百分比。將這兩種方言對齊,是在 Roblox 中執行任何 HSV 轉 RGB 轉換時的實務核心,也是你在開發過程中值得擁有一個獨立轉換或查詢工具的原因。
使用 Color3.fromHSV 將 HSV 轉換為 RGB
- 確認你的來源數值。以度數(0–360)記下色相,並以百分比(0–100)記下飽和度與明度。這是多數外部調色盤與選色器所回傳的單位。
- 將各通道標準化至 Roblox 的 0–1 範圍。將色相除以 360、飽和度除以 100、明度除以 100。這三個得到的浮點數即為 Color3.fromHSV 所期望的輸入。
- 在 LocalScript、ServerScript 或指令列中呼叫 Color3.fromHSV(h, s, v)。回傳的 Color3 以 0–1 的浮點數儲存紅、綠、藍通道,符合每個 Roblox 屬性的要求。
- 將結果指派給你正在設定樣式的屬性。常見目標包括 Part.Color、Frame.BackgroundColor3、TextLabel.TextColor3,以及 Lighting.Ambient 與 Lighting.FogColor 等燈光屬性。
- 若你想確認來回轉換的結果,可使用 Color3:ToHSV() 讀回通道。該方法會以相同的標準化 0–1 形式回傳,你可再將其乘以倍數轉回度數與百分比以便顯示。
該建構式並不像許多顏色函式庫那樣會對超出範圍的輸入進行截斷。飽和度大於 1 會使結果過度飽和,但不會引發錯誤;色相大於 1 則只會在色環上繞行一次。事先標準化能讓產生的 Color3 維持在 Studio 所要求的標準 0–1 通道範圍內,並避免因無訊息的繞行而產生細微的色偏。
從 Roblox Color3 查詢 HSV
有時候你已經擁有一個 Color3──也許是從某個零件上取樣的顏色、從設計規格複製的品牌色,或是 已轉換為 RGB 的十六進位色碼──而你需要知道它對應的 HSV,以便在滑桿中調整。這就是反向作業,也是 RGB to HSV Converter 工具在整個流程中的切入點。在瀏覽器中開啟該工具,輸入 0 到 255 之間的整數紅、綠、藍值,再點擊 Convert to HSV。該工具會回傳以 0–360 度圓圈表示的色相、以百分比表示的飽和度、以百分比表示的明度、標準化的 HSV 標記法,以及原始的十六進位色碼。介面會同時保留三個 RGB 輸入欄位,讓你可以微調某個通道,並即時觀察三個 HSV 元件如何連動──這在反覆調整 Roblox 顏色、卻不想每次都重新在 Studio 輸入數值時特別好用。
該轉換器遵循標準的 Android Color HSV 範圍合約,其中色相至少為零且小於 360 度,飽和度與明度在顯示為百分比之前位於零到一之間(依據 Android Developers 關於 Color 的說明文件)。如果你手上的是 Roblox Color3 形式,請先將每個 0–1 通道乘以 255 並四捨五入為整數,再輸入工具中。顯示的飽和度與明度可直接除以 100 讀回 Roblox 的 0–1 形式。顯示的色相則需要和建構式路徑一樣,經過相同的 360→1 除法步驟。
實作範例:從一個 Roblox 顏色到兩套系統
以你可能為夕陽天空盒挑選的暖橘色為例:Color3.fromRGB(200, 100, 50),Roblox 會在內部將其儲存為 R = 0.784、G = 0.392、B = 0.196。
使用標準的最大通道分段公式,將該 Color3 轉換為 HSV,結果如下:
- 最大通道: R = 0.784,最小 = B = 0.196,差值 = 0.588。
- 明度 (V): max(R, G, B) = 0.784,顯示為 78.43%。
- 飽和度 (S): 差值 ÷ 最大值 = 0.588 ÷ 0.784 = 0.7500,顯示為 75.00%。
- 色相 (H): 由於 R 為最大值,H = 60 × ((G − B) ÷ 差值) = 60 × ((0.392 − 0.196) ÷ 0.588) = 60 × 0.3333 = 20.00°。
若要將這些數值放回腳本中,請除以單位範圍:20 ÷ 360 ≈ 0.0556、75 ÷ 100 = 0.75、78.43 ÷ 100 ≈ 0.7843。Roblox 的呼叫 Color3.fromHSV(0.0556, 0.75, 0.7843) 會重建出同一個橘色,而 Color3:ToHSV() 來回轉換後仍會得到 0.0556、0.75、0.7843。
HSV 通道範圍與色環
0–360 度色相圓圈被劃分為六個對齊於加色原色與二次色的錨點。下表將每個色環錨點對應到其度數值、Roblox 標準化的 0–1 形式,以及建構式在飽和度與明度皆為最大時所回傳的飽和 RGB。
| 顏色 | 色相(度) | 色相(0–1) | V = 1 時的飽和 RGB |
|---|---|---|---|
| 紅 | 0 | 0.000 | (1, 0, 0) |
| 黃 | 60 | 0.167 | (1, 1, 0) |
| 綠 | 120 | 0.333 | (0, 1, 0) |
| 青 | 180 | 0.500 | (0, 1, 1) |
| 藍 | 240 | 0.667 | (0, 0, 1) |
| 洋紅 | 300 | 0.833 | (1, 0, 1) |
請記住 HSV 的明度追蹤的是最強通道,而非感知亮度。純黃 (1, 1, 0) 與純藍 (0, 0, 1) 的明度都是 1,即使兩者在螢幕上呈現的亮度差異很大。如果你的目標是感知上平衡的漸變,使用 HSL 建構式或能顯示感知亮度的選色器會產生更均勱的漸層。
在 Roblox 中將 HSV 轉換為 RGB 的常見陷阱
忘記 360→1 與 100→1 的重新縮放。最常見的錯誤就是把色相 120 直接餵給 Roblox,以為會得到綠色,結果卻落在青色與藍色之間。從設計工具複製數值後,請立即將度數除以 360、百分比除以 100。
假設 HSV 明度等於 HSL 亮度。HSV 明度是最大的標準化通道。HSL 亮度則是最大與最小通道的平均值。淡黃色與淡藍色擁有相同的 HSL 亮度值,卻有截然不同的 HSV 明度。如果你的程式碼、著色器或動畫關鍵影格原本是基於 HSL 建立,在未重新平衡的情況下切換到 HSV,將會使最亮的影格產生偏差。
將 RGB 相等視為正常色相。當 R、G、B 相等時──包括純黑、純白與中間灰──飽和度為零,色相也沒有視覺意義。Roblox 仍會從 Color3:ToHSV() 回傳一個數字(慣例為 0),但改變它並不會改變實際渲染出來的顏色。在將色相視為有意義之前,進行無色彩檢查(最大通道等於最小通道)是最安全的防護。
盲目信任第三方 HSV 查詢工具。並非所有線上 HSV 工具都遵循相同的慣例。某些工具為了精簡影像處理,將色相以 0–179 或 0–255 的整數儲存;有些將飽和度以百分比表示,有些則以 0–1 的分數表示。此處使用的 RGB to HSV Converter 已獨立對照 R grDevices rgb2hsv 慣例進行驗證(請參閱 R grDevices rgb2hsv 說明文件),以度數顯示色相,並以百分比顯示飽和度與明度,這符合最常見的設計工具方言,且只需一次除法即可轉換為 Roblox 的 0–1 形式。
若你在權衡各種方案,CMYK to RGB Explained: The Formula and Its Limits 有詳細的說明。