カラーピッカーへ移動

RGBをFlutter / Composeに変換

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

RGBとして認識

Flutter / Composeの値Color(0xFFFF5733)
Flutter / ComposeからRGBへ

色を調整

11°
100%

68%
0.210
34°

ほかのすべての形式

RGBからFlutter / Composeへの変換例

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

RGBとFlutter / Composeについて

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

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

変換のしくみ

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

よくある質問

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

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

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

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

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

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

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

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