CSSの色の指定方法をサンプルコード付き解説！
CSSの色の指定方法は「キーワード」「カラーコード」「RGB」「HSL」など複数あります。それぞれの色の指定の仕方についてサンプルコード付きで解説します。
CSSでは色を指定してWEBページの文字色や背景色を変更することが出来ます。
その際の色の指定方法ですが、実はいくつか種類があります。今回はCSSの色の指定方法の種類の紹介をそれぞれサンプルコード付きで解説していきます。
CSSの色の指定方法の種類
キーワード
CSS側であらかじめ「red」や「blue」など決められた色のキーワードがあり、そのキーワードを指定することで色の指定が行なえます。
つまり色の名前が決められていてその名前を指定するという方法で初心者でも一番分かりやすくシンプルな指定の方法となります。
色のキーワードは以下のような色があります。
| キーワード | 見本 |
|---|---|
| black | |
| silver | |
| gray | |
| white | |
| maroon | |
| red | |
| purple | |
| fuchsia | |
| green | |
| lime | |
| olive | |
| yellow | |
| navy | |
| blue | |
| teal | |
| aqua | |
| orange | |
| aliceblue | |
| antiquewhite | |
| aquamarine | |
| azure | |
| beige | |
| bisque | |
| blanchedalmond | |
| blueviolet | |
| brown | |
| burlywood | |
| cadetblue | |
| chartreuse | |
| chocolate | |
| coral | |
| cornflowerblue | |
| cornsilk | |
| crimson | |
| cyan | |
| (synonymof aqua) | |
| darkblue | |
| darkcyan | |
| darkgoldenrod | |
| darkgray | |
| darkgreen | |
| darkgrey | |
| darkkhaki | |
| darkmagenta | |
| darkolivegreen | |
| darkorange | |
| darkorchid | |
| darkred | |
| darksalmon | |
| darkseagreen | |
| darkslateblue | |
| darkslategray | |
| darkslategrey | |
| darkturquoise | |
| darkviolet | |
| deeppink | |
| deepskyblue | |
| dimgray | |
| dimgrey | |
| dodgerblue | |
| firebrick | |
| floralwhite | |
| forestgreen | |
| gainsboro | |
| ghostwhite | |
| gold | |
| goldenrod | |
| greenyellow | |
| grey | |
| honeydew | |
| hotpink | |
| indianred | |
| indigo | |
| ivory | |
| khaki | |
| lavender | |
| lavenderblush | |
| lawngreen | |
| lemonchiffon | |
| lightblue | |
| lightcoral | |
| lightcyan | |
| lightgoldenrodyellow | |
| lightgray | |
| lightgreen | |
| lightgrey | |
| lightpink | |
| lightsalmon | |
| lightseagreen | |
| lightskyblue | |
| lightslategray | |
| lightslategrey | |
| lightsteelblue | |
| lightyellow | |
| limegreen | |
| linen | |
| magenta | |
| (synonymof fuchsia) | |
| mediumaquamarine | |
| mediumblue | |
| mediumorchid | |
| mediumpurple | |
| mediumseagreen | |
| mediumslateblue | |
| mediumspringgreen | |
| mediumturquoise | |
| mediumvioletred | |
| midnightblue | |
| mintcream | |
| mistyrose | |
| moccasin | |
| navajowhite | |
| oldlace | |
| olivedrab | |
| orangered | |
| orchid | |
| palegoldenrod | |
| palegreen | |
| paleturquoise | |
| palevioletred | |
| papayawhip | |
| peachpuff | |
| peru | |
| pink | |
| plum | |
| powderblue | |
| rosybrown | |
| royalblue | |
| saddlebrown | |
| salmon | |
| sandybrown | |
| seagreen | |
| seashell | |
| sienna | |
| skyblue | |
| slateblue | |
| slategray | |
| slategrey | |
| snow | |
| springgreen | |
| steelblue | |
| tan | |
| thistle | |
| tomato | |
| turquoise | |
| violet | |
| wheat | |
| whitesmoke | |
| yellowgreen | |
| rebeccapurple |
試しにいくつか文字色と背景色をキーワードで設定してみましょう。下記のサンプルコードを見てみましょう。
上記のサンプルコードではcolorプロパティで文字色をキーワードで指定しています。またbackground-colorプロパティでも背景色をキーワードで指定しています。
カラーコード
カラーコードは「#＋16進数のカラーコード」の形式で設定します。例えば白であれば#ffffff、黒であれば#000000という形です。
光の3原色であるRed（赤）・Green（緑）・Blue（青）の組み合わせの輝かせる度合いによって色が変わります。16進数のカラーコードで例えば黒を表す000000は2桁ごとに区切りそれぞれ
- R: 0
- G: 0
- B: 0
16進数の使ったカラーコードを使って色指定したサンプルコードは下記となります。
先程のキーワードとは違う青や赤の色を設定しています。このようにキーワードでは指定できない多用な色を設定できるのがカラーコードや次で紹介するRGB、HSLなどの特徴でもあります。
RGB
RGBは先程登場しました光の3原色の赤（Red）緑（Green）青（Blue）の3つを指定する方法です。カラーコードとは異なり、16進数ではなく0〜255の数値での指定となります。
CSSでRGBの形式で色を指定したサンプルコードは下記となります。
RGBA
またRGBの指定では透明度まで指定したRGBAの指定の方法があります。下記のサンプルコードを見てみましょう。
RGBでの指定との違いはrgb()ではなく、rgba()を使う点と、4つ目の引数で透明度を0〜1の値の範囲で設定する点となります。
上記のサンプルコードでは文字色、背景色にRGBAの指定で透明度を入れた色を設定しています。
HSL
もしかすると一番馴染みが無いのがHSLという方が多いかもしれませんが、HSLは色相（Hue）彩度（Saturation）輝度（Lightness）を指定する書き方です。
RGBとは指定する対象が異なりますので、別物です。
CSSでHSLの形式で色を指定したサンプルコードは下記となります。
HSLA
HSLもRGBと同様に透明度を加えて、HSLAの形式で指定が可能です。下記のサンプルコードは透明色を設定した例となります。
色の指定方法はどれを使えばいいのか？
さて、これまでCSSでの色の指定方法として
- キーワード
- カラーコード
- RGB
- HSL
現場ですでに使われている指定の仕方にならう
まずすでに現場で上記のいずれかの方法で色の指定を行うというルールが明確化されていれば、現場のルールに従いましょう。
例えば現場のルールではカラーコードの形式で16進数を使っているのに、特定のエンジニア1名画RGB形式で指定しだすとCSSの色指定の仕方に一貫性がなくなりメンテナンスしにくくなります。
すでに現場のルールがあれば現場のルールに従いましょう。
逆に単発のプロジェクトや、一人で開発しているようなサービスでは自分ルールで色指定したり、臨機応変に対応するというスタンスでもいいかもしれません。
透明色を考慮する
CSSの色指定では透明度を含めた透明色の色の指定方法は便利で、よく利用されます。
例えば普段は16進数でカラーコードを指定しているが、透明色を指定したい時はRGBAの形式を使うという場合もあり、透明色も想定してルール作りをしましょう。
Sassでは色は変数で管理できる
Sassなどスタイルシート言語では、色を変数に設定することができ文字色や背景色の指定の際には変数の値を利用するといった事が出来ます。
Sassでは色を変数に格納できる例
// 変数に格納
$mainColor: #eee;
// 利用時
background-color: $mainColor;もちろん変数に格納する際には上記いずれかのパターンで色指定しますが、もしもサイト上で利用する色の種類が少なければ、変数に格納する場合だけなので特に色指定の形式を統一する必要すらないかもしれません。
SassはフロントエンドのCSSの開発効率が劇的に向上しますので、ぜひ導入するようにしましょう。
まとめ
いかがでしたでしょうか。CSSでの色指定の仕方についてその選択肢と、それぞれでの色の指定の仕方をサンプルコード付きで解説してきました。
CSSでの色の指定は最初はカラーコードだったり、RGBなど見慣れないものが多く面食らうかもしれませんが、慣れればそこまで苦にならずに色の指定が行なえます。
ぜひ今回の内容を参考に、CSSで色の指定をしてみて下さい！
