HEXカラーをRGB・HSLへ変換する方法

HEXカラーコードを入力すると、RGBとHSLの表記や各成分を確認できます。入力を省略した場合は、既定の#ff5733が使われます。

HEXカラーの変換について

HEXカラーコードを入力すると、その色をRGBとHSLの表記に変換して確認できます。Webページやアプリの配色を調整するときなど、HEXで指定された色を別の表記で扱いたい場面に向いています。入力を省略して結果を確認することもでき、その場合はあらかじめ設定されたHEXカラーが使われます。

HEX、RGB、HSLは同じ色を異なる方法で表す形式です。HEXはコードの確認、RGBは各色成分の数値確認、HSLは色相・彩度・明度の把握に使い分けられます。このツールではRGBやHSLを入力するのではなく、HEXカラーを入力して変換します。

使い方の手順

1. HEXカラーの入力欄に、変換したい値を指定します。先頭の#は付けても省略しても構いません。#を省略した場合は、解析前に補われます。
2. 短い表記を使う場合は、たとえば#f53のように3文字で入力します。この形式では、f、5、3の各文字がそれぞれ繰り返され、6文字相当として処理されます。
3. 変換を実行します。入力を空欄にした場合は、既定の#ff5733が使われます。色を指定したいときは、空欄のままにせずHEXカラーを入力してください。
4. 表示された結果を確認します。用途に応じて6桁HEXの大文字または小文字、RGBの表記や数値、HSLの表記や数値を参照します。

入力前に、HEXカラーの文字が意図した値になっているか確認しておくと、別の色を変換するミスを減らせます。#の有無は処理前に調整されるため、そこだけを理由に入力し直す必要はありません。

結果の読み方と注意点

正常に解析できた結果には、6桁HEXの大文字表記と小文字表記、RGBおよびHSLのテキスト表現、RGBとHSLの各成分の数値が含まれます。元の入力と変換後の表記を照らし合わせれば、資料やデザイン指定に必要な形式を選べます。

HSLの色相・彩度・明度は整数に丸められます。小数を含む計算結果をそのまま表示するものではないため、別の計算方法や表示形式と比べると、細かな差が出る場合があります。

明るさの分類も結果に含まれます。この分類は、RGBから計算した加重明るさが128を超える場合に限って明るい側と判定されます。色の見た目だけで判断する分類ではないため、画面上の印象と結果の分類が一致しないことがあります。

HEXとして解析できない入力では、解析エラーを示す結果が返ります。結果が目的の色を表していない場合は、入力した文字と長さを確認し、修正してから再度実行してください。

使用例

短いHEX表記を使って、RGBとHSLの結果を確認したい場合です。

入力欄に#f53を指定して変換を実行し、3文字入力が6文字相当に展開された結果を確認します。

入力したHEXカラーに対応する6桁HEXの大文字・小文字表記、RGBとHSLのテキスト表現、各成分の数値、明るさの分類が結果に含まれます。

制限事項

• 解析できないHEX入力ではエラーを示す結果になります。また、HSLの値は整数に丸められ、明るさの分類はRGBから計算した加重明るさが128を超えるかどうかで決まります。

よくある間違い

• HEX以外の文字や想定外の長さを入力すると解析できない場合があります。#の有無ではなく、使用した文字と入力の長さを見直し、3文字または6文字のHEX表記に修正してから再実行してください。

よくある質問

HEXカラーの先頭に#は必要ですか？

先頭の#は省略できます。#がない入力には処理前に#が補われてから解析されます。

3文字のHEXカラーも変換できますか？

3文字のHEX値も扱えます。たとえば#f53は各文字を繰り返した6文字相当として処理されます。

カラーコードを入力しないとどうなりますか？

入力を省略した場合は、既定値の#ff5733が使われます。HEXカラーを指定した場合は、その入力値が解析されます。