カラー変換ツール

カラー変換ツールとは？

Color Converter は、開発者やデザイナー向けの無料オンライン HEX・RGB・HSL カラー変換ツールです。任意の表記でカラーを入力すると——HEX（#rrggbb または #rgb の短縮形）、RGB（「255, 100, 0」や「rgb(255 100 0)」など）、HSL（「220, 91%, 64%」など）——他のすべての形式が、大きなリアルタイムプレビューのスウォッチの横で即座に更新されます。ネイティブのカラーピッカーで視覚的に色合いを選べるほか、各値にはワンクリックのコピーボタンが付いているので、ブランドカラーを合わせたいときや、CSS のカラー値をコードとデザインツールの間で変換したいときにとても便利です。

カラー変換ツールの使い方

1. HEX、RGB、または HSL のフィールドにカラーを入力または貼り付けるか、カラーピッカーのスウォッチをクリックして視覚的に色合いを選びます。
2. 他の 2 つのフィールドと大きなプレビュースウォッチが、同じ色を反映して即座に更新される様子を確認します。
3. 下にある R / G / B、H / S / L、HEX のサマリータイルで、変換後の各チャンネルの値を確認します。
4. フィールドの横にあるコピーボタンをクリックすると値をコピーできます。HEX は #rrggbb の文字列を、RGB と HSL はそのまま使える rgb(...) と hsl(...) の文字列をコピーします。
5. 値が拒否された場合は、インラインのエラーを確認し、フィールドのヒントに示された形式で入力し直してください。

使用例

#ff6400

RGB 255, 100, 0 / HSL 24, 100%, 50%

#fff

HEX #ffffff / RGB 255, 255, 255 / HSL 0, 0%, 100%

よくある質問

この変換ツールはどのカラー形式に対応していますか？

HEX（完全な #rrggbb と #rgb の短縮形）、RGB（各チャンネル 0-255）、HSL（色相は度、彩度と明度はパーセント）の 3 つの形式間で変換します。現時点ではアルファ/不透明度、HSV、CMYK、CSS の色名には対応していません。

なぜ色に「Invalid HEX color」「Invalid RGB color」「Invalid HSL color」エラーが表示されるのですか？

値が想定された形式に一致しないか、範囲外になっています。HEX は 16 進数 3 桁または 6 桁、RGB の各チャンネルは 0-255、HSL の彩度と明度は 0-100% である必要があります。そのフィールドの下にあるヒントに従って入力し直してください。

rgb(255 100 0) のような完全な CSS 値を貼り付けられますか？

はい。RGB と HSL のフィールドはテキストから数値を抽出するだけなので、「255, 100, 0」も「rgb(255 100 0)」も両方とも機能します。また、コピーボタンはそのまま使える rgb(...) と hsl(...) の文字列を出力します。

変換後の値は丸められますか？

はい。RGB チャンネルと HSL の値は整数に丸められるため、往復変換すると元の値から 1 単位ずれる場合があります。HEX の出力は常にチャンネルあたり 2 桁（#rrggbb）です。

私のカラーデータはどこかにアップロードされますか？

いいえ。変換処理はすべて JavaScript でお使いのブラウザ内のローカルで実行されます——サーバーには何も送信されず、カラー値もアップロードされないため、プライバシーが保たれ、ページの読み込み後はオフラインでも動作します。