正在準備工作區…
輸入
正在準備工作區…
輸出
結果將顯示在這裡。
使用方法
- 輸入 HEX、RGB、HSL 或 CSS 命名顏色。
- 檢查色塊與轉換後的數值。
- 使用各自的「複製」按鈕複製 HEX、RGB 或 HSL。
一種顏色，三種 CSS 寫法
設計 token可能使用 HEX，而樣式表使用 RGB 或 HSL。轉換顏色寫法，即可重複使用同一種顏色，不需重新選色。
色塊和三種輸出會同步更新。rebeccapurple 等命名顏色也能轉換為 CSS 數值。
選擇顏色寫法
HEX 適合簡潔的設計 token；RGB 展示紅、綠、藍通道；HSL 分別表示色相、飽和度和明度。這些是顏色的不同表達方式，並非不同的圖片格式。
支援短格式與完整 HEX。可透過支援的 HEX、RGB 或 HSL 語法提供 Alpha 通道。
輸入
#2563eb結果
rgb(37, 99, 235)同一種不透明 sRGB 顏色的 HEX 與 RGB 表示。
透明度與精度
透明顏色在轉換後會保留 Alpha 通道，其外觀仍取決於下方的背景。
工具處理 sRGB 色值，顯示時會捨入。不支援 Lab、OKLCH 或 CSS color() 函式的廣色域轉換。
使用轉換後的值
複製按鈕匯出色值，而非完整的屬性宣告。可視需要用於 color、background-color、border-color 或設計 token定義。
處理限制
文字輸入上限 1 MiB。CSS 與 HTML 轉換在工作執行緒中執行，限時 30 秒。顏色工具使用 sRGB；產生的樣式僅供預覽，需要在您的版面配置中測試。
延伸閱讀MDN · CSS 色值
?
常見問題
可以輸入哪些顏色格式？
可輸入支援的 HEX、RGB、HSL 色值或 CSS 命名顏色。不支援的語法會顯示錯誤，不會產生轉換結果。
會保留透明度嗎？
會。支援的 Alpha 輸入會保留在各輸出格式中。請結合實際使用的背景檢查色塊。
為什麼輸出的寫法或精度不同？
顯示時會規範化並捨入數值，不保留原始簡寫、空白或數值的精確拼寫。
支援 OKLCH 或 Display P3 嗎？
不支援。此工具僅處理 sRGB 顏色表達，不會將更廣的色域映射到 sRGB。
色值會被上傳嗎？
不會。轉換和預覽均在瀏覽器中完成。「複製」僅將所選輸出寫入剪貼簿。