跳到取色器

Flutter / Compose 轉 OKLCH 轉換器

貼上 Flutter / Compose 值，立即得到 OKLCH。其他格式也一樣能用。

辨識為 Flutter 程式碼

OKLCH 值oklch(68.036% 0.21001 33.692)
OKLCH 轉 Flutter / Compose

調整顏色

11°
100%

68%
0.210
34°

其他所有格式

Flutter / Compose 轉 OKLCH 範例

顏色Flutter / ComposeOKLCH
Color(0xFFFF0000)oklch(62.796% 0.25768 29.234)
Color(0xFF00FF00)oklch(86.644% 0.29483 142.495)
Color(0xFF0000FF)oklch(45.201% 0.31321 264.052)
Color(0xFFFFFFFF)oklch(100% 0 0)
Color(0xFF000000)oklch(0% 0 0)
Color(0xFF808080)oklch(59.987% 0 0)
Color(0xFFFF5733)oklch(68.036% 0.21001 33.692)
Color(0xFF3B82F6)oklch(62.308% 0.18801 259.815)
Color(0xFF10B981)oklch(69.587% 0.14907 162.48)
Color(0xFFF59E0B)oklch(76.859% 0.16466 70.08)
Color(0xFF8B5CF6)oklch(60.563% 0.21892 292.717)
Color(0xFFEC4899)oklch(65.592% 0.21177 354.308)

關於 Flutter / Compose 和 OKLCH

Flutter 與 Jetpack Compose 將顏色寫成一個 32 位元 ARGB 數值，例如 Color(0xFFFF5733)。0x 後面的兩位十六進位數字是 Alpha，FF 代表完全不透明。

OKLCH 是 OKLab 的極座標形式：亮度、彩度和色相。Tailwind CSS v4 的整套調色盤都用它，因為調整亮度時色相會保持穩定。

轉換原理

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

常見問題

如何將 Flutter / Compose 轉換為 OKLCH？

在上方欄位貼上或輸入 Flutter / Compose 值。PickShade 會在你輸入時用 CSS Color 4 公式即時轉換，點一下就能複製 OKLCH 值。

Flutter / Compose 轉 OKLCH 的結果精確嗎？

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

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

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

這個轉換器免費嗎？

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