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

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

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

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

プロのWebデザイナーも日常的に使っている、とても便利な方法なんです。

この記事では、

RGBとは何か
HTMLやCSSでの書き方
具体的な色指定の例
実際にコードを書いて試す方法

を初心者にもわかりやすく説明します。記事を読み終わる頃には、あなたも自由自在に色を操れるようになっているでしょう。

RGBとは？

RGBの意味

RGBは

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

の頭文字で、光の三原色のことです。

テレビやパソコンの画面も、この3つの光を組み合わせて色を表示しています。この3つの値を0から255までの数字で組み合わせることで、なんと1677万色以上の色を表現できるんです。

なぜ0から255なの？

コンピューターは0と1で情報を処理します。色の情報は8ビット（8桁の0と1）で表現されるため、2の8乗 = 256通り（0から255）の値を使えるのです。

数値と色の関係

0: その色が全くない状態
255: その色が最も強い状態

たとえば、rgb(255, 0, 0)なら赤が最大、緑と青が0なので「真っ赤」になります。

HTMLとCSSでのRGBの書き方

基本の書き方

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

color: rgb(255, 0, 0);

基本的な色の例

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

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

よく使われる色のRGB値

実際のWebサイトでよく使われる色をご紹介します：

基本色

オレンジ: rgb(255, 165, 0)
ピンク: rgb(255, 192, 203)
紫: rgb(128, 0, 128)
茶色: rgb(139, 69, 19)

グレー系

薄いグレー: rgb(211, 211, 211)
中間グレー: rgb(128, 128, 128)
濃いグレー: rgb(64, 64, 64)

具体的な使用例

文字の色を変える

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

説明

colorプロパティで文字の色を指定
rgb(0, 100, 200)で少し暗めの青色を表現

背景色を変える

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

説明

background-colorプロパティで背景色を指定
rgb(240, 240, 240)で薄いグレーを表現

複数の要素に同じ色を使う

<style>
.special-text {
    color: rgb(220, 20, 60);
    font-weight: bold;
}
</style>

<p class="special-text">この文字は特別な色です。</p>
<h3 class="special-text">見出しも同じ色になります。</h3>

説明

CSSクラスを使って同じ色を複数の要素に適用
rgb(220, 20, 60)で深い赤色を表現

RGBaで透明度も指定できる

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

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

アルファ値の設定

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

透明度を使った重ね合わせ効果

<div style="background-color: rgb(100, 149, 237); padding: 20px;">
    青い背景の上に
    <div style="background-color: rgba(255, 255, 0, 0.7); padding: 10px;">
        半透明の黄色い層を重ねています
    </div>
</div>

このように、背景が透けて見える効果を作ることができます。

実際に試してみよう

色の組み合わせパターン

暖色系

赤: rgb(255, 0, 0)
オレンジ: rgb(255, 165, 0)
黄: rgb(255, 255, 0)

寒色系

青: rgb(0, 0, 255)
水色: rgb(0, 255, 255)
紫: rgb(128, 0, 128)

色の調整のコツ

明るい色を作りたいとき

全体的に数値を大きくする
例: rgb(200, 200, 255) → 薄い青

暗い色を作りたいとき

全体的に数値を小さくする
例: rgb(0, 0, 100) → 濃い青

グレーを作りたいとき

3つの数値を同じにする
例: rgb(128, 128, 128) → 中間グレー

他の色指定方法との比較

HEX（16進数）との違い

RGB: rgb(255, 0, 0) HEX: #FF0000

どちらも同じ赤色を表しますが、RGBの方が数値の意味が分かりやすいのが特徴です。

カラーネームとの違い

RGB: rgb(255, 0, 0) カラーネーム: red

カラーネームは簡単ですが、使える色が限られています。RGBなら自由に色を作れます。

よくある質問と解決方法

Q: 思った通りの色にならない

A: 数値を少しずつ変えて調整しましょう。

明るくしたい → 数値を大きく
暗くしたい → 数値を小さく
鮮やかにしたい → 一つの色だけ大きく、他を小さく

Q: 色の組み合わせが分からない

A: 基本的な色彩理論を参考にしましょう。

補色（反対の色）を使うと目立つ
同系色を使うと落ち着いた印象に

Q: アクセシビリティは大丈夫？

A: 色のコントラスト（明暗の差）を確認しましょう。

文字と背景の色差を十分に付ける
色覚に配慮した色選びを心がける

まとめ

RGBの基本

RGBは赤・緑・青の組み合わせで色を表す
rgb(赤, 緑, 青)の形で指定し、それぞれ0から255の数値で調整
rgbaを使えば透明度も調節できる

実践的な使い方

文字色はcolorプロパティで指定
背景色はbackground-colorプロパティで指定
数値を変えることで自由に色をカスタマイズ

RGBを使うと、あなた好みの細かい色を自由に作れます。最初は基本的な色から始めて、だんだん複雑