HEX、RGB、HSL 各有用處
HEX（#1A2B3C）最常出現在 CSS 與設計稿；RGB 方便和透明度（rgba）一起用；HSL 用色相、飽和度、亮度描述顏色，要「同色系再亮一點／暗一點」時調起來特別直覺。能互轉，就不必被單一格式綁住。
設計工具
色碼轉換工具
免費線上色碼轉換工具，支援 HEX、RGB、HSL 互相轉換，附顏色選擇器與即時預覽，一鍵複製，設計與前端開發都好用。
HEX
#1F57E6RGB
rgb(31, 87, 230)HSL
hsl(223, 80%, 51%)小編提醒
- 色碼轉換工具 適合臨時做一張可用素材，不用為了小需求另外開大型軟體。
- 要放到印刷品或品牌主視覺時，建議再確認尺寸、對比和可讀性。
深入了解
從設計稿到程式碼
設計師給的色票常是某一種格式，工程師需要的是另一種。一鍵轉換省去手動換算的麻煩，也避免抄錯一碼造成顏色跑掉。要建立品牌色票時，把主色的 HEX 記下來，再用 HSL 微調出深淺層次最方便。
別忘了對比與可讀性
顏色好看之外，文字與背景的對比要夠，否則在手機或陽光下會看不清楚。選好顏色後，正式用在介面或印刷前，建議再檢查一次對比度與可讀性。需要做圖時可搭配站內的社群圖片尺寸工具。
使用教學
- 1用取色器或輸入任一色碼。
- 2即時看到 HEX / RGB / HSL 三種值。
- 3複製你要的格式。
常見問題
支援透明度嗎？
目前先處理 HEX / RGB / HSL。若要透明度，可以複製 RGB 或 HSL 後，在 CSS 裡另外加 alpha，例如 rgb(51 109 245 / .5)。
可以用在 CSS 嗎？
可以，直接複製 RGB 或 HSL 值貼到 CSS 即可。