RGB⇄16進位制(HEX)顏色代碼轉換工具｜免費・無需註冊
輸入 RGB 數值或十六進位制(HEX)顏色代碼，即可即時相互轉換。同時支援「RGB轉16進位制」和「16進位制轉RGB」兩種方向，轉換結果可直接用於 CSS 或設計工具。免費使用、無需註冊。
十進位制（Base 10）
| R | |
|---|---|
| G | |
| B |
十六進位制（Base 16）
| # |
|---|
RGB 與16進位色碼的關係
畫面上的顏色，取決於紅、綠、藍三種光混合的比例。將各自的強度以0到255的數值表示即為 RGB 格式，而將相同的值改為兩位16進位並排列起來，便是 #RRGGBB 這樣的16進位色碼。也就是說兩者只是以不同寫法表示同一個顏色，本工具即進行兩者的相互轉換。
之所以有兩種寫法，是因為用途不同。16進位能以六個字元表示顏色，適合在 CSS 或設計工具間傳遞。另一方面，RGB 可直接看到各成分的數值，因此像「把紅色再加強一點」這類調整會更容易進行。為了能依作業內容分別運用，本工具讓兩種格式都能一併確認。
色碼轉換的使用方法
- 輸入想轉換的值 在10進位欄位填入 R、G、B 的值，或在16進位欄位輸入色碼。從任一邊都能轉換。
- 確認另一種格式 輸入的同時便會顯示對應的值。可直接複製並貼入 CSS 或設計工具。
- 調整數值試色 增減10進位側的數值，色彩的變化會更容易辨識。可一邊逼近目標色一邊確認。
用好本工具的小技巧
- CSS 中可以使用
#RRGGBB和rgb(R, G, B)兩種格式指定顏色。 - R（紅）、G（綠）、B（藍）每個通道的值範圍為 0〜255（十六進位制 00〜FF）。
- 白色為
#FFFFFF（255, 255, 255），黑色為#000000（0, 0, 0）。 - Figma、Adobe XD 等設計工具均支援兩種格式，複製數值即可直接使用。
- 簡寫
#FFF等同於#FFFFFF（白色），是有效的 CSS 寫法之一。
色碼轉換的實用場景
從設計交付到程式撰寫
可將設計工具以 RGB 顯示的顏色，改為 CSS 所使用的16進位格式。能避免人工轉換的失誤。
準確重現品牌色
當指定的顏色手邊只有其中一種格式時，可轉換為另一種以求統一。能避免文件與網頁上的顏色產生落差。
一點一點地調整顏色
以16進位難以拿捏增減的調整，改以 RGB 的數值便能憑直覺進行。適合明度或色調的微調。
調查既有網站的配色
將開發者工具中取得的色碼加以轉換，即可將各色成分的強度以數值掌握。
色碼的術語
- RGB
- 以紅、綠、藍光的強度表示顏色的方式。各自可取0到255的值，三者皆為255時即為白色。
- 16進位
- 以0到F共16種符號表示數的記法。因為能以剛好兩位表示0到255，故用於色碼。
- 簡寫
- 如
#FFF般省略為三位的寫法。僅在各成分的兩位為相同字元時才能使用。 - 24位元色彩
- 為各成分各分配8位元的方式。合計可表現約1,677萬色。
- 通道
- 指構成顏色的各個成分。在 RGB 中，紅、綠、藍各自相當於一個通道。
常見問題
#FFFFFF 和 #ffffff 在 CSS 中表示相同的顏色，大小寫不影響結果。#AABBCC → #ABC）。像 #1DA1F2 這樣的值無法簡寫。
閒話 ― 色彩的奧秘 ― 人眼與1677萬色的世界
人眼能識別的顏色數量約為 1000萬色（因人而異）。RGB 24位色（每通道8位）可表示 16,777,216 種顏色（約1677萬色），遠超人眼的識別能力。
知名品牌色的 RGB 值：Twitter 藍 #1DA1F2（29, 161, 242）、Google 紅 #EA4335（234, 67, 53）、LINE 綠 #00B900（0, 185, 0）。蒂芙尼標誌性的藍色「Tiffany Blue」接近 #0ABAB5，是少數被註冊為商標的顏色之一。
有趣的是，CSS 中有一個名為 rebeccapurple（#663399）的顏色。這是 CSS 規範制定者 Eric Meyer 的女兒 Rebecca（享年6歲）去世後，由 CSS 社群提議，於2014年正式納入標準，以示追悼。這段故事在工程師社群中廣為流傳。