🎨 顏色挑選器
挑選顏色並即時取得 HEX、RGB 和 HSL 值。
這是什麼工具？
顏色挑選器是一種工具，讓您從視覺調色盤中選擇顏色，並即時查看其在網頁上最常用的三種顏色格式中的值：HEX、RGB 和 HSL。設計師、開發者和藝術家經常在這些表示法之間轉換，因為不同的工具和情境需要不同的格式。CSS 樣式表通常接受三種中的任何一種，但 Figma 或 Photoshop 等設計軟體可能預設顯示 HEX，而資料視覺化函式庫經常要求 RGB 或 HSL 元組。這個工具透過並排顯示三種值並在您調整顏色時保持同步來彌補這些差距，因此您不必另外尋找轉換器。內建的顏色輸入會開啟您作業系統的原生挑選器，支援整個光譜的精細選擇，而手動 HEX 欄位則讓您貼上現有代碼進行檢查或轉換。大型預覽色塊以足夠的尺寸顯示確切顏色，讓您可以準確判斷，一鍵複製按鈕將每個值傳送到您的剪貼簿，準備貼到樣式表、組件庫或設計文件中。由於轉換使用標準色彩空間數學，這些值在各瀏覽器間是精確且一致的。無論您是在建立品牌調色盤、挑選按鈕的強調色，還是將設計師的 HEX 代碼轉換為圖表函式庫所需的 HSL，這個工具都能以正確的格式提供您所需的值，毫無摩擦。運作原理
工具維護當前顏色的單一事實來源，並在來源變更時在格式之間轉換。當您使用視覺顏色輸入時，瀏覽器傳回一個 HEX 字串（如 #3b82f6），工具讀取並透過解析十六進位對將其分割為紅、綠、藍三個成分。這三個值（每個範圍從零到二百五十五）構成顯示的 RGB 元組。為產生 HSL 表示，工具將 RGB 通道標準化到零到一的範圍，找到最大值和最小值來計算亮度，然後從它們之間的差距推導飽和度，最後根據哪個通道最大來計算色相在色環上的角度。當您手動輸入 HEX 代碼時，工具驗證輸入，接受帶或不帶前綴 # 的代碼，並填充三位數簡寫，然後執行相同的轉換流程，使 RGB 和 HSL 輸出即時更新。顏色預覽色塊透過將其背景設為當前 HEX 值來更新，為您提供所選顏色的準確、全尺寸渲染。每次轉換都在 JavaScript 中本機進行，因此工具快速、私密且可離線運作，所有計算均不需要任何網路呼叫。使用方法
挑選和轉換顏色只需片刻。
- 點擊彩色方塊以開啟您系統的原生顏色挑選器並視覺地選擇任何顏色。或者，在 HEX 輸入欄位中輸入六位數的 HEX 代碼（帶或不帶前綴 #）。
- 當您變更顏色時，預覽色塊會即時更新，HEX、RGB 和 HSL 值也會即時重新計算。
- 查看預覽下方顯示的三個值。每個值都以可直接貼到 CSS 或設計工具中的確切格式顯示。
- 點擊您需要的格式旁邊的複製按鈕，將該值傳送到您的剪貼簿，然後貼到您的樣式表、組件或文件中。您可以隨意切換顏色，每個值都保持完美同步。
常見問題
常見問題
HEX、RGB 和 HSL 有什麼不同？
HEX 將顏色表示為六位數的十六進位字串，例如 #FF5733，其中每對數字代表紅、綠、藍三個通道。RGB 將同樣的三個通道值列為從 0 到 255 的十進位數字，例如 rgb(255, 87, 51)。HSL 以色相、飽和度和亮度來描述顏色，這通常更直覺，因為您可以透過調整單一值來使顏色變暗或增加飽和度。
我可以手動輸入 HEX 代碼嗎？
可以。在 HEX 欄位中輸入任何有效的六位數 HEX 代碼（帶或不帶前綴 #），工具即會即時更新預覽並顯示對應的 RGB 和 HSL 值。三位數簡寫（如 #3b5）也被接受並擴展為六位數形式。
我應該在 CSS 中使用哪種格式？
三種格式在現代 CSS 中都是有效的，因此選擇主要取決於便利性。HEX 精簡且在樣式表中被廣泛使用。RGB 在您需要透過 rgba() 表示法調整透明度時很清楚。HSL 在您想要建立同一色相的色調和陰影時特別有用，因為您可以只改變亮度，同時保持色相和飽和度不變。
轉換後的值精確嗎？
是的。轉換使用標準色彩空間數學，因此 HEX、RGB 和 HSL 值是準確且在各瀏覽器間一致的。由於這些格式都描述同一個 sRGB 色彩空間，在它們之間轉換永遠不會遺失資訊。
技巧與建議
建立調色盤時，從單一品牌色開始，使用 HSL 讀數透過調整亮度和飽和度同時保持色相不變來產生和諧的變體，這會產生感覺屬於一體的色調和陰影。對於無障礙介面，始終檢查您所選顏色與其上的文字或背景之���的對比度，因為看起來引人注目的顏色仍可能無法滿足可讀性標準。請記住，HSL 亮度 50% 不等於感知亮度，因此在相同 HSL 亮度下非常亮的黃色和非常暗的藍色看起來可能差異很大。如果您要將顏色交接給開發者，請提供 HEX 代碼作為標準值，並包含 RGB 和 HSL 等效值作為參考。最後，將最終調色盤儲存在共用的 token 檔案中，讓每位團隊成員參考相同的值，這可以防止顏色從一個工具複製到另一個工具時產生的微妙偏差。