RGB轉換器
在 RGB、HEX、HSL 和 CMYK 色彩格式之間轉換
如何使用RGB轉換器
- 1為紅、綠、藍分別輸入 0 到 255 之間的值。
- 2拖動滑塊即可即時預覽生成的顏色。
- 3複製 HEX、HSL 或 CSS 程式碼，用於你的專案。
RGB 如何構成顏色
顏色 = (R, G, B)，每通道 0 至 255；HEX = #RRGGBBRGB 混合三個光通道：(0,0,0) 為黑，(255,255,255) 為白，三者相等則為灰階。
螢幕主動發光，所以 RGB 是加色法：與顏料相反，疊加所有通道會趨向白色而非黑色。
RGB 是**加色模型**（光的疊加），用於螢幕顯示：三通道全 0 是黑，全 255 是白。這與印刷用的 CMYK（減色模型，顏料吸光）正好相反——顏料混得越多越暗，所以印刷四色疊加接近黑。設計稿在螢幕上好看但印出來發暗，多半是這個原因，需要在設計階段就轉換色彩空間。
HSL（色相/飽和度/亮度）比 RGB 更貼近人的直覺：調色時想「亮一點」就加 L，想「鮮豔一點」就加 S，而 RGB 要三個數一起改。**同色系配色只需固定 H 調 S 和 L**——比如 H=210 的藍色，S 從 80% 降到 30%、L 從 40% 升到 90%，就得到一套和諧的淺藍色階。這也是 Material Design、Tailwind 等設計系統按 HSL 組織色板的原因。
| 顏色 | HEX | RGB | HSL |
|---|---|---|---|
| 純紅 | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
| 純綠 | #00FF00 | 0, 255, 0 | 120°, 100%, 50% |
| 純藍 | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
| 白 | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% |
| 黑 | #000000 | 0, 0, 0 | 0°, 0%, 0% |
| 中灰 | #808080 | 128, 128, 128 | 0°, 0%, 50% |
| 青 | #00FFFF | 0, 255, 255 | 180°, 100%, 50% |
| 品紅 | #FF00FF | 255, 0, 255 | 300°, 100%, 50% |
常見顏色 RGB / HEX / HSL 對照
常見問題
RGB 和 CMYK 有什麼區別？
RGB 用於螢幕（加色光）；CMYK 用於印刷（減色油墨）。
為什麼是 0 到 255？
每個通道為 8 位，提供 0 至 255 共 256 級，總計約 1670 萬種顏色。
怎麼轉成 HEX？
把每個十進位制數轉成兩位十六進位制並加上 #，例如 255,0,0 變為 #FF0000。
為什麼網頁顏色和實際看到的不一樣？
三個常見原因：① 色彩空間不同——同一 RGB 值在 sRGB、Display P3、Adobe RGB 顯示器上顯示不同，廣色域屏上 sRGB 顏色會偏淡；② 顯示器未校色，不同裝置的白點和伽馬有差異；③ 瀏覽器色彩管理設定。專業設計需要校色儀定期校準，普通使用確保系統色彩配置正確即可。
十六進位制顏色怎麼簡寫？
當 R/G/B 每個通道的兩位數字相同時可以簡寫成 3 位：#FF0000 → #F00，#FFFFFF → #FFF，#336699 → #369（3→33、6→66、9→99）。只有每通道兩位都相同才能簡寫，#FF8801 不能簡寫。簡寫在 CSS 中完全等效，能減小檔案體積。