十六進制顏色碼嘅基本結構
HEX 顏色碼係網頁開發同數碼設計中最常用嘅色值表示方法之一。一個標準嘅 HEX 碼以「#」開頭,後面跟住六個十六進制數字(0-9 同 A-F),例如 #4f46e5。呢六個數字分成三對,分別代表紅(Red)、綠(Green)、藍(Blue)三個通道嘅強度。每個通道嘅數值範圍係 00 到 FF,對應十進制嘅 0 到 255。因為十六進制係 base‑16 系統,每對數字嘅最高位係 16¹ = 16,最低位係 16⁰ = 1,所以計算好直接:將第一位乘以 16,再加第二位。例如 4f:4×16 + 15 = 64 + 15 = 79。
本頁面接受使用者輸入完整六碼(如 #1E90FF)、三碼縮寫(如 #abc),或者唔帶 # 符號嘅字串。輸入後會即時轉換成 RGB 數值,並同步更新其他色彩格式。所有運算都喺你嘅瀏覽器入面進行,唔會上載任何資料去伺服器。
由 HEX 轉換到 RGB 嘅數學原理
呢個轉換本質上係將 base‑16 嘅表示轉成 base‑10 嘅整數。每個通道嘅十六進制值都係一個兩位數(如果係三碼縮寫,先擴展成六碼)。算式係:十進制值 = 十位數 × 16 + 個位數。例如 #4f46e5:
- 紅:
4f→ 4×16 + 15 = 79 - 綠:
46→ 4×16 + 6 = 70 - 藍:
e5→ 14×16 + 5 = 224 + 5 = 229
所以 RGB 值係 rgb(79, 70, 229)。呢個轉換係完全確定嘅,唔會有任何四捨五入或者色域裁剪,因為兩者都係用嚟表示同一個色彩空間(sRGB)嘅 8‑bit 通道。HEX 碼只不過係 RGB 數值嘅另一種寫法,所以可以來回無損轉換。
本頁面嘅轉換器嚴格按照呢個數學規則運作,確保輸出嘅 RGB 值係精確整數。其他工具可能因為支援 alpha 通道而出現偏差,但呢頁只處理純色(無透明度),所以結果可以放心用喺 CSS rgb() 函數或者 JavaScript Canvas API 入面。
三碼縮寫自動擴展機制
三碼縮寫(例如 #abc)係為咗節省字元而設嘅簡寫形式,每個 digit 實際上代表一個通道嘅高四位元同低四位元相同。換句話說,#abc 等同於 #aabbcc。本頁面嘅轉換器會自動將三碼擴展成六碼,然後先做轉換。所以 #abc 會變成 #aabbcc,然後計算出 RGB:aa=170, bb=187, cc=204,最終 rgb(170, 187, 204)。
呢個機制令到設計師可以快速輸入常用顏色,例如 #fff(白色)或者 #000(黑色)。但要注意:三碼縮寫唔可以同六碼混合使用,例如 #a1b 係無效,因為第二個 digit 係數字,第三個係字母,但擴展後會變成 #a1a1bb——呢個仍然係有效嘅六碼,所以本頁面會接受並正確轉換。不過,如果輸入 #1234(四個字元),就唔符合三碼或六碼格式,會觸發錯誤提示。
即時轉換與同步顯示其他色彩模式
呢個頁面唔係淨係顯示 RGB 三個數字咁簡單。只要輸入或更改任何一個色彩欄位(HEX、RGB、HSL、HSV、CMYK、LAB),所有其他欄位都會即刻更新。呢個同步機制係靠前端 JavaScript 即時計算,唔使重新載入頁面。例如你喺 RGB 欄位輸入 255, 102, 0,HEX 欄位會自動變成 #ff6600,HSL 會變成 hsl(24°, 100%, 50%),如此類推。
對於本頁面嘅主要功能——HEX 轉 RGB——輸出嘅 RGB 值會以「R, G, B」格式顯示,每個數值都係整數,方便直接複製貼上到程式碼。其他格式嘅數值(例如 CMYK 嘅百分比、LAB 嘅浮點數)亦會同時更新,但所有數值都係基於相同嘅 sRGB 色彩空間轉換,確保一致。
常見錯誤同邊界情況
本頁面對輸入值有嚴格嘅格式檢查。如果輸入嘅 HEX 碼唔符合六碼或三碼格式,頁面會顯示指定錯誤訊息:「Enter a hex color like #4f46e5 or #abc.」。常見錯誤包括:
- 輸入八碼 HEX(例如
#4f46e5ff,包含 alpha 通道):呢頁唔支援 alpha,所以會當作無效。 - 輸入四碼或五碼:唔符合任何一種有效格式。
- 輸入非十六進制字元(例如
#gggggg):同樣會觸發錯誤。 - 輸入負數或小數:HEX 碼唔可以有呢啲符號,所以一律拒絕。
另外,雖然 # 號係可選,但建議保留,因為咁樣更清晰。如果輸入完全冇 # 號,工具會照樣分析,只要其餘字元符合六碼或三碼長度就得。例如 4f46e5 會被識別為有效六碼。
實際應用:點解需要 HEX 轉 RGB
好多前端開發者會喺 CSS 入面用 color: #ff6600,但當佢哋要用 JavaScript 操作顏色(例如 Canvas 繪圖、動畫插值、濾鏡計算)嘅時候,就需要 RGB 數值陣列。又或者設計工具(如 Figma、Sketch)嘅 API 偶爾會要求十進制 RGB,而品牌手冊畀出嘅係 HEX 碼。呢個轉換器就係為咗呢啲場景而設。
另外,如果想計算顏色嘅相對亮度(luminance)嚟評估可讀性對比度,都需要先取得 RGB 數值,再用標準公式(例如 WCAG 2.0 嘅相對亮度公式)運算。直接由 HEX 數值計算亮度係唔可能,因為亮度公式用嘅係 sRGB 線性化 gamma 曲線,而 HEX 係已經做咗 gamma 編碼嘅表示。所以第一步永遠係拆解成 0‑255 嘅通道值。
學生同業餘愛好者都可以用呢個工具嚟理解十六進制同十進制之間嘅關係。例如輸入 #808080(中灰),會得到 RGB 128, 128, 128,睇到三個通道相等時就係灰階。輸入 #ff0000 得 255, 0, 0,清楚知道純紅色。
常見問題(FAQ)
問:點解 #abc 同 #aabbcc 嘅 RGB 值一樣?
答:因為三碼縮寫嘅設計就係每個 digit 代表該通道嘅高四位同低四位相同,所以 #abc 實際上等同於 #aabbcc。本頁面會自動做呢個擴展,確保轉換結果一致。
問:輸入 HEX 碼時可唔可以唔寫 # 號?
答:可以。工具會忽略開頭嘅 # 號,只要其餘字元係六個或三個有效十六進制數字就得。例如 4f46e5 同 #4f46e5 效果一樣。
問:如果輸入 #1234 會點?
答:呢個係四碼,唔符合六碼或三碼格式,頁面會顯示錯誤訊息:「Enter a hex color like #4f46e5 or #abc.」。只有六碼或者三碼先會被接受。
問:RGB 值係咪永遠係 0 到 255 之間嘅整數?
答:係,因為每個通道用 8 位元儲存,所以十進制範圍必然係 0‑255。本頁面嘅轉換係精確數學,唔會出現小數或超出範圍嘅情況。
問:點解我輸入八碼 HEX(例如 #4f46e5ff)唔得?
答:呢頁只處理純色(無 alpha 通道)。八碼 HEX 最後兩個 digit 代表透明度,本頁面唔支援,所以會當作無效格式。如果需要包含透明度,請使用其他支援 RGBA 嘅工具。
問:轉換完嘅 RGB 值點樣喺 CSS 入面用?
答:你可以直接複製輸出嘅三個數字,然後寫成 rgb(79, 70, 229) 或者 rgba(79, 70, 229, 1) 都得。CSS 嘅 rgb() 函數接受 0‑255 整數或者百分比,呢度畀出嘅就係整數形式。