Irodori彩り

RGB to HEX

HEX · RGB · HSL · OKLCH · Lab · CMYK

RGB to HEX

どの色形式も同じものを別の言語で表しています。HEX はスタイルシート、RGB は画面とコード、HSL はパレット構築、CMYK は印刷向けです。必要な変換を選び、正確な値・ライブプレビュー・計算式を確認してください。

この色のすべての形式

同じ色を HEX・RGB・HSL・CMYK で表記。どの値もコピーできます。

RGB → HEX 変換

RGB の値はまず sRGB の三つ組(赤・緑・青、0–255)に正規化され、その後 HEX として符号化されます。どちらも同じ画素を表すため、見える色は変わりません。

1

入力を読み取る

RGB の値をチャンネル(16 進数の対、数値、百分率)に分解します。

2

sRGB に正規化

各チャンネルを 0–255 に拡大し、丸めの累積を防ぎます。

3

HEX に符号化

結果を HEX 表記で出力し、スタイルシートやデザインツールに貼り付けます。

計算式

rgb(255, 87, 51)
→ sRGB  rgb(255,87,51)
→ HEX  #FF5733

計算例

rgb(255, 87, 51) = #FF5733 = #FF5733

チャンネルは整数に丸めます。戻すときは同じツールを使うと誤差を抑えられます。

RGB → HEX 対応表

同じ式で換算した代表値。

入力(RGB)結果(HEX)
rgb(255,87,51)#FF5733
rgb(79,70,229)#4F46E5
rgb(46,204,113)#2ECC71
rgb(52,152,219)#3498DB
rgb(231,76,60)#E74C3C
rgb(25,174,153)#19AE99
rgb(155,89,182)#9B59B6
rgb(243,156,18)#F39C12
rgb(52,73,94)#34495E
rgb(233,31,99)#E91F63
rgb(0,0,0)#000000
rgb(255,255,255)#FFFFFF

すべての変換

よくある質問

RGB を HEX にすると色は変わりますか?
いいえ。どちらも同じ sRGB の色を表し、表記だけが変わります。
他の変換ツールと HEX の値が違うのはなぜですか?
丸めの違いです。ツールによって丸める段階や白点が異なります。当サイトは CSS Color 4 と D65 に従います。
HEX の値をそのまま CSS に書けますか?
はい。HEX は CSS 標準または広く対応された表記で、スタイルシートや canvas、デザインツールで使えます。
印刷にはどの形式を使いますか?
印刷は CMYK、画面は RGB/HEX を使います。CMYK は近似のため、最終データは印刷プロファイルで変換してください。