CSSにおける色の指定方法

2023.04.08

CSSのプロパティで色を指定するときは、「black」「red」などのキーワードのほか、RGBモデル、HSLモデルを使う。

キーワード

要素の色を指定するキーワードには16色の基本色が定義されている。また、透明色、色の継承を表すキーワードも定義されている。
CSS Color Module Level 3では基本色の他に、Webにおける画像の記述方法を規定する仕様であるSVG1.0（Scalable Vector Graphics 1.0）に対応した147色のカラーネームを定義している。多くのブラウザーはこれらのキーワードに対応しており、値として指定可能である。

  • black：黒色。rgb(0,0,0)、#000000と同じ。
  • silver：銀色。rgb(192,192,192）、#c0c0c0と同じ。
  • teal：青緑色。rgb(0,128,128)、#008080と同じ。
  • transparent：完全な透明を表す。　など

RGBモデル

RGBモデルは、赤（Red）、緑（Green）、青（Blue）の３つの値の組み合わせで色を指定する。「関数記法」と「16進記法」の2つの記法がある。

rgb()関数型の値。0～255までの数値、または％値をカンマ（,）で区切って3つ指定する。rgb(255,0,0）、rgb(100%,0%,0%）は赤となる。
rgba()関数型の値。rgb()に加えて、4つ目の値で透明度を指定できる。0が完全な透明で、1が完全な不透明。rgba(255,0,0,0.5)は、透明度50%の赤。
#RRGGBBシャープ（#）に続けて16進数（0～f）で6つの数値を指定する。「#ff0000」は赤となる。
#RGBシャープ（#）に続けて3つの16進数を指定する。3桁の数値は2桁ずつ同値の「#RRGGBB」形式に変換される。「#f00」は「#ff0000」となり、赤となる。

HSLモデル

HSLモデルは色の種類である「色相」（Hue）、鮮やかさである「彩度」（Saturation）、明るさである「明度」（Lightness）の3つの値の組み合わせで色を指定する。

HSLモデルにおける色相は色相環（赤を0度として時計回りに黄、緑、青紫、赤の順に360度で変化する）に対応している。おおよその色の対応は、赤：0度、黄：90度、緑：180度、青紫：270度。彩度は0%に近づくほど色がくすんで見え、100%に近づくほどはっきりして見える。また、明度は0%に近づくほど色が暗く見え、100%に近づくほど明るく見える。

hsl()関数型の値。0～360までの数値で色相を、%値で彩度、明度をそれぞれカンマ（,）で区切って指定する。
hsla()関数型の値。hsl()に加えて、4つ目の値で透明度を指定できる。0が完全な透明で、1が完全な不透明。
inserted by FC2 system