HEX RGB 変換ツール

HEX、RGB、HSL形式のカラーコードをブラウザ上で安全かつ瞬時に相互変換します。

透過色(アルファ値)と最新のCSS記法への対応

従来の6桁のHEXコードや rgb(r, g, b) だけでなく、透過度(アルファ値)を含む8桁のHEXコードや rgba()hsla() の変換にも完全に対応しています。

また、スペースやスラッシュで区切る最新のCSSカラー構文(例:rgb(255 0 0 / 50%))を直接入力しても、各形式へ正確に計算および変換されます。デザインツールからコピーした値をそのまま貼り付けてご利用ください。

sRGBカラースペースに基づくブラウザ処理

このツールは、JavaScriptの標準的な色変換アルゴリズムを使用し、お使いのブラウザ上で直接計算を行います。カラープロファイルやデバイス固有のレンダリング差は考慮されず、一般的なWeb開発における標準であるsRGB色空間を前提としています。

すべての処理はクライアント側で完結するため、オフライン環境でも動作します。入力したカラーコードが外部サーバーに送信されたり保存されたりすることは一切ありません。

大文字・小文字の区別とフォーマットの自動解釈

HEXコードの入力において、大文字(例:#FFFFFF)と小文字(例:#ffffff)のどちらを使用しても出力結果は同一になります。入力された文字列から赤、緑、青、およびアルファチャンネルの数値を自動的に抽出します。

即座にHEX、RGB、HSLの全フォーマットの同値を出力するため、開発中のCSSやSassコードに組み込む際、必要な形式の値をワンクリックでコピーして効率的に開発を進めることができます。

よくある質問

透過(アルファ値)を含んだカラーコードはどのように入力すればよいですか?

8桁のHEXコード(例: #ff000080)や、rgba(255, 0, 0, 0.5) のように入力してください。最新のCSS構文であるスラッシュ区切りの形式にも対応しており、自動的に他の透過対応フォーマットへ変換されます。

最新のCSSカラーフォーマットなど、すべての記法に対応していますか?

HEX、RGB、RGBA、HSL、HSLAに加え、スペースやスラッシュを用いたモダンなCSS構文に対応しています。ただし、「red」や「blue」といったカラーネーム(名前付き色)の直接変換や、ブラウザがサポートしていない独自のカラー構文には対応していません。

オフライン環境でもこの変換ツールは使えますか?

はい、インターネット接続がない環境でもご利用いただけます。すべての色変換処理はJavaScriptを用いてブラウザ上で直接実行されるため、サーバーとの通信は一切発生しません。

無効なカラーコードや間違った値を入力した場合はどうなりますか?

ツールがカラーコードとして認識できない文字列が入力された場合は、エラーメッセージが表示され変換結果は出力されません。正しいHEX、rgb()、または hsl() の形式で再入力をお試しください。

HEXコードを大文字で入力した場合と小文字で入力した場合で違いはありますか?

違いはありません。色変換の計算において大文字と小文字は区別されず、どちらを入力しても全く同じRGB値およびHSL値が出力されます。

ツールの不具合や改善案はありますか。 フィードバックを送る