RGB
Red Green Blue赤・緑・青の光の強さを組み合わせて、画面上の色を表現するカラーモデルのこと。
概要（サマリー）
RGBとは、赤（Red）・緑（Green）・青（Blue）の光の強さを組み合わせて、画面上の色を表現するカラーモデルのことである。三つの色の照明を重ねて多くの色を作るイメージである。
詳細解説
光の三原色を組み合わせる
RGBでは赤、緑、青を強くするほど光が加わる。三色を最大にすると白に近づき、すべてをゼロにすると黒になる。この仕組みを加法混色という。
0から255で強さを表す
Webでは各成分を0から255で表すことが多い。rgb(255 0 0)は赤、rgb(0 255 0)は緑、rgb(0 0 255)は青である。
.badge {
background-color: rgb(32 120 220);
}
CSSでは、このように三つの成分を指定して色を作れる。
16進カラーコードとの関係
rgb(255 128 0)と#ff8000は同じ色を表せる。前者は10進数、後者は16進数で各成分を書いている。表し方は違っても、赤・緑・青の強さという考え方は共通である。
RGB値と16進カラーコードの対応は、実際に値を動かしながら確認すると理解しやすい。
透明度も指定できる
CSSのRGB表記では、rgb(32 120 220 / 50%)のように透明度を追加できる。透明度0%なら透明、100%なら不透明になる。背景との重なりで見え方が変わる点に注意が必要である。
色だけに情報を頼らない
色の見え方には個人差や画面差がある。エラーを赤だけで示すのではなく、アイコンや文章も添えるなど、アクセシビリティを考えた設計が大切である。
よくある勘違い
RGBは印刷にも同じように使う？
画面は主にRGBだが、印刷ではCMYKがよく使われる。光とインクでは色を作る仕組みが異なる。
数値を大きくすると色が暗くなる？
RGBは光なので、成分を強くするほど明るさが増える方向に働く。
同じRGB値ならすべての画面で完全に同じ色？
画面の性能、設定、色空間などによって見え方が異なる場合がある。
まとめ
- RGBは赤・緑・青の光で色を表す
- 各成分は0〜255で指定することが多い
- 16進カラーコードもRGBの値を別形式で表せる
- 色だけに意味を持たせずアクセシビリティにも配慮する
情報ソース
より詳しくAIに聞いてみよう
- RGBを光の混色として説明してください。
- RGBとCMYKの違いを教えてください。
- RGB値と16進カラーコードの対応を説明してください。
- 読みやすい配色をRGBで提案してください。
- 色覚の違いに配慮したCSSを作ってください。