概要へ移動

色を指定するには、下表の方法がある。

キーワードで指定

このページにある文字列をカラーコードとして使える。

CSS : キーワード
.sample {
color: white;
background-color: navy;
}
実行結果
sample

いろいろ試してみる。

CSS : キーワード
.sample {
color: yellow;
background-color: darkslategray;
}
実行結果
sample
CSS : キーワード
.sample {
color: white;
background-color: tomato;
}
実行結果
sample
CSS : キーワード
.sample {
color: darkslategray;
background-color: gainsboro;
}
実行結果
sample
CSS : キーワード
.sample {
color: thistle;
background-color: purple;
}
実行結果
sample

透明色( transparent

透明な色を設定しても見えないので意味が無さそうだが、グラデーションをつける場合にとても有効である。

詳しくは以下のページを参照。

線形グラデーションの例

※ 上記のコードではtransparentを使っている。

16進数で指定

赤(R:red)、緑(G:lime)、青(B:blue)の三原色の割合で、すべての色を表現できる。

三原色をそれぞれ0255の段階で指定できるため、その色数は1600万色以上になる。(256 × 256 × 256

膨大な数から色を選択することは容易ではないので、本サイトが便利であろう。

16進数(6桁)

RGBの三原色をそれぞれ0255の段階で指定できる。以下は、もっとも基本的な色。

キーワード赤(R:red)緑(G:lime)青(B:blue)解説
black000RGB値が全て0の場合、黒
red25500Rが255の場合、赤
lime02550Gが255の場合、緑
blue00255Bが255の場合、青
white255255255RGB値が全て255の場合、白

※ 「緑」は本来「ライム」と書くべきだろうが、ややこしいので「緑」として説明する。

ここで、さまざまな色の三原色の量を見てみる。

キーワード赤(R:red)緑(G:lime)青(B:blue)解説
トマト
tomato 255 9971赤っぽい色は、Rが多い。
フォレストグリーン
forestgreen34 139 34緑っぽい色は、Gが多い。
ロイヤルブルー
royalblue65105 225 青っぽい色は、Bが多い。
ゴールド
gold 255 215 0黄色っぽい色は、RとGが多い。
空色
skyblue135 206 235 水色っぽい色は、GとBが多い。
インディゴ
indigo 75 0 130 紫っぽい色は、RとBが多い。

さて、トマト 色の16進数(6桁)を求めてみる。

RGBのそれぞれの数値(10進数)を16進数に変える。(計算は色見本のページですると簡単)

10進数16進数
R: 赤255ff
G: 緑9963
B: 青7147

計算した16進数を、R+G+Bの順につなげると、ff6347になる。

これの先頭に#を加えた#ff6347が16進数(6桁)のカラーコードになる。

CSS : #ff6347
.sample {
color: black;
background-color: #ff6347;
}
実行結果
sample

上の色は、下の色と同じになる。

CSS : tomato
.sample {
color: black;
background-color: tomato;
}
実行結果
sample

※ なお、01などの場合は、0001のようにゼロで2桁にする。

主要な色の16進数表記を下表に示す。

キーワード赤(R:red)緑(G:lime)青(B:blue)16進数(6桁)
black000#000000
グレー
gray or grey128128128#808080
white255255255#ffffff
red25500#ff0000
yellow2552550#ffff00
lime02550#00ff00
シアン
aqua or cyan0255255#00ffff
blue00255#0000ff
マゼンダ
fuchsia or magenta2550255#ff00ff

16進数(3桁)

#44aa88#bb7722のように、RGBの(全ての色の)2桁が同じ文字の場合、#4a8#b72のように3桁に省略することができる。

CSS : tomato
.sample {
color: black;
background-color: #4a8;
}
実行結果
sample

3桁で表現できる色の一覧はここ。(これだけでも「4000色」以上の色がある。16 × 16 × 16

グレー(灰色)の選び方

無彩色であるグレー(灰色)の濃さを選ぶ場合、とりあえず3桁の16進数から選ぶのが便利。

キーワードを含めた、モノクロ色の一覧はここ

rgb() で指定

RGBの10進数の値を直接指定する方法もある。

たとえば トマト 色の場合、下表のRGB値になるので、rgb( 255, 99, 71 )と指定する。

キーワード赤(R:red)緑(G:lime)青(B:blue)
トマト
tomato2559971
CSS : tomato
.sample {
color: black;
background-color: rgb( 255, 99, 71 );
}
実行結果
sample

rgba()

rgb()を拡張したものがrgba()になる。

これは、RGB値以外に不透明度を指定できる。

不透明度00.51
出力完全な透明(見えない)半透明完全な不透明

上記 トマト 色を、50%の半透明にする場合は、 rgb( 255, 99, 71, 0.5 )と指定する。

CSS : tomato
.sample {
color: black;
background-color: rgb( 255, 99, 71, 0.5 );
}
実行結果
sample

この半透明は、グラデーションを設定する場合に使うことが多い。

hsl() で指定

色はRGB値以外にHSL値を使っても指定できる。

HSLとはH(位相)、S(彩度)、L(明度)のことである。

位相Hue359°赤~黄~緑~青~紫
彩度Saturation0%100%渋い ~ 鮮やか
明度Lightness0%100%暗い ~ 明るい

たとえばトマト 色は下表の値になる。

位相Hue9
彩度Saturation100%
明度Lightness64%

よって、hsl( 9, 100%, 64% )と指定する。

CSS : tomato
.sample {
color: black;
background-color: hsl( 9, 100%, 64% );
}
実行結果
sample

hsla()

rgba() と同様に、第四引き数に不透明度を指定できる。

上記 トマト 色を、50%の半透明にする場合は、hsla( 9, 100%, 64%, 0.5 )と指定する。

CSS : tomato
.sample {
color: black;
background-color: hsl( 9, 100%, 64%, 0.5 );
}
実行結果
sample