跳到取色器

Flutter / Compose 转 RGBA 转换器

粘贴 Flutter / Compose 值,立即得到 RGBA。其他格式也同样支持。

识别为 Flutter 代码

RGBA 值rgba(255, 87, 51, 1)

调整颜色

11°
100%

68%
0.210
34°

其他所有格式

透明度对照表:HEX 透明度值与 RGBA

在 8 位 HEX 中,最后两位表示不透明度:FF 完全不透明,80 约为 50%,00 完全透明。表格按 5% 的间隔列出示例颜色。

不透明度HEX 透明度HEXRGBA
100%ff#ff5733rgba(255, 87, 51, 1)
95%f2#ff5733f2rgba(255, 87, 51, 0.95)
90%e6#ff5733e6rgba(255, 87, 51, 0.9)
85%d9#ff5733d9rgba(255, 87, 51, 0.85)
80%cc#ff5733ccrgba(255, 87, 51, 0.8)
75%bf#ff5733bfrgba(255, 87, 51, 0.75)
70%b3#ff5733b3rgba(255, 87, 51, 0.7)
65%a6#ff5733a6rgba(255, 87, 51, 0.65)
60%99#ff573399rgba(255, 87, 51, 0.6)
55%8c#ff57338crgba(255, 87, 51, 0.55)
50%80#ff573380rgba(255, 87, 51, 0.5)
45%73#ff573373rgba(255, 87, 51, 0.45)
40%66#ff573366rgba(255, 87, 51, 0.4)
35%59#ff573359rgba(255, 87, 51, 0.35)
30%4d#ff57334drgba(255, 87, 51, 0.3)
25%40#ff573340rgba(255, 87, 51, 0.25)
20%33#ff573333rgba(255, 87, 51, 0.2)
15%26#ff573326rgba(255, 87, 51, 0.15)
10%1a#ff57331argba(255, 87, 51, 0.1)
5%0d#ff57330drgba(255, 87, 51, 0.05)
0%00#ff573300rgba(255, 87, 51, 0)

Flutter / Compose 转 RGBA 示例

颜色Flutter / ComposeRGBA
Color(0xFFFF0000)rgba(255, 0, 0, 1)
Color(0xFF00FF00)rgba(0, 255, 0, 1)
Color(0xFF0000FF)rgba(0, 0, 255, 1)
Color(0xFFFFFFFF)rgba(255, 255, 255, 1)
Color(0xFF000000)rgba(0, 0, 0, 1)
Color(0xFF808080)rgba(128, 128, 128, 1)
Color(0xFFFF5733)rgba(255, 87, 51, 1)
Color(0xFF3B82F6)rgba(59, 130, 246, 1)
Color(0xFF10B981)rgba(16, 185, 129, 1)
Color(0xFFF59E0B)rgba(245, 158, 11, 1)
Color(0xFF8B5CF6)rgba(139, 92, 246, 1)
Color(0xFFEC4899)rgba(236, 72, 153, 1)

关于 Flutter / Compose 和 RGBA

Flutter 和 Jetpack Compose 把颜色写成一个 32 位 ARGB 数值,例如 Color(0xFFFF5733)。0x 后面的两位十六进制数是 Alpha,FF 表示完全不透明。

RGBA 是在 RGB 上加了表示不透明度的 Alpha 通道,写作 rgba(255, 87, 51, 0.5)。Alpha 从 0(完全透明)到 1(完全不透明)。同样的透明度也可以写成 8 位 HEX,例如 #ff573380。

转换原理

我们读取 Flutter / Compose 值,用 CSS Color 4 规范中的矩阵将其转换为 CIE XYZ,再转换为 RGBA。超出目标色域的值会按 CSS Color 4 算法映射:保持亮度和色相,降低彩度。

常见问题

如何将 Flutter / Compose 转换为 RGBA?

在上方输入框中粘贴或输入 Flutter / Compose 值。PickShade 会在你输入时用 CSS Color 4 公式实时转换,点击一下即可复制 RGBA 值。

Flutter / Compose 转 RGBA 的结果精确吗?

计算是精确的,结果只在显示时取整,保留的位数足以转换回同一个颜色。如果颜色超出目标色域,PickShade 会提示你,并显示色域内最接近的颜色。

能同时得到其他格式吗?

可以。其他所有格式,包括 OKLCH、Display P3、Tailwind、SwiftUI、Flutter 和 Android,都列在结果下方,点击即可复制。

这个转换器免费吗?

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