画面上のすべての色は、赤、緑、青の光の混合です。デザイナーと開発者は、HEX (#3b82f6) と RGB (rgb(59, 130, 246)) という 2 つの一般的な表記法を組み合わせて記述します。これらは同じ 3 つのチャネルを表しており、番号体系のみが異なります。このガイドでは、HEX カラー コードとは何か、RGB の意味、HEX を RGB に手動で変換する方法 (FF が 255 に等しい理由を含む)、実際の例、アルファ/RGBA、および一般的な色の簡単な表について説明します。
クイック回答
6 桁の HEX カラーは 3 つのペア (RR、GG、BB) に分割されます。各ペアを 16 進数 (基数 16) から 10 進数 (0 ～ 255) に変換して、RGB を取得します。例: #FFFFFF → rgb(255, 255, 255)。 8 桁の 16 進数 (#RRGGBBAA) は、不透明度のアルファ チャネルを追加します。速度が必要な場合はコンバータを使用してください。 CSS のデバッグやトークンの設計が必要なときに数学を学びます。
HEXカラーコードとは何ですか?
HEX (16 進数) カラー コードは、基数 16 の数字、0 ～ 9 および A ～ F を使用します。ここで、A = 10、B = 11、C = 12、D = 13、E = 14、および F = 15 です。Web では通常、# で始まり、いくつかの長さがあります。
- #RGB - 略記: 各桁が 2 倍になります (#F0A → #FF00AA)
- #RRGGBB - 標準の 6 桁形式 (チャネルごとに 2 桁)
- #RRGGBBAA - 8 桁: RGB プラスアルファ (不透明度)
それぞれの数字のペアが 1 つのチャネルです。最初の 2 桁は赤、次の 2 桁は緑、最後の 2 桁は青です。 2 つの 16 進数は 16 × 16 = 256 の値を表すことができるため、各チャネルの範囲は 00 (0) から FF (255) であり、CSS が rgb() で使用する範囲と同じです。
HEX はコンパクトでコピーしやすいため、デザイン ツール、ブランド ガイドライン、CSS で人気があります。大文字と小文字は関係ありません。#3b82f6 と #3B82F6 は同じ色です。
RGBとは何ですか?
RGB は、赤、緑、青を表します。 CSS では、これを rgb(r, g, b) または現代のスペース区切り形式 rgb(r g b) として記述します。各チャネルは 0 ～ 255 の整数 (またはパーセンテージ) です。チャンネルを最大強度で混合すると白になります。すべてゼロの場合は黒になります。混合が不均等であると、sRGB ディスプレイ上で 1 つおきの色が生成されます。
- rgb(255, 0, 0) - 純粋な赤
- rgb(0, 255, 0) - 純粋な緑
- rgb(0, 0, 255) - 純粋な青
- rgb(255, 255, 255) - 白
- rgb(0, 0, 0) - 黒
コードで明るさや不透明度を調整する場合は、RGB のほうが推論しやすいことがよくあります。多くの場合、HEX はスタイル ガイドから貼り付けるのが簡単です。それらの間の変換は、同じ 3 つの数字の書き方を変えるだけです。
HEX を手動で RGB に変換する方法
6 つの 16 進数を 3 つのペアに分割し、各ペアを基数 16 から 10 進数に変換します。 2 桁の 16 進数値 XY の式は次のとおりです。
式
値 = (1 桁目 × 16) + 2 桁目。 A=10 … F=15 を思い出してください。したがって、FF = (15 × 16) + 15 = 240 + 15 = 255 となります。#FF がチャネルの最大強度となるのはそのためです。
- 先頭の # が存在する場合はそれを取り除きます。
- 3 桁 (#RGB) の場合は、各桁を 2 倍にして拡張します (#F0A → #FF00AA)。
- RR、GG、BBに分かれます。
- 各ペアを (高×16) + 低で変換します。
- rgb(R,G,B)と書きます。
動作例: #FFFFFF
白は最も簡単なチェックです。 RR = FF、GG = FF、BB = FF。各 FF は 255 に変換されるため、#FFFFFF → rgb(255, 255, 255) となります。黒はその逆です: #000000 → rgb(0, 0, 0)。
動作例: #1A2B3C
- 赤 1A: (1 × 16) + 10 = 16 + 10 = 26
- 緑 2B: (2 × 16) + 11 = 32 + 11 = 43
- 青 3C: (3 × 16) + 12 = 48 + 12 = 60
- 結果: #1A2B3C → rgb(26, 43, 60)
逆の方向 (RGB から HEX) に進むと、各チャネルが 0 ～ 255 にクランプされ、上位ニブルについては 16 で除算され、下位ニブルについては剰余が取られ、10 ～ 15 が A ～ F にマッピングされます。 Pad single digits with a leading zero so every channel is two characters (#0A1B2C, not #A1B2C).
アルファ、RGBA、および 8 桁の 16 進数
不透明度はアルファと呼ばれる 4 番目のチャネルです。 CSS では、rgba(r, g, b, a) は 0 (完全に透明) から 1 (完全に不透明) までの値を使用します。または、最新の rgb(r g b / a) 構文を使用することもできます。 8 桁の HEX は #RRGGBBAA と同じ概念をエンコードします。AA は 00 (透明) ～ FF (不透明) です。
- #FF000080 → 不透明度約 50% の赤 (128/255 ≈ 0.5) → rgba(255, 0, 0, 0.5)
- #00000000 → 完全に透明な黒 (「塗りつぶしなし」としてよく使用されます)
- #3B82F6FF → 明示的な完全不透明度を備えた #3B82F6 と同じ
すべての古いブラウザーやデザインのエクスポートが 8 桁の 16 進数を同じ方法で処理するわけではありませんが、最新の CSS はそれをサポートしています。半透明のオーバーレイ、シャドウ、ガラス効果が必要な場合は、RGBA (またはアルファ付き HEX) が適切なツールです。実線の 6 桁の HEX では透明度を表現できません。
共通の HEX および RGB カラーテーブル
これらの日常的な色は、CSS のデバッグやブランド トークンの照合のために覚えておくと便利です。
- #FFFFFF → rgb(255, 255, 255) - 白
- #000000 → rgb(0, 0, 0) - 黒
- #FF0000 → rgb(255, 0, 0) - 赤
- #00FF00 → rgb(0, 255, 0) - ライムグリーン
- #0000FF → rgb(0, 0, 255) - 青
- #FFFF00 → rgb(255, 255, 0) - 黄色
- #FFA500 → rgb(255, 165, 0) - オレンジ
- #808080 → rgb(128, 128, 128) - グレー
- #1A2B3C → rgb(26, 43, 60) - ダークブルーグレー (上の例から)
- #3B82F6 → rgb(59, 130, 246) - 多くの UI キットで使用される一般的な「スカイ」ブルー
よくある質問
HEX は RGB と同じですか?
これらは、一般的な Web カラーと同じ赤、緑、青の強度をエンコードします。 HEX はそれらの値を 16 進数で書き込みます。 RGB はそれらを 10 進数で書き込みます。 HEX を RGB に変換 (または逆変換) しても色は変わりません。表記のみが変わります。
なぜ FF が 255 になるのですか?
Fは16進数の15です。 2 桁の意味は (15 × 16) + 15 = 255、これが 8 ビット チャネルの最大値です。そのため、#FF0000 は完全に赤になり、#FFFFFF は白になります。
3 桁の HEX カラーは何を意味しますか?
短縮表記 #RGB は、各桁を繰り返すことで展開されます。#0F8 は #00FF88 になります。これは、各チャンネルの 2 桁が同一である色 (#00、#FF、#88 など) を記述するコンパクトな方法です。
RGBとRGBAの違いは何ですか?
RGBA はアルファ (不透明度) チャネルを追加します。 rgb(255, 0, 0) は赤一色です。 rgba(255, 0, 0, 0.5) は、不透明度 50% で同じ赤です。 8 桁の 16 進数 (#RRGGBBAA) は、RGBA に相当する 16 進数です。
CSS では HEX または RGB を使用する必要がありますか?
どちらも有効です。デザイン システムからコピーする場合、または短いトークンが必要な場合は、HEX を使用します。不透明度が必要な場合、または変数と計算から色を構築する場合は、RGB/RGBA を使用します。多くのチームは、HEX ブランド カラーを保存し、最新の CSS 不透明度トリック用の rgb() チャネルを派生しています (たとえば、rgb(var(--brand-rgb) / 0.2))。
HEX を RGB にすばやく変換するにはどうすればよいですか?
1 回限りの学習の場合は、上記の (桁 × 16) + 桁の方法を使用します。日常の作業では、コードを HEX から RGB コンバータに貼り付けて、rgb()/rgba() をコピーし、スウォッチをプレビューして、算術ミスを回避できるようにします。
無料の HEX から RGB コンバーター
任意の HEX カラーを無料の HEX to RGB Converter に貼り付けると、rgb()/rgba() が即座に取得されます。さらに、逆 RGB → HEX パス、ライブ スウォッチ、およびコピー ボタンが追加されます。完全にブラウザ内で実行されます。何もアップロードされていません。