RGB値をHEXカラーに変換する方法

RGB値をHEXカラーに変換するには

RGBの3つのチャンネル値から、Webカラーコードなどで使えるHEXカラー文字列を作成できます。赤・緑・青をそれぞれ入力すると、先頭に「#」を付けた6桁の小文字HEX表記を確認できます。色の指定方法をRGBからHEXへそろえたいときに適しています。

RGBからHEXへ変換する手順

赤、緑、青の各チャンネルに値を入力します。値を省略した場合は、赤が255、緑と青が0として扱われます。
変換を実行します。各チャンネルは整数に変換されたうえで、0から255までの範囲に収められます。
表示されたHEXカラーを確認します。主な結果は「#」で始まり、各チャンネルを2桁の小文字HEXで表した形式です。必要に応じて、大文字HEX、カンマ区切りのRGB表記、空白区切りのRGB表記も使い分けます。
入力が数値として解釈できない場合は、変換された色ではなく、エラーの内容を示す結果になっていないか確認します。

変換結果の見方と注意点

結果のHEX表記は、赤・緑・青の順に各チャンネルを2桁の16進数へ置き換えたものです。小文字のHEX表記をそのままカラー値として利用できるほか、大文字表記やRGB形式も用途に応じて参照できます。

入力した数値が0未満または255を超える場合は、変換時に0から255の範囲へ収められます。そのため、入力欄に入力した値と、結果から読み取れるチャンネル値が異なることがあります。文字列や扱えない型など、整数へ変換できない値を指定した場合は、色コードが返るとは限らず、成功扱いの結果にエラー表示が含まれます。表示された内容を確認し、該当チャンネルを整数として解釈できる値に直して再実行してください。

使用例

赤255・緑0・青0で変換すると、赤チャンネルを最大値、緑と青を最小値として表す結果の形を確認できます。

赤に255、緑に0、青に0を入力して変換を実行し、表示されたカラー表記を確認します。

結果には、#で始まる各チャンネル2桁の小文字HEX表記が含まれ、あわせて大文字HEX、カンマ区切りRGB、空白区切りRGBの表記も確認できます。

制限事項

整数へ変換できないチャンネル値では、変換されたカラーではなくエラー表示を含む結果になる場合があります。

よくある間違い

数値として解釈できない値や型をチャンネルに入れると、変換色ではなくエラー表示を含む結果になります。赤・緑・青の各欄を整数として解釈できる値に修正してください。

よくある質問

RGBの値を一部省略しても変換できますか？

値を省略したチャンネルには、赤255、緑0、青0が使われます。3つすべてを入力しなくても変換できます。

HEXの結果はどの形式で表示されますか？

主なHEX結果は、#で始まる各2桁の小文字表記です。加えて、大文字HEX、カンマ区切りのRGB表記、空白区切りのRGB表記も確認できます。

RGB欄に無効な値を入力するとどうなりますか？

整数へ変換できない値や型を入力した場合は、色コードではなく、成功扱いの結果にエラー表示が含まれます。入力を整数として解釈できる値に直してください。