顏色轉換
HEX / RGB / HSL 顏色格式線上互轉，支援取色器、滑桿調整與一鍵複製
HSL 分量調整
配色參考
互補色
相近色
三種顏色格式說明
HEX（十六進位）
HEX 以 # 開頭後接 6 位十六進位數（如 #3b82f6），每兩位依序表示紅、綠、藍分量（00-ff）；也支援 #rgb 三位縮寫（如 #f00 等同於 #ff0000）。HEX 是 CSS 與設計軟體中最常見的顏色寫法，適合直接貼到樣式表。
RGB（紅綠藍）
RGB 用紅(R)、綠(G)、藍(B)三個 0-255 的整數表示顏色，CSS 中寫作 rgb(59, 130, 246)。它直接對應螢幕發光原理，適合需要程式化處理顏色通道的場景，如 Canvas、影像處理。
HSL（色相/飽和度/亮度）
HSL 用色相 H（0-360° 色環角度）、飽和度 S（0-100%）、亮度 L（0-100%）表示顏色，CSS 中寫作 hsl(217, 91%, 60%)。它更符合人類對顏色的直覺，做配色方案（如調整明暗、產生互補色）時最方便。
常用顏色對照表
| 顏色 | HEX | RGB | HSL |
|---|---|---|---|
| 黑色 | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| 白色 | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| 紅色 | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| 綠色 | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| 藍色 | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| 黃色 | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| 青色 | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| 洋紅色 | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| 橙色 | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| 灰色 | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
使用說明
在任一輸入框中輸入顏色值（HEX 支援 #rgb 縮寫與省略 #；RGB 支援 rgb() 函式與逗號分隔兩種寫法；HSL 中 % 可省略），或點擊取色器、拖動 HSL 滑桿，其餘格式會即時同步更新。每個格式右側的「複製」按鈕可將該格式複製到剪貼簿。配色參考區域會給出目前顏色的互補色與相近色，點擊色塊可直接選用。全部計算在瀏覽器本地完成。