ツールを実行
カラーコード変換ツールは、HEX（16進数）、RGB、HSLの間で色情報をすばやく相互変換できるツールです。入力形式としてHEX、RGB、HSLの3種類を指定でき、HEXは3桁または6桁の記述（#記号の有無不問）に対応しています。RGBは0から255までの各チャンネル値、HSLは色相（360度周期）と彩度・輝度（0から100%）を数値として解釈します。変換を実行すると、HEX、RGB、HSLの各表記に加えて、RGBチャンネル値やHSL成分の整数値、色のプレビュー表示が画面上に表示されます。WebデザインやCSSコーディングの作業で形式を揃えたいときに便利です。
使い方
- 「変換元の形式」でHEX、RGB、HSLの中から入力する形式を選択します（未指定時はHEXが適用されます）。
- 「カラーコード」欄に変換したい色コードや数値を入力します。
- 「実行」ボタンをクリックして変換処理を開始します。
- 結果エリアに表示されるHEX・RGB・HSL表記、各数値コンポーネント、カラープレビューを確認します。
使用例
- HEX形式「#3b82f6」を入力して実行すると、RGB表記「rgb(59, 130, 246)」およびHSL表記「hsl(217, 91%, 60%)」と青色のプレビューが表示されます。
- RGB形式を選択して「255, 99, 71」を入力すると、HEX表記「#ff6347」およびHSL表記「hsl(9, 100%, 64%)」が出力されます。
- HSL形式を選択して「120, 100, 50」を入力すると、HEX表記「#00ff00」およびRGB表記「rgb(0, 255, 0)」に変換されます。
よくある質問
HEXコードの先頭にあるシャープ記号（#）は省略できますか？
はい、シャープ記号が付いていても付いていなくても変換できます。3桁表記（例: f00）および6桁表記（例: ff0000）のいずれにも対応しています。
RGBの数値を入力する際、どのような区切り文字が使えますか？
入力文字列から連続する3つの数値が抽出されるため、カンマや半角スペースなどで区切って入力できます。各数値は0から255の範囲内に収める必要があります。
HSLの色相に360度以上の数値を入力した場合はどうなりますか？
色相の値は360度の周期に合わせて自動的に換算されます。彩度と輝度について100%を超える数値が指定された場合は、上限の100%として計算されます。
変換がエラーになるのはどのようなケースですか？
入力欄が空のまま実行した場合、選択した形式と入力内容が合致しない場合、RGBの値が255を超えている場合などにエラーメッセージが表示されます。