線上顏色轉換工具
網頁設計常在不同色彩表示法之間切換:設計稿給你 HEX,CSS 想用 HSL 微調亮度,或程式需要 RGB 數值。這個顏色轉換工具讓 HEX、RGB、HSL 即時互轉,並附色彩預覽,改一個另外兩個立即更新。
如何使用
- 在任一欄輸入色碼(HEX、RGB 或 HSL)。
- 另外兩種格式與預覽即時更新。
- 複製你需要的格式貼進 CSS 或設計工具。
常見用途
- 把設計稿的 HEX 轉成 CSS 想用的 HSL。
- 用 HSL 微調同色系的明暗變化。
- 在程式中取得 RGB 數值。
調明暗用 HSL 最直覺,別忘了透明度
在 CSS 和設計工具之間工作時,常常需要把同一個顏色在 HEX、RGB、HSL 之間互轉——設計稿給的是 HEX,但 CSS 想用 rgba,或是想微調色相時就得換成 HSL。給你兩個實用提醒:想把一個顏色調亮或調暗,用 HSL 最直覺,色相 H、飽和度 S 不動,只調 L(亮度)就能得到同色系的深淺變化,比在 HEX 上瞎猜好用太多。另外別忘了透明度:同樣是半透明,HEX 要寫成 8 碼(多兩位 alpha),rgba 則是最後多一個 0~1 的數值,兩種格式的寫法不一樣,轉換時要留意別漏掉。
為什麼在灰色上調色相沒有反應?
這一頁的輸出直接回答了。白色 #ffffff 是 0, 0%, 100%、黑色是 0, 0%, 0%、中灰 #808080 是 0, 0%, 50% —— 三個色相都是 0,但那個 0 不是「紅」,而是**沒有定義、只被寫成零**,因為飽和度是 0%。對照純紅的 0, 100%, 50%:色相數字一樣,意義完全不同。只要飽和度還在零,再怎麼調色相都染不上顏色。