ツールを実行
このツールは、16進数（HEX）で表されたカラーコードを入力すると、対応するRGB値とHSL値を自動的に計算して表示します。デザイナーや開発者がウェブサイトの配色を決める際、異なる色空間での数値を確認したい場合に便利です。入力欄には「#」記号付きまたはなしの6桁あるいは3桁のHEXコードを入力できます。3桁の短縮形は自動的に展開されて処理されます。結果には大文字・小文字のHEX表記、RGB各成分の数値、HSLの整数値、そして背景として適しているかを示す明度分類が含まれます。デフォルトではサンプル色#ff5733が設定されており、入力を消去しても動作確認が可能です。色の微調整やアクセシビリティチェックの前段階としてご活用ください。
使い方
- HEXカラー入力欄に、変換したい16進数カラーコード（例: #ff5733 または ff5733）を入力します。
- 必要に応じて3桁の短縮コード（例: #f00）を入力することも可能です。自動で6桁に展開されます。
- 入力欄が空の場合、デフォルト値の#ff5733が使用されます。
- 「変換」ボタンをクリックすると、変換結果がパネルに表示されます。
- 結果パネルでRGB値、HSL値、および明度分類を確認します。
使用例
- 入力: #ff5733 → 出力: RGB(255, 87, 51), HSL(11, 100%, 60%), 明度: 明るい
- 入力: #000000 → 出力: RGB(0, 0, 0), HSL(0, 0%, 0%), 明度: 暗い
よくある質問
3桁のHEXコードを入力できますか？
はい、可能です。3桁のコード（例: #f00）は、各文字を繰り返して6桁（#ff0000）に展開された後に変換されます。
「#」記号なしで入力しても大丈夫ですか？
はい、問題ありません。システムが入力値を解析する前に自動的に「#」を追加して処理します。
RGBやHSLからHEXに変換できますか？
いいえ、このツールはHEXからRGB/HSLへの変換のみを行います。逆方向の変換には別のツールをご利用ください。
無効な文字を入力したらどうなりますか？
16進数として認識できない文字が含まれている場合は、入力欄の下にエラーメッセージが表示され、変換は行われません。その場合は正しいHEXコードを入力し直してください。