顏色選擇器
用系統色輪或 H / S / L 滑桿挑色，再複製成 HEX、RGB、RGBA、HSL 或 HSLA。全部在瀏覽器內完成，不會上傳任何色值。
預設顏色
顏色格式
- HEX
#3B82F6- HEX8
#3B82F6FF- RGB
rgb(59, 130, 246)- RGBA
rgba(59, 130, 246, 1)- HSL
hsl(217, 91%, 60%)- HSLA
hsla(217, 91%, 60%, 1)
顏色選擇器在做什麼
顏色選擇器把視覺上的挑選結果轉成項目能用的色碼。拖動色輪或色相、飽和度、亮度滑桿，HEX、RGB、HSL 與 RGBA 數值會同步更新。
整頁只以一個顏色為準，所以各種格式不會各走各的。也可以反過來用：貼上 HEX、rgb() 或 hsl() 色值，色輪與滑桿會直接跳到那個顏色。
如何挑一個顏色
- 打開色輪，或拖動色相、飽和度、亮度滑桿。
- 已經知道色碼的話，直接在上方輸入框輸入。
- 拉動透明度滑桿加入半透明效果，預覽色塊下方有棋盤格可看出透明程度。
- 在 HEX、HEX8、RGB、RGBA、HSL、HSLA 六列中，複製你需要的格式。
顏色選擇器範例
由 HEX 得到 rgb()
#3B82F6
rgb(59, 130, 246)
由 HSL 得到 HEX
hsl(217, 91%, 60%)
#3C83F6
半透明的藍色
rgba(59, 130, 246, 0.5)
#3B82F680
UrsaKit 與其他顏色選擇器比較
| 比較項目 | UrsaKit | colorpicker.me | htmlcolorcodes.com | RapidTables |
|---|---|---|---|---|
| 費用 | 免費 | 免費 | 免費，含廣告 | 免費 |
| 系統原生色輪 | 有 | 無 | 無 | 無 |
| HSL 滑桿 | 有，單一組 | 有，RGB 與 HSL 各一組 | 有 | 部分 |
| 透明度 | 支援 | 部分支援 | 支援 | 支援 |
| 逐項複製各格式 | 支援 | 部分支援 | 部分支援 | 不支援 |
| 上傳你的色值 | 不會 | 不會 | 不會 | 不會 |
常見問題
常見問題
顏色選擇器要收費嗎？
不用。整頁在瀏覽器內執行，免註冊，也不限挑色次數。
可以不用色輪，直接輸入色碼嗎？
可以。輸入或貼上 HEX、rgb()、rgba()、hsl() 或 hsla() 色值，色輪與滑桿會同步跳到該顏色。
怎麼做出半透明效果？
拉動透明度滑桿即可。預覽色塊下方有棋盤格，HEX8、RGBA 與 HSLA 三列也會跟著更新。
挑好的顏色會被存下來或上傳嗎？
不會。沒有任何色值會被儲存或送到伺服器，顏色只存在於這個頁面開著的期間。
可以從圖片取色嗎？
這裡不行。從照片取色必須上傳或開啟圖片檔，本工具刻意避開這種做法。
該複製哪一種格式？
CSS 與設計工具用 HEX 或 HEX8；canvas 與 JavaScript 用 rgb() 或 rgba()；要從幾個色相延伸整套主題時用 hsl()。