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

色のテキストを入力し、hex、rgb、hslから形式を選ぶと、対応する表現や数値、プレビューを確認できます。空の入力や認識されない形式は変換結果になりません。

色の表記を見比べる場面

HEX、RGB、HSLの色テキストを別の表記で確認したいときに使えるカラー変換ツールです。入力した色は、変換に成功するとHEX・RGB・HSLの各表現、RGBチャンネルとHSL成分の数値、プレビューで確認できます。デザインデータの色を別形式に書き換えたい場合や、複数の表記を見比べたい場合に便利です。空欄や解釈できない内容では結果が返らないため、入力値と形式の指定を確認してから使いましょう。

入力形式を選んで変換する手順

1. 変換したい色のテキストを入力します。HEXは3桁または6桁で指定でき、先頭の#は付けても省略しても構いません。
2. 入力形式の選択欄で、hex、rgb、hslのいずれかを小文字で指定します。形式を省略した場合はhexとして扱われるため、HEX以外を入力するときは形式を明示してください。
3. RGBを使う場合は、数値部分が3つとして読み取られ、各チャンネルが0から255までに収まる内容にします。HSLは数値部分を3つ含め、色相、彩度、明度の順に入力します。色相は360度の周期で扱われ、彩度と明度が100％を超える場合は100％に抑えられます。
4. 変換を実行し、表示された各表現とプレビューを確認します。空の値、範囲外のRGB、数値が足りないHSL、認識されない形式などでは、変換に成功しないことがあります。

変換結果を確認するときの境界

成功した場合は、変換後のHEX・RGB・HSL表現だけでなく、RGBの各チャンネル値、HSLの各成分値、プレビューも確認できます。RGBチャンネルは整数で示され、変換されたHSLの成分も整数に丸められます。

RGBとHSLは、入力全体の構文を厳密に確認するのではなく、文字列内の数値部分を取り出して処理する場合があります。そのため、変換できたという結果だけで、入力文字列が正しい形式だったと判断しないでください。HSLにマイナス記号を付けても負の数として扱われず、記号の後にある数字が読み取られることがあります。意図した色とプレビューが異なるときは、余分な文字や符号を取り除き、各値を確認してから再入力します。

使用例

Webデザインで使っている3桁のHEXカラーを、RGBとHSLの表記でも確認したい場合に利用します。

入力欄に#3afを入力し、形式としてhexを選択して変換します。

成功すると、入力色に対応するHEX・RGB・HSL表現、RGBチャンネルとHSL成分の数値、プレビューが表示されます。

制限事項

• RGBとHSLは数値部分の抽出によって変換される場合があるため、見た目が崩れた文字列でも成功する可能性があります。一方、空欄は失敗し、HSLのマイナス記号は負の値として解釈されない場合があります。

よくある間違い

• 形式名をHEXやRGBのように大文字で指定すると、選択内容が認識されないことがあります。hex、rgb、hslのいずれかを小文字で選び、入力した色の表記と一致させてください。

よくある質問

HEXカラーはどのように入力しますか？

先頭の#を省いた3桁または6桁のHEXテキストも受け付けられます。形式を入力しない設定では、HEXとして処理されます。

RGB入力にはどんな条件がありますか？

RGBの数値部分が3つとして読み取られ、各チャンネルの値が0から255までに入っている必要があります。

HSLの範囲外の値はどう扱われますか？

3つの数値が読み取られるHSLでは、色相が360度の周期に収められ、彩度と明度の100％超過分は100％として扱われます。