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