Webサイトの中の色について

2014/06/13 Soichi Masuda

Webサイトの中で色を出すには、大きく分けて

画像を使う
CSSで指定する

の二つの方法があります。今回は、その中でもCSSでの色の取り扱いについて基本的な事項を説明します。

CSSで色を定義する

CSSでどのように色を定義するかは、W3Cという団体が決めている仕様に基づいてブラウザの開発が行われています。仕様は堅苦しいですが、なるべく簡単に説明します。

そもそもCSSとは...？

CSSはHTML文書を装飾するための言語です。例えば、文書全体の背景を黒にするには下記のように記載します。

body { background-color: black; }

body の background-color を black にする、てな感じです。

CSS Color Module の仕様

その仕様の新しいものは、CSS Color Moduleと言いますが、その最初の方の記載を見ると...

"このモジュールは、要素の前景色や不透明度を指定するプロパティを定義する。また、CSS の値型 <color> についても詳細に定義している。"

via standards.mitsue.co.jp CSS カラーモジュール Level 3

まあ、色を持つパーツとその色の書き方について定義するよ！ってことを書いてます。

色を指定できるパーツ

色を指定できるパーツとしては、

color : テキストの色
background-color: 背景色
border-color: 線の色

なんかが代表的です。

例えば、

div {
  color: white;
  background-color: black;
  border: 10px solid red;
}

だと、下記のようになります。

テキストです

color値

それでは、先ほどのパーツはどのような値を記載するのでしょうか。仕様には、

"<color>はキーワードまたは数値によって指定される"

via standards.mitsue.co.jp CSS カラーモジュール Level 3

と書いてあります。

色のキーワード

今までの例のように、白 → white とか、黒 → black とかはキーワードによって指定しています。

基本カラーキーワードとしては、aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow なんかがあります。

これは拡張されており、多くのキーワードが追加されています。

色の数値表現

キーワードよりもっと表現を豊かにするには、色を数値で表現します。その代表的なものがRGBカラー値です。

"RGB（またはRGBカラーモデル）は色の表現法の一種で、赤 (Red)、緑 (Green)、青 (Blue)の三つの原色を混ぜて幅広い色を再現する加法混合の一種である。"

via wikipedia.org RGB

注意したいのは、RGBですべての色を定義できるわけで無いってことです。ざっくり言うと三原色に何を選ぶかで変わってきます。

via wikipedia.org RGB

sRGBという三原色の決め方だと上記の三角形の中の色のみ定義できます

RGBの書き方

例えば下記の例はすべてRGBの値で赤を表します。

color: #f00;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(100%, 0%, 0%);

rgb(100%,0%,0%)は、Red 100%, Green 0%, Blue 0% という意味で赤になります。%ではなく、絶対数では16進数が使われており、0 ~ 255 まで値をとります。

ff0000 = ff, 00, 00 = 255, 0, 0 = 100%, 0%, 0%

って感じですね。

不透明度 alpha を使った RGBAカラー値

不透明度は、RGBA値で定義されています。

color : rgba(255, 0, 0, 0.5)
color : rgba(100%, 0%, 0%, 0.5)

4つ目の値が、不透明度を 0 ~ 1 の間で定義するalpha値で0に近いほど透明度がまし、1は完全に不透明です。

直感的な表現 HSLカラー値

RGBが多く使われていますが...さてこの色は何色でしょう？

#5b99da

上記を見て、直感的に判断できる人は少ない(と思う...)のでもうちょっと直感的に記載しましょうというのがHSLカラー値です。

HSLカラーは、色相(Hue)、彩度(Saturation)、明度(Lightness)の3つから表されます。色相(H)は角度、彩度(S)と明度(L)は%で表現され、赤だと

hsl(0, 100%, 50%)

と表現されます。直感的で何がいいかって、もうちょっと明るくしたいとか、オレンジ寄りにとかが数値でやりやすくなることですね。

HSL概念図

via wikipedia.org HSL色空間

色相が頭に入ってれば直感的に行けそうですね。

CSS3 のグラデーション

ここまで単色の記載を説明してきましたが、グラデーションもCSSで記載することが出来ます。グラデーションは下記のように記載します。

background-image: linear-gradient(to bottom, #aaa, #000);

下に向かって、#aaa(グレー) から #000(黒)に変わってね。的な。

複数の色も行けます。

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

グラデーションによる虹

via developer.mozilla.org linear-gradient

円形のグラデーションも可能です。

background-image: radial-gradient(white, black);

sass での色の計算

CSSではありませんが、CSSのメタ言語であるSassでは、色の計算を行うことが出来ます。

明るくする、暗くする

lighten(#ff0000, 10%)/* 10%明るく */

 darken(#ff0000, 10%)/* 10%暗く */

実行するとこうなります。

#ff3333

#cc0000;

こいつを利用してグラデーションを書くと簡単

@mixin l-grad($color) {
background-image: linear-gradient($color, darken($color, 20%));
}

includeして実行すると

div { background: linear-gradient(red, #990000); }

ありがとうございました！！