CSSカラー入門：色指定の基本から透明度の調整まで徹底解説

UIを際立たせるために欠かせないのが、適切なカラーパレットの選択です。このチュートリアルでは、UIを構築する際に要素やフォントなど、あらゆる部分へ簡単に色を割り当てる方法を学びます。

CSSで色を扱うには、colorデータ型を使用します。これは標準的なRGB（赤・緑・青）形式で色を表現します。

colorの基本的な書き方

CSSで色を定義する方法は、主に以下の4つがあります。

• キーワードで指定する：「red」「white」「yellow」などの文字列として記述します。
• 16進数（HEX）表記で指定する：例えば #fff のように記述します。
• rgb() または rgba() 関数を使って指定します。
• hsl() や hsla() などのHSL関数を使って指定します。

キーワードによる色指定

要素に色を追加する最も手軽な方法が、キーワードによる指定です。

ただし、背景色なのかテキストの色なのか、あるいは要素自体の色なのかによって、使うべきプロパティが異なる点には注意してください。ここでは例として、定番のボタン要素を使います。

<button class="color">Color Me</button>

ボタン要素に色を付けるには、2つの選択肢があります。background-colorプロパティを使うか、colorプロパティを使うかです。colorプロパティはテキストの色を、background-colorは背景の色を変更します。それでは、ボタンを選択して色を追加してみましょう。

とても簡単ですね。

rgb()とhsl()関数の使い方

キーワードを使って色を指定する方法がわかりました。利用可能なすべてのキーワードについては、キーワードカラーチートシートを参照してください。キーワードだけでも多くの色を表現できますが、表現できる範囲には限界があります。

実は、キーワードで表される色は、HEX RGB形式やRGB10進数形式でも表現できます。例えば「black」は #000000、10進数では 0,0,0 となります。HEXや10進数を使えば、より細かく具体的な色の指定が可能です。

RGB10進数を手軽に指定するには、rgb()関数を使います。各値の最大値は255です。先ほどのキーワードによる色指定を、この2つの新しい方法に書き換えてみましょう。

button.color {
    /* HEXとRGB10進数 */
    color: #fff;
    background-color: rgb(210,105,30);
}

black（#000000）のように同じ文字が繰り返されている場合は、最初の3文字だけを書けば省略できます。上の例のwhite（#fff）がまさにその例です。もちろん #ffffff とフルで書いても同じ意味になります。

もうひとつの方法として、hsl()関数があります。HSLは「色相（Hue）」「彩度（Saturation）」「輝度（Lightness）」の頭文字です。輝度は白（100%）から黒（0%）までのパーセンテージで表されます。彩度もパーセンテージですが、こちらはグレーの混ざり具合を示し、100%が純粋な色になります。色相はカラーホイール上の角度（0〜360度）で、0が赤、120が緑、240が青に対応します。少し複雑に聞こえるかもしれませんね 😅。

Visual Studioなどのコードエディタには、便利なカラーピッカーが組み込まれています。hsl()と入力してマウスをホバーすると、カラーピッカーがポップアップ表示されます。

左側のバーで色相を操作し、残りの2本のバーで彩度と輝度を調整できます。いろいろと触ってみて、お気に入りの色を見つけてください。HSLは色の濃淡を作るのに特に便利で、彩度と輝度を操作することで繊細な調整が可能です。自分のニーズに合わせて、HSLを好んで使う人も多くいます。

色の不透明度（透過率）を調整する

rgb関数もhsl関数も、それぞれ rgba() や hsla() として表現できることにお気づきでしょうか。「a」はアルファ（alpha）を意味し、これはほぼ透明度・不透明度のことを指します。0が完全に透明、1が完全不透明です。

不透明度を調整することで、さらに洗練された色表現が可能になります。ボタンの色の仕上げとして、不透明度を変更してみましょう。

button.color {
    color: #fff;
    background-color: rgba(210,105,30, 0.7);
}

不透明度を加えたことで、テキストがぐっと読みやすくなりました。