跳到取色器

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，都列在结果下方，点击即可复制。

这个转换器免费吗？

免费。无需注册，完全在你的浏览器中运行。