顏色選擇器
視覺化選擇顏色並複製 HEX / RGB / HSL 值。
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CSS var
--brand: #3B82F6;
隱私安全全部在瀏覽器本機完成，資料不上傳
簡單易用貼上或輸入即可，結果即時呈現
永久免費不限次數，無需註冊
快速高效先進技術，處理高效穩定
選一個顏色、讀出它精確的代碼，本不該非得開一個設計軟體。用這個取色器視覺化地挑選色調，或直接從螢幕上吸取顏色，得到可貼進 CSS 或設計工具的 HEX、RGB 和 HSL 值。
使用步驟: 顏色選擇器
- 1輸入內容拖曳色彩面板或滑桿，挑選你想要的色調。
- 2設定選項或在輸入框貼上 HEX、RGB 或 HSL 數值，直接跳到該顏色。
- 3開始處理在即時預覽中微調色相、飽和度與亮度。
- 4取得結果點選你需要的 HEX、RGB 或 HSL 數值旁的複製按鈕。
常見用途
快速取色挑一個色調並複製它的 HEX，不必啟動笨重的編輯器。
一次讀到所有格式把同一個顏色同時看成 HEX、RGB 和 HSL。
對齊品牌色精確調出某個色調，複製代碼用到你的樣式表裡。
從螢幕上取樣用吸管工具，把你在頁面上看到的顏色取下來。
使用提示
HEX、RGB 和 HSL 是同一個顏色它們是同一色調的三種寫法。HSL 讓「亮一點」或「飽和度低一點」更好把握，HEX 則在 CSS 裡更緊湊。
吸管功能依賴瀏覽器支援螢幕取樣用的是一項瀏覽器功能，Chrome 和 Edge 支援，但有些瀏覽器沒有。沒有時，請改用視覺化挑選。
螢幕顏色不是印刷顏色螢幕上以 RGB 發光的顏色，印到紙上（CMYK）可能會偏移。涉及印刷時，請以印刷廠的色彩設定檔為準，而不是螢幕。
複製後，放到實際環境裡再看同一個顏色在不同背景下觀感會變。把它貼到將要使用的位置，再在那裡判斷。