CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのrgb()関数で色を定義する方法｜RGBモデルの基本と実例

CSSでは、rgb()関数を使うことで、赤・緑・青（Red-Green-Blue）の3つの光の三原色を組み合わせた「RGBモデル」で色を指定できます。各色の値は0〜255の範囲で設定し、rgb(赤, 緑, 青)の形式で記述します。

rgb()関数の基本的な書き方

構文は以下のとおりです。

rgb(赤の値, 緑の値, 青の値)
  • rgb(255, 0, 0) → 赤
  • rgb(0, 255, 0) → 緑
  • rgb(0, 0, 255) → 青
  • rgb(255, 255, 255) → 白
  • rgb(0, 0, 0) → 黒

3つの値がすべて同じ場合は無彩色（グレー）になり、値が大きいほど明るい色になります。また、CSS3以降ではrgba()を使うことで、4番目の引数にアルファ値（透明度：0〜1）を追加することも可能です。

実装例

次のコードは、rgb()関数を使って背景色や文字色を設定するサンプルです。h1とh2にはhsl()関数で色相・彩度・輝度を指定し、p要素にはrgb()関数で青い背景と白い文字色を適用しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
            background-color:hsl(0,100%,50%);
         }
         h2 {
            background-color:hsl(192,89%,48%);
         }
         p {
            background-color:rgb(0,0,255);
            color: rgb(255,255,255);
         }
      </style>
   </head>
   <body>
      <h1>Red Background</h1>
      <h2>Blue Background</h2>
      <p>This is demo text!</p>
   </body>
</html>

表示結果のポイント

  • h1要素：hsl(0,100%,50%)により、鮮やかな赤色の背景が表示されます。
  • h2要素：hsl(192,89%,48%)により、シアン寄りの青色の背景が表示されます。
  • p要素：rgb(0,0,255)で青色の背景、rgb(255,255,255)で白色の文字が適用されます。

このように、rgb()関数は直感的に数値で色を制御できるため、Webデザインにおいて最も広く使われている色指定方法の一つです。デザインツールで取得したカラーコードをそのまま反映したい場合にも便利なので、ぜひ活用してみてください。

  1. CSSで放射状グラデーションの形状を設定する方法

    CSSで放射状グラデーションの形状を設定するには、radial-gradient()関数を使用します。この関数は、背景画像として放射状グラデーションを指定するためのもので、第1引数に希望する形状を指定します。指定できる形状は「ellipse」（楕円）と「circle」（円）の2種類です。以下のように記述します。background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));上記の例では、楕円形のグラデーションが黄緑色から赤、そして水色へと変化していきます。色はカンマで

  2. CSSでグラデーションのカラーストップ位置を設定する方法

    CSSのグラデーションでは、各色が切り替わる位置(カラーストップ)をパーセンテージまたは絶対的な長さで指定できます。これにより、色の遷移を均等ではなく自由にコントロールすることが可能です。カラーストップの基本例えば、linear-gradient()関数でカラーストップの位置を指定する場合、以下のように記述します。background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );このように位置を明示的に指定すると、各色がその地点で完全に