跳到取色器

OKLCH 轉 Flutter / Compose 轉換器

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

辨識為 OKLCH

Flutter / Compose 值Color(0xFFFF5733)
Flutter / Compose 轉 OKLCH

調整顏色

11°
100%

68%
0.210
34°

其他所有格式

OKLCH 轉 Flutter / Compose 範例

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

關於 OKLCH 和 Flutter / Compose

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

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

轉換原理

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

常見問題

如何將 OKLCH 轉換為 Flutter / Compose？

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

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

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

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

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

這個轉換器免費嗎？

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