カラーピッカーへ移動

Flutter / ComposeをRGBに変換

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

Flutterのコードとして認識

RGBの値rgb(255, 87, 51)
RGBからFlutter / Composeへ

色を調整

11°
100%

68%
0.210
34°

ほかのすべての形式

Flutter / ComposeからRGBへの変換例

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

Flutter / ComposeとRGBについて

FlutterとJetpack Composeは色を1つの32ビットARGB値で書きます（例：Color(0xFFFF5733)）。0xの直後の2桁がアルファで、FFは完全に不透明です。

RGBは赤、緑、青をそれぞれ0〜255で指定します。画面が光を混ぜる仕組みそのもので、最新のCSSでは rgb(255 87 51) と書きます。

変換のしくみ

Flutter / Composeの値を読み取り、CSS Color 4仕様の行列でCIE XYZに変換してからRGBにします。変換先の色域に収まらない値はCSS Color 4のアルゴリズムで調整し、明度と色相を保ったままクロマを下げます。

よくある質問

Flutter / ComposeをRGBに変換するには？

上の入力欄にFlutter / Composeの値を貼り付けるか入力してください。PickShadeが入力と同時にCSS Color 4の計算式で変換し、ワンクリックでRGBの値をコピーできます。

Flutter / ComposeからRGBへの変換は正確ですか？

計算は正確で、丸めるのは表示のときだけです。桁数は元の色に戻せるだけ残しています。変換先の色域に収まらない場合は、PickShadeが警告し、収まる範囲で最も近い色を表示します。

ほかの形式も同時に確認できますか？

はい。OKLCH、Display P3、Tailwind、SwiftUI、Flutter、Androidを含むほかのすべての形式が結果の下に並び、ワンクリックでコピーできます。

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

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