HTMLカラー

HTMLのカラーは赤、緑、青の三原色の混合で構成されています。ウェブデザインで色を指定する際には、十六進数（HEX）表記やRGB表記が用いられます。この記事では、HTMLで色を指定する方法とその具体例について詳しく説明します。

以下のカラーピッカーを使用して色を選択してください。選択された色のRGB値が表示されます。

カラー値

HTMLの色は、赤、緑、青（RGB）の値の組み合わせで定義されます。それぞれの色は、0（十六進数：#00）から255（十六進数：#FF）の範囲で指定できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLカラー例</title>
    <style>
        .color-sample {
            width: 100px;
            height: 100px;
            display: inline-block;
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1>HTMLカラー</h1>
    <p>HTMLのカラーは赤、緑、青（RGB）の三原色の組み合わせで表現されます。</p>
    
    <h2>カラー値</h2>
    <table border="1">
        <tr>
            <th>カラー名</th>
            <th>カラーHEX</th>
            <th>カラーRGB</th>
            <th>サンプル</th>
        </tr>
        <tr>
            <td>黒（Black）</td>
            <td>#000000</td>
            <td>rgb(0,0,0)</td>
            <td><div class="color-sample" style="background-color: #000000;"></div></td>
        </tr>
        <tr>
            <td>赤（Red）</td>
            <td>#FF0000</td>
            <td>rgb(255,0,0)</td>
            <td><div class="color-sample" style="background-color: #FF0000;"></div></td>
        </tr>
        <tr>
            <td>緑（Green）</td>
            <td>#00FF00</td>
            <td>rgb(0,255,0)</td>
            <td><div class="color-sample" style="background-color: #00FF00;"></div></td>
        </tr>
        <tr>
            <td>青（Blue）</td>
            <td>#0000FF</td>
            <td>rgb(0,0,255)</td>
            <td><div class="color-sample" style="background-color: #0000FF;"></div></td>
        </tr>
        <tr>
            <td>黄（Yellow）</td>
            <td>#FFFF00</td>
            <td>rgb(255,255,0)</td>
            <td><div class="color-sample" style="background-color: #FFFF00;"></div></td>
        </tr>
        <tr>
            <td>シアン（Cyan）</td>
            <td>#00FFFF</td>
            <td>rgb(0,255,255)</td>
            <td><div class="color-sample" style="background-color: #00FFFF;"></div></td>
        </tr>
        <tr>
            <td>マゼンタ（Magenta）</td>
            <td>#FF00FF</td>
            <td>rgb(255,0,255)</td>
            <td><div class="color-sample" style="background-color: #FF00FF;"></div></td>
        </tr>
        <tr>
            <td>銀（Silver）</td>
            <td>#C0C0C0</td>
            <td>rgb(192,192,192)</td>
            <td><div class="color-sample" style="background-color: #C0C0C0;"></div></td>
        </tr>
        <tr>
            <td>白（White）</td>
            <td>#FFFFFF</td>
            <td>rgb(255,255,255)</td>
            <td><div class="color-sample" style="background-color: #FFFFFF; border: 1px solid #000;"></div></td>
        </tr>
    </table>

    <h2>1600万種類の異なる色</h2>
    <p>赤、緑、青の3色の組み合わせで0から255の範囲内で指定できるため、合計1600万種類（256 x 256 x 256）の異なる色を表現できます。</p>

    <h2>灰色のトーン</h2>
    <p>黒から白へのグラデーションを示す例です。</p>
    <table border="1">
        <tr>
            <th>カラー名</th>
            <th>カラーHEX</th>
            <th>カラーRGB</th>
            <th>サンプル</th>
        </tr>
        <tr>
            <td>黒（Black）</td>
            <td>#000000</td>
            <td>rgb(0,0,0)</td>
            <td><div class="color-sample" style="background-color: #000000;"></div></td>
        </tr>
        <tr>
            <td>ダークグレー（Dark Gray）</td>
            <td>#404040</td>
            <td>rgb(64,64,64)</td>
            <td><div class="color-sample" style="background-color: #404040;"></div></td>
        </tr>
        <tr>
            <td>グレー（Gray）</td>
            <td>#808080</td>
            <td>rgb(128,128,128)</td>
            <td><div class="color-sample" style="background-color: #808080;"></div></td>
        </tr>
        <tr>
            <td>ライトグレー（Light Gray）</td>
            <td>#C0C0C0</td>
            <td>rgb(192,192,192)</td>
            <td><div class="color-sample" style="background-color: #C0C0C0;"></div></td>
        </tr>
        <tr>
            <td>白（White）</td>
            <td>#FFFFFF</td>
            <td>rgb(255,255,255)</td>
            <td><div class="color-sample" style="background-color: #FFFFFF; border: 1px solid #000;"></div></td>
        </tr>
    </table>

    <h2>ウェブセーフカラー</h2>
    <p>数年前、多くのコンピュータが256色しかサポートしていなかった時代には、216色のウェブセーフカラーが推奨されていました。これは、異なるプラットフォームでも一貫して表示されるようにするためです。現在のコンピュータは数百万色を表示できるため、この制約はほとんどなくなっています。</p>
    <table border="1">
        <tr>
            <th>カラー名</th>
            <th>カラーHEX</th>
            <th>カラーRGB</th>
            <th>サンプル</th>
        </tr>
        <tr>
            <td>黒（Black）</td>
            <td>#000000</td>
            <td>rgb(0,0,0)</td>
            <td><div class="color-sample" style="background-color: #000000;"></div></td>
        </tr>
        <tr>
            <td>白（White）</td>
            <td>#FFFFFF</td>
            <td>rgb(255,255,255)</td>
            <td><div class="color-sample" style="background-color: #FFFFFF; border: 1px solid #000;"></div></td>
        </tr>
        <tr>
            <td>赤（Red）</td>
            <td>#FF0000</td>
            <td>rgb(255,0,0)</td>
            <td><div class="color-sample" style="background-color: #FF0000;"></div></td>
        </tr>
        <tr>
            <td>緑（Green）</td>
            <td>#00FF00</td>
            <td>rgb(0,255,0)</td>
            <td><div class="color-sample" style="background-color: #00FF00;"></div></td>
        </tr>
        <tr>
            <td>青（Blue）</td>
            <td>#0000FF</td>
            <td>rgb(0,0,255)</td>
            <td><div class="color-sample" style="background-color: #0000FF;"></div></td>
        </tr>
        <tr>
            <td>黄（Yellow）</td>
            <td>#FFFF00</td>
            <td>rgb(255,255,0)</td>
            <td><div class="color-sample" style="background-color: #FFFF00;"></div></td>
        </tr>
        <tr>
            <td>マゼンタ（Magenta）</td>
            <td>#FF00FF</td>
            <td>rgb(255,0,255)</td>
            <td><div class="color-sample" style="background-color: #FF00FF;"></div></td>
        </tr>
        <tr>
            <td>シアン（Cyan）</td>
            <td>#00FFFF</td>
            <td>rgb(0,255,255)</td>
            <td><div class="color-sample" style="background-color: #00FFFF;"></div></td>
        </tr>
    </table>

</body>
</html>

HTMLカラー

例

以下の表は、赤、緑、青の値を混ぜた具体的な色の例です。

カラー名 カラーHEX カラーRGB
黒（Black） #000000 rgb(0,0,0)
赤（Red） #FF0000 rgb(255,0,0)
緑（Green） #00FF00 rgb(0,255,0)
青（Blue） #0000FF rgb(0,0,255)
黄（Yellow） #FFFF00 rgb(255,255,0)
シアン（Cyan） #00FFFF rgb(0,255,255)
マゼンタ（Magenta） #FF00FF rgb(255,0,255)
銀（Silver） #C0C0C0 rgb(192,192,192)
白（White） #FFFFFF rgb(255,255,255)

1600万種類の異なる色

赤、緑、青の3色の組み合わせで0から255の範囲内で指定できるため、合計1600万種類（256 x 256 x 256）の異なる色を表現できます。

以下の表は、赤の値を0から255まで変化させたときの異なる色の例です。緑と青の値は0に固定されています。

赤の値 カラーHEX カラーRGB
0 #000000 rgb(0,0,0)
64 #400000 rgb(64,0,0)
128 #800000 rgb(128,0,0)
192 #C00000 rgb(192,0,0)
255 #FF0000 rgb(255,0,0)

灰色のトーン

黒から白へのグラデーションを示す例です。

カラー名 カラーHEX カラーRGB
黒（Black） #000000 rgb(0,0,0)
ダークグレー（Dark Gray） #404040 rgb(64,64,64)
グレー（Gray） #808080 rgb(128,128,128)
ライトグレー（Light Gray） #C0C0C0 rgb(192,192,192)
白（White） #FFFFFF rgb(255,255,255)

ウェブセーフカラー

数年前、多くのコンピュータが256色しかサポートしていなかった時代には、216色のウェブセーフカラーが推奨されていました。これは、異なるプラットフォームでも一貫して表示されるようにするためです。現代のコンピュータは数百万色を表示できるため、この制約はほとんどなくなっていますが、依然としてデザインの選択肢として重要です。

カラー名 カラーHEX カラーRGB
黒（Black） #000000 rgb(0,0,0)
白（White） #FFFFFF rgb(255,255,255)
赤（Red） #FF0000 rgb(255,0,0)
緑（Green） #00FF00 rgb(0,255,0)
青（Blue） #0000FF rgb(0,0,255)
黄（Yellow） #FFFF00 rgb(255,255,0)
マゼンタ（Magenta） #FF00FF rgb(255,0,255)
シアン（Cyan） #00FFFF rgb(0,255,255)

まとめ

HTMLカラーはウェブデザインの基本要素です。RGB値を組み合わせることで、1600万種類の色を表現できます。十六進数（HEX）やRGB表記を用いることで、正確に色を指定できます。また、ウェブセーフカラーを使用することで、すべての環境で一貫した色を表示することができます。

関連QA

Q1: HTMLで色を指定する際にHEXとRGBの違いは何ですか？

HEXは十六進数表記で、RGBは赤、緑、青の値を10進数で指定する表記です。どちらも同じ色を表現できますが、好みや用途に応じて使い分けられます。

Q2: ウェブセーフカラーとは何ですか？

ウェブセーフカラーは、すべてのコンピュータで一貫して表示されるように設計された216色のカラーパレットです。現在ではほとんどのコンピュータが数百万色を表示できるため、この制約はほぼなくなっています。

Q3: HTMLで透明な色を指定する方法はありますか？

はい、RGBA表記を使用することで透明な色を指定できます。Aはアルファ値（透明度）を示し、0（完全に透明）から1（完全に不透明）の範囲で指定します。

例:

<p style="color: rgba(255,0,0,0.5);">半透明の赤色のテキスト</p>