Webサイトを作成していると、 #FF0000、 #000000、 #FFFFFF のような英数字の組み合わせを目にすることがあります。
これらはHEXカラーコードと呼ばれる、 Webサイトやアプリケーションなどで色を指定するための代表的な表記方法です。
HEXカラーコードは、HTMLやCSSを使ったWebサイト制作だけでなく、 Webデザイン、画像編集、グラフィックデザインなど、さまざまな場面で利用されています。
この記事では、HEXカラーコードとは何なのか、 #RRGGBBの意味、16進数の仕組み、 3桁・6桁・8桁の違い、RGBとの関係、CSSでの使い方まで初心者向けにわかりやすく解説します。
- HEXカラーコードとは何なのか
- #RRGGBBの意味
- 16進数とはどのような数字なのか
- 3桁・6桁・8桁HEXカラーコードの違い
- HEXとRGBの違い
- CSSでHEXカラーコードを使う方法
- HEXカラーコードの選び方
- 代表的なHEXカラーコード
HEXカラーコードとは？
HEXカラーコードとは、色を16進数（Hexadecimal）で表現するためのカラーコードです。 「HEX」は「Hexadecimal」の略で、日本語では16進数を意味します。
Webサイトでは、一般的に#RRGGBBという6桁の形式で色を表します。 例えば、 #FF0000 は赤色を表します。
HEXカラーコードを利用すると、 HTMLやCSSの中で特定の色を正確に指定できます。 例えば、Webサイトの背景色や文字色、ボタンの色、リンクの色などに使用できます。
HEXカラーコードは、Webデザインで非常によく利用されているカラー表記の一つです。
#RRGGBBの意味
6桁のHEXカラーコードは、基本的に#RRGGBBという構造になっています。
- RR：赤（Red）の強さ
- GG：緑（Green）の強さ
- BB：青（Blue）の強さ
それぞれの色成分は、16進数で00～FFの範囲で指定します。
例えば、
の場合、
- RR = FF
- GG = 00
- BB = 00
となります。 赤の成分が最大で、緑と青が0なので赤色になります。
同様に、
は緑、
は青を表します。
#000000は黒
#000000は、赤・緑・青のすべてが0の状態です。 そのため黒色になります。
#FFFFFFは白
#FFFFFFは、赤・緑・青のすべてが最大値のFFになっています。 そのため白色になります。
16進数とは？
HEXカラーコードを理解するには、 「16進数」がどのような数字なのかを知っておくと分かりやすくなります。
私たちが普段使っている数字は10進数です。 10進数では、
という10種類の数字を使用します。
一方、16進数では次の16種類の文字を使用します。
つまり、16進数ではA～Fも数字として扱います。
| 10進数 | 16進数 |
|---|---|
| 0 | 00 |
| 10 | 0A |
| 15 | 0F |
| 16 | 10 |
| 255 | FF |
RGBカラーでは、赤・緑・青の各成分を0～255の範囲で指定します。 この0～255を16進数で表すと00～FFになります。 そのため、HEXカラーコードでは各RGB成分を2桁の16進数で表現できます。
代表的なHEXカラーコード
代表的な色には、次のようなHEXカラーコードがあります。
| 色 | HEXカラーコード | RGB |
|---|---|---|
| 黒 | #000000 | rgb(0, 0, 0) |
| 白 | #FFFFFF | rgb(255, 255, 255) |
| 赤 | #FF0000 | rgb(255, 0, 0) |
| 緑 | #00FF00 | rgb(0, 255, 0) |
| 青 | #0000FF | rgb(0, 0, 255) |
| 黄色 | #FFFF00 | rgb(255, 255, 0) |
| シアン | #00FFFF | rgb(0, 255, 255) |
| マゼンタ | #FF00FF | rgb(255, 0, 255) |
| グレー | #808080 | rgb(128, 128, 128) |
さらに多くのカラーコードを確認したい場合は、 カラーコード一覧 も利用できます。
3桁のHEXカラーコード
HEXカラーコードには、6桁の形式だけでなく3桁の短縮形式もあります。
例えば、
は、
と同じ赤色を表します。
3桁のHEXカラーコードでは、それぞれの文字を2回繰り返すことで6桁のカラーコードに変換できます。
| 3桁 | 6桁 | 色 |
|---|---|---|
| #F00 | #FF0000 | 赤 |
| #0F0 | #00FF00 | 緑 |
| #00F | #0000FF | 青 |
| #FFF | #FFFFFF | 白 |
| #000 | #000000 | 黒 |
ただし、すべての6桁HEXカラーコードを3桁に短縮できるわけではありません。 各色成分の2桁が同じ場合に、3桁へ短縮できます。
6桁のHEXカラーコード
6桁の#RRGGBB形式は、HEXカラーコードで最も一般的な表記方法です。
例えば、
の場合、
- RR = 33
- GG = 66
- BB = CC
というように、赤・緑・青それぞれの強さを指定しています。
CSSでは次のように記述できます。
このように、6桁HEXカラーコードを使うことで、指定した色をWebページに適用できます。
8桁のHEXカラーコード
現代のCSSでは、8桁のHEXカラーコードを使用して、 色に加えて透明度（アルファ値）を指定することもできます。
基本的な形式は、
です。
- RR：赤
- GG：緑
- BB：青
- AA：アルファ値（透明度）
例えば、
は、赤色に約50%の不透明度を設定したカラーコードです。
アルファ値は00～FFで指定します。 00に近いほど透明になり、 FFでは完全に不透明になります。
| アルファ値 | 意味 |
|---|---|
| 00 | 完全に透明 |
| 40 | かなり透明 |
| 80 | 約50%の不透明度 |
| BF | 約75%の不透明度 |
| FF | 完全に不透明 |
HEXとRGBの違い
HEXとRGBは、どちらもRGBカラーモデルを使って色を表現します。 違いは、色の数値をどのように表記するかという点です。
| 項目 | HEX | RGB |
|---|---|---|
| 例 | #FF0000 | rgb(255, 0, 0) |
| 数値の表現 | 16進数 | 10進数 |
| 赤・緑・青 | 00～FF | 0～255 |
| 透明度 | 8桁形式で指定可能 | RGBAなどで指定可能 |
例えば赤色は、
RGB：rgb(255, 0, 0)
と表現できます。 表記方法は異なりますが、どちらも同じ赤色を表しています。
CSSでHEXカラーを使う方法
HEXカラーコードはCSSで簡単に使用できます。 例えば、Webページの背景色を青色にする場合は次のように記述します。
文字色を指定する場合は、
のように記述できます。
ボタンの色を指定する場合も同じです。
このようにHEXカラーコードを使用すると、 Webページのさまざまな場所で正確な色を指定できます。
HEXとRGBを変換する方法
HEXカラーコードとRGBは相互に変換できます。
例えば、
というHEXカラーコードをRGBに変換すると、
になります。
逆に、
をHEXに変換すると、
になります。
HEXとRGBの変換は手計算でもできますが、 オンラインツールを使えば簡単に変換できます。
HEXカラーコードが使われる場所
HEXカラーコードは、Webサイトやデジタルデザインなど、さまざまな場所で使用されています。
Webサイト
HTMLやCSSで背景色、文字色、リンク、ボタン、枠線などの色を指定するために使用されます。
Webデザイン
Webデザインでは、ブランドカラーやアクセントカラーを正確に指定するためにHEXカラーコードが利用されます。
グラフィックデザイン
デザインツールなどでもHEXカラーコードを使って色を指定できる場合があります。 同じカラーコードを使用することで、複数のデザイン間で色を統一できます。
アプリケーション
WebアプリケーションやソフトウェアのUIデザインでもHEXカラーコードが使用されることがあります。
HEXカラーコードの選び方
HEXカラーコードを選ぶ場合は、単に好きな色を選ぶだけでなく、 Webサイト全体のデザインや文字とのコントラストなども考慮することが重要です。
ブランドカラー
Webサイトやサービスでは、ブランドを表すメインカラーを決めておくと、 ページ全体のデザインに統一感を持たせることができます。
背景色
背景色には、文字を読みやすくできる色を選ぶことが重要です。 特に文章が多いWebページでは、背景色と文字色のコントラストを十分に確保する必要があります。
アクセントカラー
ボタンや重要な情報など、ユーザーに注目してほしい部分にはアクセントカラーを使用できます。
複数の色を組み合わせる
Webサイトで複数のHEXカラーコードを使用する場合は、 メインカラー、サブカラー、アクセントカラーなどの役割を決めると、デザインを整理しやすくなります。
カラーコードの比較
デジタル環境では、色を表現する方法がHEX以外にもあります。 代表的なものがRGBやHSLです。
| 形式 | 例 | 特徴 |
|---|---|---|
| HEX | #FF0000 | 16進数で色を指定 |
| RGB | rgb(255, 0, 0) | 赤・緑・青を10進数で指定 |
| HSL | hsl(0, 100%, 50%) | 色相・彩度・明度で指定 |
HEXは短く記述でき、WebサイトのCSSでも使いやすいため、 Webデザインで広く利用されています。
HEXカラーコードのメリット
- 色を正確に指定できる
- CSSで簡単に利用できる
- RGBカラーを短く表現できる
- Webデザインで広く利用されている
- 同じカラーコードを使えば色を統一できる
- 3桁・6桁・8桁など複数の表記方法がある
HEXカラーコードのデメリット
- 16進数に慣れていないと最初は分かりにくい
- 色そのものの見た目をコードから判断しにくい
- 人間が色の明るさや鮮やかさを調整する場合はHSLなどのほうが分かりやすいことがある
- #から始まる
- 6桁形式は#RRGGBB
- RRは赤、GGは緑、BBは青
- 各成分は00～FF
- FFに近いほどその色の成分が強くなる
- 3桁形式は6桁形式を短縮したもの
- 8桁形式では透明度も指定できる
よくある質問
HEXカラーコードとは何ですか？
HEXカラーコードは、色を16進数で表現するためのカラーコードです。 一般的には#RRGGBBという6桁の形式で使用されます。
「HEX」は何の略ですか？
HEXはHexadecimalの略で、日本語では「16進数」を意味します。
#FFFFFFは何色ですか？
#FFFFFFは白色です。 RGBではrgb(255, 255, 255)に相当します。
#000000は何色ですか？
#000000は黒色です。 RGBではrgb(0, 0, 0)に相当します。
#FF0000は何色ですか？
#FF0000は赤色です。 赤の成分が最大値のFFで、緑と青の成分が00になっています。
HEXとRGBは同じ色を表せますか？
はい。 HEXとRGBは表記方法が異なりますが、 どちらもRGBカラーモデルを使って色を表現できます。
3桁のHEXカラーコードと6桁の違いは何ですか？
3桁のHEXカラーコードは、6桁のHEXカラーコードを短縮した形式です。 例えば#F00は#FF0000と同じ色を表します。
8桁のHEXカラーコードとは何ですか？
8桁のHEXカラーコードは、 RGBの3つの色成分に加えてアルファ値（透明度）を指定できる形式です。 #RRGGBBAAの形で表します。
HEXカラーコードはCSSで使えますか？
はい。 CSSのcolorやbackground-colorなどで使用できます。
まとめ
HEXカラーコードは、色を16進数で表現するためのカラーコードです。 Webサイト制作やCSS、Webデザインなどで広く利用されています。
基本となる6桁形式は#RRGGBBで、
- RR → 赤（Red）
- GG → 緑（Green）
- BB → 青（Blue）
という意味があります。
各色成分は00～FFの16進数で指定します。
- #000000 → 黒
- #FFFFFF → 白
- #FF0000 → 赤
- #00FF00 → 緑
- #0000FF → 青
また、3桁の短縮形式や、透明度を指定できる8桁形式もあります。
HEXとRGBは相互に変換できるため、 用途に応じて適切なカラー表記を使い分けることができます。
Webサイトの色を正確に指定したい場合や、 HEXカラーコードをRGBへ変換したい場合は、オンラインツールを利用すると便利です。
関連ツール
- HEX → RGB変換ツール ：HEXカラーコードをRGB値へ変換
- RGB → HEX変換ツール ：RGB値をHEXカラーコードへ変換
- カラーコード一覧 ：代表的なHEXカラーコードを確認