這個線上選色器先提供清楚的視覺色塊,再把精確數值放在旁邊。可以貼上 CSS hex 色碼,例如 #3366cc,微調紅、綠、藍與 alpha 通道,或調整 hue、saturation 和 lightness,方便處理 design system 的色彩。色彩數值不會被上傳 - 所有轉換都在本機以 JavaScript 完成。
免費線上選色器
全程在瀏覽器裡執行,免上傳、免註冊。
已選取#3366cc
HSL220, 60%, 50%
HEX
#3366ccHEX8
#3366ccffRGB
rgb(51, 102, 204)HSL
hsl(220, 60%, 50%)HSV
hsv(220, 75%, 80%)CMYK
cmyk(75%, 50%, 0%, 20%)什麼是選色器?
選色器是用來挑選精確數位顏色,並複製色彩數值給設計或程式使用的工具。使用色塊、HEX 欄位、RGB 滑桿或 HSL 控制項,接著立即複製 HEX、RGB、HSL、HSV 或 CMYK 數值。所有操作都在瀏覽器中完成。
使用方式
- 1選取或貼上顏色. 按一下大型色塊以開啟瀏覽器的選色器,或在 HEX 欄位貼上 3、4、6 或 8 位數的 hex 色碼。
- 2調整色彩通道. 使用 RGB 滑桿調整紅、綠、藍與 alpha,或在需要更適合設計的控制方式時編輯 hue、saturation 和 lightness。
- 3複製需要的格式. 一鍵複製 HEX、HEX8、RGB、HSL、HSV 或 CMYK。預覽與每個輸出值都會即時更新。
適合誰用
- Front-end 開發者在建立介面時複製可直接用於 CSS 的 HEX、RGB 和 HSL 數值。
- 設計師依照通道微調品牌色,而不是在繪圖軟體中憑感覺猜色。
- 行銷團隊在 email 編輯器、文件和社群素材之間對齊活動色彩。
- 學生與創作者理解 RGB、HSL、HSV 和 CMYK 如何描述同一個顏色。
常見問題
這個線上選色器免費嗎?
是。這個選色器免費使用,不需要註冊,也沒有使用次數限制。開啟頁面、選好顏色,然後複製需要的格式即可。
我的顏色會被上傳嗎?
不會。選色器和轉換功能都使用一般 JavaScript 在瀏覽器中執行。選取的顏色不會傳送到伺服器。
可以複製哪些色彩格式?
可以複製 HEX、含 alpha 的 8 位數 HEX、RGB 或 RGBA、HSL 或 HSLA、HSV 和 CMYK。編輯時工具會讓所有格式保持同步。
可以貼上 hex 色碼嗎?
可以。貼上 3、4、6 或 8 位數的 CSS hex 色碼,有沒有 # 符號都可以。縮寫色碼會依照一般 CSS 規則展開。
HEX8 是什麼?
HEX8 是 8 位數的 hex 顏色,最後一組數值儲存 alpha。例如 #3366cc80 是同一個藍色,但透明度約為 50%。
CSS 中該用 RGB 還是 HSL?
需要精確通道值或用 rgba() 加上 alpha 時,使用 RGB。想透過 saturation 和 lightness 建立淺色、深色或相關 UI 狀態時,使用 HSL。