顏色轉換器
- 顏色轉換顏色HEXRGBRGBAHSLHSLACSS
在 CSS 或設計工具裡常會用到多種顏色寫法，輸入任一種即可同步轉成其他格式。
顏色轉換
上傳圖片後，在圖片上點擊即可吸取該點的顏色（純前端，不會上傳到任何伺服器）。
圖片吸色
上傳一張圖片，點擊畫面上任意位置即可取得該點的顏色（僅在瀏覽器內處理，不會上傳到伺服器）。
格式說明
| 格式 | 範例 | 說明 |
|---|---|---|
| HEX | #FF5733 | 十六進位，6 碼 RRGGBB，可省略開頭 # |
| RGB | rgb(255, 87, 51) | 紅、綠、藍各 0–255 |
| RGBA | rgba(255, 87, 51, 0.8) | 同上，第四個參數為透明度 0–1（或 0–100%） |
| HSL | hsl(11, 100%, 60%) | 色相 0–360°，飽和度與明度 0–100% |
| HSLA | hsla(11, 100%, 60%, 0.8) | 同上，第四個參數為透明度 0–1 |
互轉對應
- HEX / RGB / RGBA：HEX 每兩字元一組轉十進位即 R、G、B；RGBA 的 A 預設為 1。
- HSL / HSLA：與 RGB 互轉為標準公式（色相 H、飽和 S、明度 L）；輸入 HSLA 會保留透明度並同步到 RGBA。
- 任一種格式變更後，其餘四種會即時更新。
什麼時候該用 HSL 而不是 HEX
HEX 和 RGB 描述的是「紅綠藍各多少」，機器好懂但人不好調；HSL 描述的是「什麼色相、多飽和、多亮」，比較貼近人怎麼想顏色。實務上 HSL 最好用的場景：
- 做 hover / active 狀態：同一個顏色只動 L（明度）加減 10%，就是自然的深淺變化，不用重新挑色。
Code
--btn: hsl(215, 80%, 50%); --btn-hover: hsl(215, 80%, 42%); /* 只改 L */ - 產生同色系色板：固定 H 和 S，用不同 L 拉出一整組（背景、邊框、文字）。
- 微調「太亮／太淡」：直接動 L 或 S，比在 HEX 裡瞎猜兩位十六進位快得多。
反過來，跟設計稿、設計工具對接時 HEX 仍是最通用的交換格式，複製貼上最不會出錯。
HEX 的縮寫與 8 碼寫法
- 3 碼縮寫：
#F53等同#FF5533，每一位重複展開；只有三組都能縮時才可用。 - 8 碼（RRGGBBAA）：最後兩碼是透明度，
#FF573380約等於rgba(255, 87, 51, 0.5)。現代瀏覽器都支援，但部分舊工具不認得，交換時留意。
新一代 CSS 顏色寫法
CSS Color Module 之後，rgb() / hsl() 支援空格語法，透明度改用斜線：
Code
color: rgb(255 87 51 / 0.8); /* 等同 rgba(255, 87, 51, 0.8) */
color: hsl(11 100% 60% / 0.8);
另外還有感知均勻的 oklch()，調亮度時色相不易跑掉，新專案的設計系統越來越常見；不過 HEX／RGB／HSL 仍是目前最通用的三種，先把這三種互轉搞熟就夠應付大多數情況。