0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
設定
在所有格式之間轉換顏色：HEX、RGB、HSL、HWB、HSV、LAB、LCH、OKLab、OKLCh、XYZ D50/D65、Display P3、A98、ProPhoto、Rec. 2020 和 CMYK。包含可互動的視覺選擇器。
#3b82f6
HEX, rgb(), hsl(), oklch(), color(), etc.
結果
基本
#RRGGBB
#RRGGBBAA
rgb(r g b)
CSS 第 3 級
hsl(h s% l%)
CSS 第 4 級
hwb(h w% b%)
lab(l a b)
lch(l c h)
oklab(l a b)
oklch(l c h)
color(xyz-d50 x y z)
color(xyz-d65 x y z)
color()
color(display-p3 r g b)
color(a98-rgb r g b)
color(prophoto-rgb r g b)
color(rec2020 r g b)
其他
hsv(h s% v%)
印刷
cmyk(c% m% y% k%)

運作方式

同一種顏色可以有多種寫法。HEX（#RRGGBB）和 RGB 描述紅、綠、藍的混合；HSL 和 HSV 用色相、飽和度和明度描述，更便於選擇變體；而 CMYK 面向印刷。

此工具接受 HEX、RGB 或 HSL 顏色，並即時將其轉換為所有格式，包括 HWB、LAB、LCH、OKLab、OKLCh 等現代 CSS 第 4 級色彩空間以及 color() 函數（Display P3、Rec. 2020、ProPhoto）。

視覺化選擇器和數值控制項讓你調整顏色並同時查看所有值的變化。一切都在你的瀏覽器中計算。

範例

#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)純紅色：紅色通道最大，綠色和藍色為零。
#3b82f6rgb(59 130 246)每對十六進位數字（3b、82、f6）是某個通道的 0-255 值：59、130 和 246。
#ffffffrgb(255 255 255) · hsl(0 0% 100%)白色三個通道都為最大；在 HSL 中明度為 100%。

使用情境

  • 將設計規範中的 HEX 顏色轉換為你的 CSS 或框架所需的 RGB 或 HSL 格式。
  • 取得螢幕顏色的 CMYK 等價值，以準備印刷材料。
  • 在調整寬色域調色盤時探索現代色彩空間（OKLCh、Display P3）。

常見問題

什麼是 alpha 通道，它在 HEX 中如何書寫？

alpha 是不透明度，從 0（透明）到 100%。在 HEX 中它作為末尾的一對數字添加：#RRGGBBAA。例如，#ff000080 是 50% 不透明度的紅色。

HSL 和 HSV 有什麼區別？

兩者都使用色相和飽和度，但第三個軸不同：HSL 使用明度（100% 為白色），HSV 使用明度/值（100% 為最濃的顏色）。HSL 通常更便於生成淺色和深色。

為什麼會有 OKLab 和 OKLCh？

它們是感知均勻的色彩空間：值之間相等的距離對應相似的視覺差異。它們比 HSL 產生更自然的漸層和明度調整，CSS 從第 4 級起支援它們。

它顯示的 CMYK 用於印刷準確嗎？

這是一個近似的參考轉換。實際印刷結果取決於色彩描述檔、油墨和紙張，因此專業工作最好使用印刷廠的 ICC 描述檔。

另請參閱