Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

概要

RGBカラーモデルは、赤(Red)、緑(Green)、青(Blue)の3つのチャンネルと、透明度(Alpha)で色を表現するCSSの最も基本的な色指定方法です。rgb()関数、rgba()関数、および16進数表記(#RRGGBB、#RRGGBBAA)の3つの記法があります。ウェブデザインにおけるカラー指定の標準であり、すべてのブラウザで完全にサポートされています。

対応ブラウザ

デスクトップ

Chrome 65+
Edge 79+
Safari 12.1+
Firefox 52+

モバイル

Chrome Android 65+
Safari iOS 12.2+
Firefox Android 52+

基本構文

CSS
.element {
  color: rgb(255 99 71);
  background: rgba(0, 0, 0, 0.5);
  border-color: #3498db;
}

実務での使いどころ

  • 基本的な色指定

    テキスト、背景、ボーダーなどあらゆる要素の色をRGB値で正確に指定します。

注意点

  • モダンCSSではrgb()関数のカンマ区切りとスペース区切りの両方がサポートされていますが、スペース区切りが推奨構文です。

アクセシビリティ

  • 色のみで情報を伝達しないようにし、テキストと背景のコントラスト比がWCAG 2.1のAA基準(4.5:1)を満たすよう設計してください。