HTMLで色を指定するRGBの使い方｜基本からわかりやすく解説

Webサイトを作るとき、文章や背景の色を変えたいと思ったことはありませんか？

HTMLやCSSでは色を指定する方法がいくつかありますが、その中でもよく使われるのがRGBです。

RGBを使えば、赤・緑・青を自由に組み合わせて、細かく色を調整できます。

この記事では、初心者にもわかりやすく次のことを説明します：

RGBとは何か
HTMLやCSSでの書き方
具体的な色指定の例
透明度の設定方法

RGBとは？

RGBの意味

RGBは次の3つの色の頭文字です：

R：Red（赤）
G：Green（緑）
B：Blue（青）

これらは光の三原色と呼ばれ、この3つの値を0～255で組み合わせることで、様々な色を表現できます。

なぜRGBが便利なのか

RGBを使うことで、以下のようなメリットがあります：

細かい色の調整ができる
色の組み合わせを数値で管理できる
プログラムで色を計算しやすい
多くのデザインツールで対応している

HTMLでのRGBの書き方

基本的な書き方

HTMLファイルの色は通常、CSSを使って指定します。

color: rgb(255, 0, 0);

基本的なRGBの色指定：

rgb(255, 0, 0) → 赤
rgb(0, 255, 0) → 緑
rgb(0, 0, 255) → 青

それぞれの数値は0～255の間で指定し、数字を変えることでいろんな色を作れます。

数値の意味

0 = その色が全く含まれていない
255 = その色が最大に含まれている
128 = その色が半分含まれている

よく使われる色の例

/* 白色 */
color: rgb(255, 255, 255);

/* 黒色 */
color: rgb(0, 0, 0);

/* グレー */
color: rgb(128, 128, 128);

/* 紫色 */
color: rgb(128, 0, 128);

具体的な使用例

文字の色を変える

<p style="color: rgb(0, 128, 255);">
  これは青っぽい文字です。
</p>

背景色を変える

<div style="background-color: rgb(240, 240, 240); padding: 10px;">
  これは薄いグレーの背景です。
</div>

枠線の色を変える

<div style="border: 2px solid rgb(255, 100, 100); padding: 10px;">
  これは薄い赤色の枠線です。
</div>

CSSファイルで使う場合

.my-text {
  color: rgb(50, 150, 200);
}

.my-background {
  background-color: rgb(255, 248, 220);
}

RGBaで透明度も指定できる

RGBaとは

rgbaを使うと、RGBに加えて透明度（アルファ値）も設定できます。

background-color: rgba(255, 0, 0, 0.5);

透明度の値

0.0 = 完全に透明
0.5 = 50%の透明度
1.0 = 完全に不透明

透明度の活用例

<div style="background-color: rgba(255, 0, 0, 0.3); padding: 20px;">
  薄い赤色の背景（30%の透明度）
</div>

<div style="background-color: rgba(0, 255, 0, 0.7); padding: 20px;">
  緑色の背景（70%の透明度）
</div>

色選びのコツ

色の組み合わせ方

明るい色：数値を大きくする（200～255）
暗い色：数値を小さくする（0～50）
鮮やかな色：一つの値を大きくし、他を小さくする
パステル調：すべての値を高めに設定する

読みやすい色選び

文字と背景のコントラスト（明暗の差）を意識しましょう：

/* 読みやすい組み合わせ */
.good-contrast {
  color: rgb(50, 50, 50);        /* 濃いグレー */
  background-color: rgb(250, 250, 250); /* 薄いグレー */
}

/* 読みにくい組み合わせ */
.bad-contrast {
  color: rgb(200, 200, 200);     /* 薄いグレー */
  background-color: rgb(220, 220, 220); /* 薄いグレー */
}

実践的な活用方法

カラーパレットを作る

サイト全体で使う色を決めておくと、統一感が出ます：

:root {
  --primary-color: rgb(70, 130, 180);    /* メインカラー */
  --secondary-color: rgb(255, 165, 0);   /* サブカラー */
  --text-color: rgb(51, 51, 51);         /* 文字色 */
  --background-color: rgb(248, 248, 248); /* 背景色 */
}

ホバー効果での色変化

マウスを乗せたときの色変化も簡単に作れます：

.button {
  background-color: rgb(70, 130, 180);
  color: rgb(255, 255, 255);
  padding: 10px 20px;
  border: none;
}

.button:hover {
  background-color: rgb(100, 160, 210);
}