CSSのRGBとRGBaカラー完全ガイド：違い・使い方・実践テクニック

CSSにおけるRGBとRGBaカラーの違いを解説します。RGBaを活用すれば、ウェブサイトに美しく目を引くUIコンポーネントを作成できます。

RGBとRGBaは、CSSで使われる2つのカラーモデルです。どちらも、#282828のような16進数（Hexコード）カラーバリューの代替として利用できます。

RGBとRGBaの違いとは？

• RGB：Red（赤）、Green（緑）、Blue（青）の頭文字
• RGBa：Red（赤）、Green（緑）、Blue（青）に加えてAlpha（アルファ）チャンネルを持つ

アルファは透明度を制御するためのチャンネルで、色の透け具合を細かく調整できます。

最初は分かりにくいかもしれませんが、読み進めればすぐに理解できるでしょう。

rgb()関数とrgba()関数の基本

CSSでは、RGBとRGBaを使うためにrgb()とrgba()という2つのカラー関数が用意されています。

どちらの関数も、赤・緑・青それぞれの色を0〜255の範囲の数値で指定して背景色を設定します。

ただし、rgb()は不透明な単色しか指定できません。

{   
    /* 100%不透明な緑 */
    background-color: rgb(0, 255, 0); 
}

一方、RGBaはアルファチャンネルによる透明度の指定が可能なので、はるかに柔軟です。

{   
    /* 50%透明な緑 */
    background-color: rgba(0, 255, 0, 0.5); 
}

透明度はなぜ便利なのか？

背景色に透明度を加えると、どんなメリットがあるのでしょうか。

例えば、次のような視線を集めるUIカードをデザインしたいとしましょう。

上記のUIカードは以下の要素で構成されています。

• サムネイル画像
• オーバーレイ（半透明の重ね合わせレイヤー）
• その上に表示されるテキスト

ここではrgba()関数を使い、アルファチャンネルで背景画像の見え方をテキストとのバランスで調整しました。オーバーレイには50%の黒の透明度を選択しています。

.card-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 0.5 = 50% */
}

なぜ50%の透明度なのか？

実際には40%でも60%でも構いません。また、異なる透明度を組み合わせたlinear-gradient（線形グラデーション）を使うこともできます。重要なのは、どんな見た目を実現したいかということです。

アルファ値の高低による違い

• アルファ値が低いほど（例：0.1）、透明度が高くなり、背景画像がよりはっきりと見えます。
• アルファ値が高いほど（例：0.9）、透明度が低くなり、背景画像はほとんど見えなくなります。

下の比較画像を見ると、アルファチャンネルの値によってコンテンツの可読性や雰囲気が大きく変わることが分かります。

オーバーレイを明るすぎたり暗すぎたりしないように注意しましょう。

大切なのは、ユーザーにコンテンツをどう伝えたいかに合わせて、最適な「スイートスポット」を見つけることです。

サンプルコード一式

以下に、UIカードのサンプルで使用したHTMLとCSSの全コードを示します。自分のプロジェクトの参考資料や出発点としてご活用ください。

HTML

<div class="card">
  <div class="card-overlay"></div>
  <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" />
  <div class="card-text">
    <h3 class="card-title">The North Sea of Denmark</h3>
    <p class="card-description">
      Explore the beautiful &amp; dynamic North Sea of Denmark — where every day
      is a new experience.
    </p>
  </div>
</div>

CSS

.card {
    position: relative;
    height: 400px;
    width: 400px;
}

.card-thumbnail {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
}

.card-text {
    color: white;
    position: absolute;
    width: 80%;
    max-width: 300px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.card-title {
    font-size: 1.45rem;
}
.card-description {
    font-size: 1.15rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.card-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}