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

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

HEXカラーは、色を16進数で表す値です。このツールでは、3桁または6桁のHEXカラーを入力すると、RGBの各チャンネルを確認できます。先頭の「#」は付けても省いても扱えるため、入力したい表記に合わせて指定できます。RGB値に加えて、複数の表記形式を確認したい場合にも利用できます。

HEXカラーの入力欄に、3桁または6桁の16進数を入力します。先頭に「#」を付けた形でも、付けない形でも入力できます。入力を省略した場合は、初期値として「#ff0000」が使われます。
変換を実行します。3桁の入力は各桁を展開してから変換されます。たとえば「#0f0」のような短縮表記も対象です。
表示された結果を確認します。有効な入力では、赤・緑・青の数値チャンネルに加えて、大文字のHEX表記、カンマ区切りのRGB表記、スペース区切りのRGB表記、RGBのパーセント表記が返されます。必要な表記を選び、指定内容の確認に利用してください。

結果の赤・緑・青の数値は、入力した色をRGBの各チャンネルに分けたものです。大文字のHEX表記は、コードの大文字表記を確認したいときに参照できます。カンマ区切り、スペース区切り、パーセントの各RGB表記は、必要な記法に応じて使い分けられます。

変換結果が得られない場合は、文字数と使用文字を見直してください。対象は3桁または6桁の16進数で、16進数ではない文字や対象外の長さを含む入力は、変換済みの色値ではなく失敗扱いになります。なお、アルファ値やHEX・RGB以外の色形式に対応することまでは確認されていません。

短縮表記の「#0f0」をRGBの各チャンネルと複数の色表記で確認したい場合です。

「#0f0」を入力して変換を実行し、3桁表記が処理された後の各RGBチャンネルと関連表記を確認します。

入力した色に対して、赤・緑・青の数値チャンネル、大文字のHEX表記、カンマ区切り・スペース区切り・パーセントのRGB表記が結果として示されます。

入力に16進数ではない文字が含まれている、または3桁・6桁以外の長さになっていると変換に失敗します。文字を0〜9、A〜Fまたはa〜fでそろえ、桁数を確認してから再実行してください。

3桁または6桁の16進数であれば、先頭に「#」を付けても省いても入力できます。3桁の場合は各桁が展開されてから変換されます。

空欄のまま変換すると、初期値として「#ff0000」が使われます。別の色を調べる場合は、対象の3桁または6桁のHEXカラーを入力してください。

有効な入力では、赤・緑・青の数値、大文字のHEX表記、カンマ区切りとスペース区切りのRGB表記、RGBのパーセント表記を確認できます。