QuickBestGo
JA

カラーコンバーター

カラーコンバーターの使い方

カラーコンバーターは、Webで最も一般的な3つのカラーフォーマット間の即座の変換をサポートします：HEX（#RRGGBBまたは#RGB短縮形）、RGB（赤・緑・青、各0〜255）、HSL（色相0〜360°、彩度0〜100%、明度0〜100%）。いずれかの形式で値を入力するか、ビジュアルカラーピッカーを使用すると、3つの表現が同時に更新されます。ライブプレビュースウォッチにより、値を調整しながら色の見た目を即座に確認できます。

各カラーフォーマットには、デザインと開発において最適な用途があります。HEXはHTML、CSSスタイルシート、FigmaやSketchなどのデザインエクスポートツールで主流のフォーマットです。RGBは個々のチャンネルをプログラム的に操作する必要があるJavaScriptのキャンバス操作や画像処理で好まれます。HSLは最も人間が読みやすいフォーマットです：明度だけを調整してUIコンポーネントのカラーランプを作成したり、色相を変えるだけで彩度や明るさを変えずに補色にすることができます。

変換の計算式は、すべての主要なブラウザとディスプレイシステムで使用されているsRGB色空間標準に準拠しています。HEXからRGBは各16進数のペアを10進数（0〜255）に変換します。RGBからHSLはチャンネル値を0〜1に正規化し、支配的なチャンネルから色相を、最小値と最大値の範囲から彩度を、最小値と最大値の平均として明度を計算します。すべての変換はブラウザ内でローカルに処理されます。カラーデータはどこにも送信されません。

よくある質問

HEXをRGBに変換するにはどうすればいいですか？
入力フィールドにHEXカラーコード（例：#2563eb）を入力すると、同等のRGBおよびHSLの値が即座に表示されます。RGBまたはHSLフィールドに直接入力して、どの方向にも変換できます。
HEXとRGBカラーの違いは何ですか？
HEXはHTMLとCSSで使用される6桁の16進数コード（例：#FF5500）です。RGBは同じ色を3つの10進数値0〜255で表します（例：rgb(255, 85, 0)）。どちらも同じ色を表し、異なる表記法に過ぎません。
必要なCSSのカラーフォーマットはどうやって見つければいいですか？
変換機はHEX、RGB、HSLフォーマットを同時に表示します。CSSルールに必要なフォーマットをコピーしてください――現代のCSSでは3つすべてが有効で、視覚的に同じ結果になります。
HSLとは何で、いつ使うべきですか？
HSLは色相（Hue）、彩度（Saturation）、明度（Lightness）の略です。HEXやRGBよりも直感的に色を調整できます：明度だけを変えて色を明るくしたり暗くしたり、色相を変えることで関連する色を得たりできます。CSSテーマやデザインシステムで人気があります。
値を入力する代わりにカラーピッカーを使えますか？
はい。カラースウォッチまたはピッカーアイコンをクリックすると、ビジュアルカラーピッカーが開きます。ドラッグして任意の色を選択すると、3つのフォーマット値すべてが自動的に更新されます。
HEXカラーコードは大文字と小文字を区別しますか？
いいえ。#FF5500と#ff5500は同一です。CSSは大文字と小文字どちらのHEXコードも受け付けます。このコンバーターはどちらも受け付け、出力を大文字に正規化します。
HEXカラーの#記号はどういう意味ですか？
#はCSSにこれが16進数のカラーコードであることを伝えるプレフィックスです。カラー値自体の一部ではありません。FigmaやPhotoshopなどの一部のツールでは#プレフィックスなしの6桁コードが表示されることがあります。