カラー → HEX

HEX カラーとは？

HEX カラーは 16 進数表記でカラーを表す方法で、Web デザインと CSS で最もよく見られます。HEX コードはハッシュ記号 # で始まり 6 桁の数字が続きます。最初の 2 桁が赤成分、中間の 2 桁が緑、最後の 2 桁が青を表します——例えば #0EA5E9 は赤 14、緑 165、青 233 からなるスカイブルーです。各ペアは 00（10 進数 0）から FF（10 進数 255）の範囲で、1670 万色以上が可能です。

HEX 形式は HTML と CSS と共に、RGB カラーを指定するコンパクトで人間が読める方法として導入されました。すべてのブラウザ、デザインツール、画像エディタでサポートされており、デジタルカラーの共通語となっています。3 桁の短縮形（例：#0E9）も有効で、各桁を 2 倍にして #00EE99 に展開されます。

HEX カラーを使用する場面

HEX は Web 開発とデジタルデザインで最も広く使用されるカラーフォーマットです。一般的なシナリオ：

• CSS スタイリング。 color、background、border-color などのプロパティは HEX 値を直接受け入れます。
• デザインシステム。 ブランドパレットとテーマトークンは通常、チーム間の一貫性のため HEX で定義されます。
• 画像編集。 Photoshop、Figma、Sketch はすべてカラーピッカーで HEX コードを表示・受け入れします。
• アクセシビリティ監査。 コントラストチェッカーと WCAG ツールはカラーペアを評価する際 HEX 入力を期待します。
• マーケティング素材。 メールテンプレート、ソーシャルメディアグラフィック、PDF ジェネレーターはブランド正確な色を確保するため HEX を使用します。
• カラーの共有。 HEX コードは特定のカラーを他人に伝える最短で最も曖昧さのない方法です。

CSS は現在 rgb()、hsl()、oklch() もサポートしていますが、HEX はその簡潔さと普遍的なサポートにより、ほとんどのコードベースでデフォルトのままです。

HEX と RGB と HSL の違い

HEX、RGB、HSL は同じカラーを説明する 3 つの方法です。HEX は赤、緑、青のチャンネルを 16 進ペアとしてエンコードします。RGB は同じチャンネルを 0 から 255 の 10 進数で表現し、オプションでアルファチャンネル（例：rgba(14, 165, 233, 0.5)）を持ちます。HSL は色相（カラーホイール上の角度）、彩度、明度でカラーを説明し、人間の色の知覚方法にマッピングされるためデザイナーにとってより直感的です。

HEX と RGB は数学的に等価で簡単に変換できます。HSL は RGB カラー空間を通じた変換が必要ですが、シェード、ティント、調和のとれたパレットを作成する必要がある場合に非常に価値があります。明度や彩度を調整すると視覚的に一貫したバリエーションが生成されるためです。

一般的な HEX カラー

下表はよく使用される HEX カラーとその RGB 等価物を示しています。

名前	HEX	RGB
ブラック	#000000	0, 0, 0
ホワイト	#FFFFFF	255, 255, 255
レッド	#FF0000	255, 0, 0
グリーン	#00FF00	0, 255, 0
ブルー	#0000FF	0, 0, 255
スカイブルー	#0EA5E9	14, 165, 233
イエロー	#FFFF00	255, 255, 0

ブランドカラーは通常スタイルガイドで HEX コードとして配布され、開発者、デザイナー、印刷業者がすべて同じ値を参照できるようにします。

カラーを HEX に変換する方法

本ツールでのカラー変換は 1 秒で完了し、すべてブラウザ内で行われます。アップロード不要、登録不要、インストール不要。以下の手順で行います：

1. カラーを選択。 カラーピッカーを使用するか、RGB 入力に赤、緑、青の値（0–255）を入力します。
2. 結果を確認。 HEX コードが出力ボックスにリアルタイムで更新され、プレビューのスポットに現在のカラーが表示されます。
3. HEX をコピー。 「HEX をコピー」をクリックして値をコピーし、CSS、デザインツール、ドキュメントに貼り付けます。

すべてのステップは JavaScript でブラウザ内でローカルに実行されるため、カラーの選択がサーバーにアップロードされることはありません。これにより変換は完全にプライベートで即座です。