tomai
登入
免費 · 開發者工具

顏色轉換器

在 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 運行——沒有任何內容被傳輸或存儲。

相關工具

相關工具