カラーピッカーへ移動

Flutter / ComposeをRGBAに変換

Flutter / Composeの値を貼り付けると、すぐにRGBAに変換します。ほかの形式も入力できます。

Flutterのコードとして認識

RGBAの値rgba(255, 87, 51, 1)

色を調整

11°
100%

68%
0.210
34°

ほかのすべての形式

不透明度の早見表:HEXのアルファ値とRGBA

8桁のHEXでは最後の2桁が不透明度を表します。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は色を1つの32ビットARGB値で書きます(例:Color(0xFFFF5733))。0xの直後の2桁がアルファで、FFは完全に不透明です。

RGBAはRGBに不透明度のアルファチャンネルを加えた形式で、rgba(255, 87, 51, 0.5)のように書きます。アルファは0(完全に透明)から1(完全に不透明)まで。同じ不透明度は#ff573380のような8桁のHEXでも書けます。

変換のしくみ

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を含むほかのすべての形式が結果の下に並び、ワンクリックでコピーできます。

この変換ツールは無料ですか?

はい。無料で登録も不要、すべてブラウザ内で動作します。