跳到取色器

Lab 轉 HSLA 轉換器

貼上 Lab 值,立即得到 HSLA。其他格式也一樣能用。

辨識為 CIE Lab

HSLA 值hsla(10.59, 100%, 60%, 1)
HSLA 轉 Lab

調整顏色

11°
100%

68%
0.210
34°

其他所有格式

透明度對照表:HEX 透明度值與 HSLA

在 8 位數 HEX 中,最後兩位代表不透明度:FF 完全不透明,80 約為 50%,00 完全透明。表格以 5% 為間隔列出範例顏色。

不透明度HEX 透明度HEXHSLA
100%ff#ff5733hsla(10.59, 100%, 60%, 1)
95%f2#ff5733f2hsla(10.59, 100%, 60%, 0.95)
90%e6#ff5733e6hsla(10.59, 100%, 60%, 0.9)
85%d9#ff5733d9hsla(10.59, 100%, 60%, 0.85)
80%cc#ff5733cchsla(10.59, 100%, 60%, 0.8)
75%bf#ff5733bfhsla(10.59, 100%, 60%, 0.75)
70%b3#ff5733b3hsla(10.59, 100%, 60%, 0.7)
65%a6#ff5733a6hsla(10.59, 100%, 60%, 0.65)
60%99#ff573399hsla(10.59, 100%, 60%, 0.6)
55%8c#ff57338chsla(10.59, 100%, 60%, 0.55)
50%80#ff573380hsla(10.59, 100%, 60%, 0.5)
45%73#ff573373hsla(10.59, 100%, 60%, 0.45)
40%66#ff573366hsla(10.59, 100%, 60%, 0.4)
35%59#ff573359hsla(10.59, 100%, 60%, 0.35)
30%4d#ff57334dhsla(10.59, 100%, 60%, 0.3)
25%40#ff573340hsla(10.59, 100%, 60%, 0.25)
20%33#ff573333hsla(10.59, 100%, 60%, 0.2)
15%26#ff573326hsla(10.59, 100%, 60%, 0.15)
10%1a#ff57331ahsla(10.59, 100%, 60%, 0.1)
5%0d#ff57330dhsla(10.59, 100%, 60%, 0.05)
0%00#ff573300hsla(10.59, 100%, 60%, 0)

Lab 轉 HSLA 範例

顏色LabHSLA
lab(54.29 80.8 69.89)hsla(0, 100%, 50%, 1)
lab(87.82 -79.27 80.99)hsla(120, 100%, 50%, 1)
lab(29.57 68.29 -112.03)hsla(240, 100%, 50%, 1)
lab(100 0 0)hsla(0, 0%, 100%, 1)
lab(0 0 0)hsla(0, 0%, 0%, 1)
lab(53.59 0 0)hsla(0, 0%, 50.2%, 1)
lab(61.03 63.55 55.96)hsla(10.59, 100%, 60%, 1)
lab(54.62 8.76 -65.79)hsla(217.22, 91.22%, 59.8%, 1)
lab(66.69 -50.67 17.06)hsla(160.12, 84.08%, 39.41%, 1)
lab(72.79 26.93 75.43)hsla(37.69, 92.13%, 50.2%, 1)
lab(50.69 45.85 -71.8)hsla(258.31, 89.53%, 66.27%, 1)
lab(57.31 67.87 -7.12)hsla(330.37, 81.19%, 60.39%, 1)

關於 Lab 和 HSLA

CIE Lab 用亮度 L 和兩條色彩軸描述顏色:a(綠到紅)和 b(藍到黃)。它與裝置無關,常用來計算 ΔE 等色差。

HSLA 是在 HSL 上加入代表不透明度的 Alpha 通道,寫作 hsla(11, 100%, 60%, 0.5)。Alpha 從 0(完全透明)到 1(完全不透明),現代 CSS 也能直接寫在 hsl() 裡。

轉換原理

我們讀取 Lab 值,用 CSS Color 4 規範中的矩陣將它轉換為 CIE XYZ,再轉換為 HSLA。超出目標色域的值會依 CSS Color 4 演算法映射:保留亮度和色相,降低彩度。

常見問題

如何將 Lab 轉換為 HSLA?

在上方欄位貼上或輸入 Lab 值。PickShade 會在你輸入時用 CSS Color 4 公式即時轉換,點一下就能複製 HSLA 值。

Lab 轉 HSLA 的結果精確嗎?

計算是精確的,結果只在顯示時四捨五入,保留的位數足以轉換回同一個顏色。如果顏色超出目標色域,PickShade 會提醒你,並顯示色域內最接近的顏色。

可以同時取得其他格式嗎?

可以。其他所有格式,包括 OKLCH、Display P3、Tailwind、SwiftUI、Flutter 和 Android,都列在結果下方,點一下就能複製。

這個轉換器免費嗎?

免費。不必註冊,而且完全在你的瀏覽器中執行。