colorプロパティやbackground-colorプロパティを使って、文字の色や背景の色を変えることがあると思いますが、色の指定方法はいくつかあるのでまとめました。
colorプロパティやbackground-colorプロパティで指定する色はキーワードやカラーコードで指定することができます。
キーワードで色を指定する
キーワードで色を指定する方法は、赤だったら「red」、青だったら「blue」という風に、色を表す言葉を使います。
指定できるキーワードはたくさんありますが、基本色として定義されている16色を紹介しておきます。
| black | |
|---|---|
| white | |
| silver | |
| gray | |
| red | |
| maroon | |
| purple | |
| fuchsia | |
| green | |
| lime | |
| yellow | |
| olive | |
| blue | |
| navy | |
| aqua | |
| teal |
RGBモデル
RGBモデルといって、赤（Red）・緑（Green）・青（Blue）の3つの値の組み合わせで色を指定する方法もあり、関数記法と16進記法という2つの記述方法があります。
rgbとrgba
rgbとrgbaを使って色を指定するのは、関数記法というものです。
rgbにはそれぞれ0〜255までの数値、または%値をカンマ（,）で区切って指定します。
たとえば、赤を指定するときは「rgb(255,0,0)」もしくは「rgb(100%,0%,0%)」。緑を指定するときは、「rgb(0,255,0)」もしくは「rgb(0%,100%,0%)」。青を指定するときは、「rgb(0,0,255)」もしくは「rgb(0%,0%,100%)」といった具合です。
rgbにaを加えたrgbaという指定方法がありますが、この「a」を使って指定できる4つ目の値は透明度。
0〜1までで透明度を指定することができ、0だと完全な透明、1だと完全な不透明です。ちなみに0.5などの小数点も可能です。
たとえば、先ほど赤を「rgb(255,0,0)」で表しましたが、この赤色の透明度を50%にしたいときは、「rgba(255,0,0,0.5)」と指定します。
<span style=”color:rgba(255,0,0,0.5);”>薄い赤色です。</span>
あんまり文字色で透明度を使うことはないかと思いますが、一応例として載せておきました。
#RRGGBBと#RGB
関数記法ともう一つ、0〜fの16進数で表す、16進記法というものがあります。
これはシャープ（#）に続けて16進数（0〜f）で6つの数値を指定するという方法です。
たとえば、赤だと「#ff0000」、緑だと「#00ff00」、青だと「#0000ff」という感じ。
また、#RGBの値がそれぞれ同値なら、3つの数値で指定することも可能です。
赤を表す「#ff0000」は「#f00」とイコールだということです。
<span style=”color:#f00;”>赤色です。</span>
HSLモデル
HSLモデルは色の種類を表す「色相（Hue）」、鮮やかさを表す「彩度（Saturation）」、明るさを表す「明度（Lightness）」の3つの値の組み合わせで色を指定するという方法です。
HSLモデルにおいて、色相というのは赤を0度として時計回りに黄や緑、青紫、赤といった順番で360度変化する「色相環」に対応しています。
ちなみに色の対応は赤は0度、黄は90度、緑は180度、青紫は270度となっています。
hslとhsla
HSLモデルは色相環に対応しているため、0〜360までの数値で色相を指定します。
また、彩度と明度は%値で指定し、彩度は0%に近づくほど色がくすんで見え、100%に近づくほどはっきりして見えますし、明度は0%に近づくほど色が暗く見え、100%に近づくほど明るく見えます。
rgbaと同様、hslaという指定の方法もあり、このときの「a」も透明度を指定するためのものです。
色の指定方法まとめ
このように色の指定はいくつか方法があります。
- キーワード
- RGBモデル
- HSLモデル
colorプロパティやbackground-colorプロパティなどで文字色や背景色を指定したりするときに必要なので、CSSを使う上では必須の知識です。
[…] 色の指定に関しては、『CSSの色の指定方法まとめ！RGBモデルやHSLモデル【CSS】』の記事に書いています。 […]