Webサイトやアプリ、ブログなどを制作するとき、文字や背景、ボタン、アイコンなどの色を指定するために「カラーコード」が使われます。
Webで使われる色には、RGBやHEXカラーコードなど複数の表現方法があります。 それぞれ仕組みや表記方法が異なりますが、同じ色をRGBとHEXの両方で表現することもできます。
この「カラー・Webデザインガイド」では、Web制作でよく使われるRGB・HEX・HTMLカラーコード・CSSカラーコードについて、初心者にもわかりやすく解説します。 色の仕組みを理解することで、カラーコードの読み方や変換方法、Webデザインでの色の指定方法がわかるようになります。
- RGBとは何か
- HEXカラーコードとは何か
- RGBとHEXの違い
- RGBとHEXを変換する方法
- HTML・CSSで色を指定する方法
- 3桁・6桁・8桁HEXの違い
- カラーコードの調べ方
- Webデザインでの色の選び方
カラーコードとは？
カラーコードとは、コンピューター上で色を指定するために使用される文字や数値の組み合わせです。
Webサイトでは、文字色・背景色・ボタンの色・枠線・アイコンなど、さまざまな場所でカラーコードが利用されています。
代表的な色の表現方法には、RGBとHEXがあります。 たとえば赤色は、RGBでは「rgb(255, 0, 0)」、HEXでは「#FF0000」と表現できます。
表記方法は異なりますが、どちらも赤色を指定するための情報です。
RGBとは？
RGBは「Red・Green・Blue」の頭文字を取った色の表現方法です。 赤・緑・青の3つの色を組み合わせることで、さまざまな色を表現します。
RGBの3つの色
| 成分 | 意味 |
|---|---|
| R | Red（赤） |
| G | Green（緑） |
| B | Blue（青） |
一般的な8ビットRGBでは、それぞれの値を0～255の範囲で指定します。
たとえば、 RGB(255, 0, 0) は赤、 RGB(0, 255, 0) は緑、 RGB(0, 0, 255) は青を表します。
3つのチャンネルを組み合わせることで、256 × 256 × 256 = 16,777,216通りの色を表現できます。
RGBについて詳しく知りたい場合は、以下の記事で仕組みや色の作り方を解説しています。
RGBとは？RGBカラーの仕組みや色の作り方をわかりやすく解説
HEXカラーコードとは？
HEXカラーコードは、色を16進数で表現する方法です。 Webデザインでは非常によく使われており、「#FF0000」のように「#」と6桁の文字で色を指定する形式が代表的です。
#RRGGBBの意味
6桁のHEXカラーコードでは、2桁ずつが赤・緑・青の成分を表しています。
| 部分 | 意味 |
|---|---|
| RR | 赤（Red） |
| GG | 緑（Green） |
| BB | 青（Blue） |
たとえば「#FF0000」は、赤が最大値、緑と青が最小値なので赤色になります。
「#FFFFFF」は白、「#000000」は黒を表します。
HEXカラーコードについて詳しくは、以下の記事で解説しています。
HEXカラーコードとは？16進数カラーコードの意味と使い方をわかりやすく解説
RGBとHEXの違い
RGBとHEXは表記方法が異なりますが、どちらもRGBの赤・緑・青の成分を使って色を表現できます。
| 比較項目 | RGB | HEX |
|---|---|---|
| 表現方法 | 10進数 | 16進数 |
| 代表的な表記 | rgb(255, 0, 0) | #FF0000 |
| 主な成分 | R・G・B | RR・GG・BB |
| CSSでの利用 | 可能 | 可能 |
| 同じ色の表現 | 可能 | 可能 |
たとえば、 RGB(51, 102, 204) と #3366CC は同じ色を表現できます。
RGBとHEXの具体的な違いや使い分けについては、以下の記事で詳しく解説しています。
RGBとHEXの違いとは？カラーコードの仕組みと使い分けを解説
RGBとHEXを変換する方法
RGBとHEXは相互に変換できます。
HEXからRGBへの変換
HEXカラーコードを2桁ずつ分け、それぞれを16進数から10進数へ変換するとRGBの値になります。
たとえば、 #3366CC の場合、
- 33 → 51
- 66 → 102
- CC → 204
となるため、 #3366CC = RGB(51, 102, 204) です。
RGBからHEXへの変換
RGBの各値を10進数から16進数へ変換し、2桁ずつ並べるとHEXカラーコードになります。
たとえば、 RGB(255, 0, 0) は、 #FF0000 となります。
計算せずに変換したい場合は、以下のツールを利用できます。
RGBとHEXの計算方法について詳しくは、以下の記事をご覧ください。
HTML・CSSで色を指定する方法
Webサイトでは、HTMLそのものというより、主にCSSを使って文字や背景などの色を指定します。
HEXで指定する
CSSでは、以下のようにHEXカラーコードを指定できます。
color: #FF0000;この場合、文字色が赤になります。
RGBで指定する
RGBを使う場合は、以下のように記述します。
color: rgb(255, 0, 0);RGBとHEXは、同じ色を表す場合にはCSS上でも置き換えて使用できます。
背景色を指定する
background-color: #3366CC;このようにCSSでは、文字色だけでなく背景色や枠線などにもカラーコードを利用できます。
3桁・6桁・8桁HEXの違い
HEXカラーコードには、3桁・6桁・8桁などの表記があります。
3桁HEX
3桁HEXは、6桁HEXを短く表記した形式です。
たとえば、 #F00 は #FF0000 と同じ色を表します。
6桁HEX
6桁HEXは、赤・緑・青をそれぞれ2桁で指定する一般的な形式です。
#RRGGBB という構造になっています。
8桁HEX
8桁HEXでは、RGBに加えて透明度（アルファ値）を指定できます。
一般的に、 #RRGGBBAA という形式で表します。
最後の2桁「AA」が透明度を表します。
CSSで利用する場合は、ブラウザや記述方法に応じて適切な形式を使用する必要があります。
カラーコードが使われる場所
カラーコードは、Webサイトのさまざまな場所で利用されています。
文字色
見出しや本文、リンクなどの文字色を指定できます。
背景色
Webページやボタン、カードなどの背景色を指定できます。
ボーダー・枠線
ボタンや入力フォーム、カードなどの枠線にもカラーコードを使用できます。
ボタン・UIデザイン
ボタンやナビゲーション、アイコンなどの色を指定するためにも利用されます。
Webサイトの配色
Webサイト全体のブランドカラーやアクセントカラーを統一するときにもカラーコードが役立ちます。
Webデザインで色を選ぶ方法
Webデザインでは、単に好きな色を選ぶだけでなく、目的や視認性を考えて配色することが重要です。
ブランドカラーを決める
サイトやサービスのイメージに合わせて、メインとなる色を決めます。
背景と文字のコントラストを考える
文字と背景の色が近すぎると読みづらくなります。 特に本文では、十分なコントラストを確保することが重要です。
色を使いすぎない
多くの色を同時に使用すると、ページ全体の統一感が失われる場合があります。 メインカラー、サブカラー、アクセントカラーなど、役割を決めて使用すると整理しやすくなります。
用途に応じて色を使い分ける
リンク、ボタン、警告、成功メッセージなど、それぞれの役割に合わせて色を使い分けると、ユーザーが情報を理解しやすくなります。
- サイトの目的に合った色を選ぶ
- 文字と背景のコントラストを確保する
- 色ごとに役割を決める
- サイト全体でカラーコードを統一する
- 必要以上に多くの色を使用しない
カラーコードを調べる・変換する方法
カラーコードを手計算で変換することもできますが、ツールを利用すれば簡単にRGBとHEXを相互変換できます。
HEXからRGBへ変換
HEXカラーコードを入力してRGBの数値を確認したい場合は、HEX → RGB変換ツールを利用できます。
RGBからHEXへ変換
RGBの数値からCSSなどで利用できるHEXカラーコードを確認したい場合は、RGB → HEX変換ツールを利用できます。
カラーコード一覧から探す
代表的な色のHEX・RGBカラーコードを一覧から探したい場合は、カラーコード一覧を利用できます。
カラー・Webデザインの記事一覧
カラーコードやWebでの色の扱いについて、さらに詳しく知りたい場合は以下の記事をご覧ください。
HEXカラーコード
RGBカラー
RGBとHEX
よくある質問
カラーコードとは何ですか？
カラーコードとは、コンピューター上で色を指定するために使用される文字や数値の組み合わせです。 WebサイトではRGBやHEXなどの形式がよく使われています。
RGBとHEXは何が違いますか？
RGBは赤・緑・青の各成分を10進数の数値で表す方法で、HEXはそれらの値を16進数で表す方法です。 同じ色をRGBとHEXの両方で表現できます。
HEXカラーコードの#は何を意味しますか？
Webで使用されるHEXカラーコードでは、先頭に「#」を付けて16進数によるカラーコードであることを示します。 たとえば「#FF0000」は赤色を表します。
RGBとHEXは変換できますか？
はい。 RGBからHEX、HEXからRGBのどちらにも変換できます。
WebサイトではRGBとHEXのどちらを使えばいいですか？
どちらもCSSで利用できます。 HEXは短く記述しやすく、RGBは各色成分の数値を直接確認しやすいという特徴があります。 用途やプロジェクトのルールに合わせて使い分けるとよいでしょう。
カラーコードはどこで確認できますか？
画像やデザインで使用されている色を確認したり、RGBとHEXを変換したりする方法があります。 はるツールでは、カラーコード一覧やRGB・HEX変換ツールを無料で利用できます。
まとめ
Webサイトの色を指定するときには、RGBやHEXなどのカラーコードが利用されます。 RGBは赤・緑・青の3つの成分を数値で表す方法で、HEXはそれらの値を16進数で表す方法です。
たとえば、 RGB(255, 0, 0) と #FF0000 は、どちらも赤色を表します。
- RGBはRed・Green・Blueの3色で色を表現する
- 一般的なRGBでは各値を0～255で指定する
- HEXは色を16進数で表現する
- 6桁HEXは#RRGGBBという構造になっている
- RGBとHEXは相互に変換できる
- RGB・HEXはCSSで色の指定に利用できる
- 3桁・6桁・8桁などのHEX表記がある
カラーコードの仕組みを理解すると、Webサイトの配色やCSSでの色指定、RGB・HEXの変換などをよりスムーズに行えるようになります。
さらに詳しく知りたい場合は、このページから各テーマの記事を読み進めてください。
関連ツール
- HEX → RGB変換ツール ：HEXカラーコードをRGBに変換
- RGB → HEX変換ツール ：RGBの数値をHEXカラーコードに変換
- カラーコード一覧 ：代表的な色のHEX・RGBカラーコードを確認