顏色轉換器
在 HEX、RGB、HSL、HSV 和 CMYK 之間轉換顏色
HEX
RGB
HSL
HSV
CMYK
輸入或取色時,五種表示實時更新。
色彩空間與其細則
⚡
一次粘貼,全格式齊備
粘貼 "#4f46e5"、rgb(79,70,229) 或 hsl(245,58%,59%),立即得到全部五種表示——不用爲每種模式重輸一遍顏色。
🔒
帶取色器的實時色板
你輸入或拖動原生取色器時預覽即時更新,轉換的結果就是你看到的色板。
什麼是顏色轉換器?
顏色轉換器在同一種顏色的各種格式之間互譯。設計軟件導出 HEX 或 CMYK,前端工程師需要 CSS 用的 rgb() 或 hsl(),數據工具可能要 hsv()。與其打開五次取色器,不如粘貼已有值,立即看到其他所有表示:"#4f46e5" → rgb(79, 70, 229) → hsl(245, 58%, 59%)。轉換器解析你提供的任意格式,用標準正反公式計算全部等價表示,並顯示實時色板,讓你在複製之前先確認色相。
它能做什麼
- 解析 hex(#fff、#ffffff、#rrggbbaa)和 rgba() 輸入
- 對任意輸入計算 rgb / hsl / hsv / cmyk 等價表示
- 輸入或取色時實時更新預覽色板
- 保留存在的 alpha(8 位 hex、rgba)
- 每種格式都有獨立複製按鈕
- 原生取色器支持可視化選取
什麼時候用它
- 把設計工具裏的品牌色搬進 CSS 變量
- 把印刷的 CMYK 值轉成網頁安全的 hex
- 爲 CSS 漸變和深色模式配色獲取 hsl 值
- 覈對別的轉換器是如何取整顏色的
隱私:轉換完全在你的瀏覽器裏進行,輸入的內容絕不會被上傳。
HEX、RGB、HSL 與對比的真相
- HEX 與 RGB 是同一組 sRGB 數值的兩種寫法——互轉是純算術,絕不會偏色。
- HSL 把同一色域捲成圓柱:色相旋轉、飽和度輻射、亮度抬升;等距的 HSL 步進看起來差異並不相等——OKLCH 那類感知均勻空間正是為此而生。
- WCAG 對比用伽瑪展開後的相對亮度計算,不是 RGB 直接取平均;下方檢查器採用官方 2.1 公式。
常見問題
支持哪些格式?⌄
Hex(3、4、6、8 位——8 位含 alpha)、rgb()/rgba()、hsl()/hsla()、hsv()/hsb() 和 cmyk()。無論輸入 #FFF、rgb(255 0 0) 還是 hsl(0, 100%, 50%) 都會自動歸一化。
轉換精確嗎?⌄
與標準 CSS 轉換公式一致(通道取整到整數)。HSL/HSV 色相保留一位小數精度;CMYK 按常規公式計算並取整到一位小數百分比。
我的顏色會被髮送嗎?⌄
不會。一切都在你的瀏覽器裏用純 JavaScript 運行——沒有任何內容被傳輸或存儲。