カラーコード - CSSの設定値 - Web開発

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

キーワード	一覧 \| `transparent`
16進数	６桁 \| ３桁
RGB	`rgb()` \| `rgba()`
HSL	`hsl()` \| `hsla()`

キーワードで指定

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

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)の三原色の割合で、すべての色を表現できる。

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

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

16進数（６桁）

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

色	キーワード	赤(R:`red`)	緑(G:`lime`)	青(B:`blue`)	解説
黒	`black`	`0`	`0`	`0`	RGB値が全て`0`の場合、黒
赤	`red`	`255`	`0`	`0`	Rが`255`の場合、赤
緑	`lime`	`0`	`255`	`0`	Gが`255`の場合、緑
青	`blue`	`0`	`0`	`255`	Bが`255`の場合、青
白	`white`	`255`	`255`	`255`	RGB値が全て`255`の場合、白

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

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

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

さて、トマト色の16進数（６桁）を求めてみる。

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

色	10進数	16進数
R: 赤	`255`	`ff`
G: 緑	`99`	`63`
B: 青	`71`	`47`

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

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

CSS : #ff6347


.sample  {
    color:              black;
    background-color:   #ff6347;
}

実行結果

sample

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

CSS : tomato


.sample  {
    color:              black;
    background-color:   tomato;
}

実行結果

sample

※ なお、0や1などの場合は、00や01のようにゼロで２桁にする。

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

色	キーワード	赤(R:`red`)	緑(G:`lime`)	青(B:`blue`)	16進数（６桁）
黒	`black`	`0`	`0`	`0`	`#000000`
グレー	`gray` or `grey`	`128`	`128`	`128`	`#808080`
白	`white`	`255`	`255`	`255`	`#ffffff`
赤	`red`	`255`	`0`	`0`	`#ff0000`
黄	`yellow`	`255`	`255`	`0`	`#ffff00`
緑	`lime`	`0`	`255`	`0`	`#00ff00`
シアン	`aqua` or `cyan`	`0`	`255`	`255`	`#00ffff`
青	`blue`	`0`	`0`	`255`	`#0000ff`
マゼンダ	`fuchsia` or `magenta`	`255`	`0`	`255`	`#ff00ff`

16進数（３桁）

#44aa88や#bb7722のように、RGBの（全ての色の）２桁が同じ文字の場合、#4a8や#b72のように３桁に省略することができる。

CSS : tomato


.sample  {
    color:              black;
    background-color:   #4a8;
}

実行結果

sample

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

グレー（灰色）の選び方

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

#000 (0) #111 (17) #222 (34) #333 (51) #444 (68) #555 (85) #666 (102) #777 (119) #888 (136) #999 (153) #aaa (170) #bbb (187) #ccc (204) #ddd (221) #eee (238) #fff (255)

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

`rgb()` で指定

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

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

色	キーワード	赤(R:`red`)	緑(G:`lime`)	青(B:`blue`)
トマト	`tomato`	`255`	`99`	`71`

CSS : tomato


.sample  {
    color:              black;
    background-color:   rgb( 255, 99, 71 );
}

実行結果

sample

`rgba()`

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

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

不透明度	`0`	`0.5`	`1`
出力	完全な透明（見えない）	半透明	完全な不透明

上記トマト色を、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(明度)のことである。

位相	Hue	`0°` ～ `359°`	赤～黄～緑～青～紫
彩度	Saturation	`0%` ～ `100%`	渋い～鮮やか
明度	Lightness	`0%` ～ `100%`	暗い～明るい

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

位相	Hue	`9`
彩度	Saturation	`100%`
明度	Lightness	`64%`

よって、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

リンク

色見本

MDN（日本語） > CSS > color_value

キーワードで指定

透明色（ transparent ）

16進数で指定

16進数（６桁）

16進数（３桁）

グレー（灰色）の選び方

rgb() で指定

rgba()

hsl() で指定

hsla()

リンク

透明色（ `transparent` ）

`rgb()` で指定

`rgba()`

`hsl()` で指定

`hsla()`