使用說明
在色盤上拖曳決定飽和度與明度，用色相滑桿決定色相，右側就會同時給出 HEX、RGB 與 HSL 三種寫法。工具還會算出這個顏色配白字與黑字的對比度，讓你在選色的當下就知道文字讀不讀得清楚，並自動延伸出五階亮色與五階暗色，可以直接當成一組色階使用。
CSS / FRONTEND · 瀏覽器內處理
線上取色
用色盤挑選顏色，同時取得 HEX、RGB、HSL 與對比度。
只在瀏覽器內計算，不會保存你選過的顏色。對比度依 WCAG 2.1 相對亮度公式計算。
白色文字 4.4:1黑色文字 4.77:1
- HEX
#785dfc - RGB
rgb(120, 93, 252) - HSL
hsl(250, 96%, 68%)
- 白色文字4.4:1未達 AA
- 黑色文字4.77:1通過 AA
色碼
在色盤上拖曳可調整飽和度與明度；使用下方滑桿也能以鍵盤操作。
色階
亮色
暗色
操作步驟
- 在色盤上點選或拖曳，挑出想要的顏色。
- 用色相滑桿微調，或直接貼上既有的 HEX／RGB／HSL 色碼。
- 複製你需要的格式，或從色階列取用亮色與暗色。
隱私
所有計算與預覽都在這個瀏覽器內完成，輸入不會上傳、不會保存，也不會寫進網址或紀錄。
常見問題
- 對比度要達到多少才夠？
- WCAG AA 對一般內文要求 4.5:1，大型文字（約 18pt 以上或 14pt 粗體）要求 3:1；AAA 則分別是 7:1 與 4.5:1。工具會直接標出白字與黑字各自的比值，讓你在選色階段就能判斷。
- 可以直接吸取畫面上的顏色嗎？
- 支援 EyeDropper API 的瀏覽器（例如桌面版 Chrome 與 Edge）會顯示吸色按鈕，可以取畫面上任一點的顏色。不支援的瀏覽器則改用色盤與色碼輸入，功能不會消失。