色の指定方法

数値による指定

  • rgb( red, green, blue ) または #RGB
  • rgba( red, green, blue, opacity )
  • hsl( hue, saturation, lightness )
  • hsla( hue, saturation, lightness, opacity )

これらの指定方法は、ブラウザによってはサポートされないものもあります。よってブラウザの実装状況を確認したうえで利用すべきです。サポートされないブラウザ、たとえばIE8では色の指定が無視されます。


IE11
IE8

お使いのブラウザでは、次のように表示されます。

  • rgb(0, 0, 255)
  • rgba(0, 0, 255, 0.5)
  • hsl(240, 100%, 50%)
  • hsla(240, 100%, 50%, 0.5)

rgb()

RGBカラーモデルによる指定法には、

  • 関数記法 
    rgb(red, green, blue)
  • 16進記法 
    #RRGGBB

の2つのがあり、同じ色を次のように記述できます。

/* 関数記法 */
color: rgb( 255, 0, 51 );    /* 整数値 */
color: rgb( 100%, 0%, 20% ); /* 割合 */

/* 16進記法 */
color: #f03;    /* 3文字記法 (それぞれの数値が重ねられ、#f03は#ff0033に変換される) */
color: #ff0033; /* 6文字記法 */

関数記法では0～255の整数または0～100%の割合で、16進記法では0～Fまたは00～FFの16進数で指定します。このうち16進の2桁で指定するときにすべての要素を2桁としないと、エラーとなったり#RGBAの形式と誤解されたりします。

指定値 表示例 キーワード
rgb( 0, 0, 0 )
black
rgb( 0, 0, 255 )
blue
rgb( 0, 255, 0 )
lime (greenではない)
rgb( 0, 255, 255 )
aqua (lightblueではない)
rgb( 255, 0, 0 )
red
rgb( 255, 0, 255 )
fuchsia (purpleではない)
rgb( 255, 255, 0 )
yellow
rgb( 255, 255, 255 )
white

rgba()

不透明度を指定する場合は関数記法で、opacityに0～1の小数で指定します。Firefox 49以降とChrome 63以降などでは、#RGBAと#RRGGBBAAの16進記法もサポートされます。

rgba(red, green, blue, opacity)

なお不透明度の指定は、Internet Explorer 9以降でサポートされます。Browser compatibility - <color> - CSS | MDN

指定値 表示例
rgba( 255, 0, 0, 1.0 )
rgba( 255, 0, 0, 0.5 )
rgba( 255, 0, 0, 0.0 )

参考

hsl()

hsl(hue, saturation, lightness)
  • hue (色相) … 0～360
  • saturation (彩度) … 0～100%
  • lightness (輝度) … 0～100%

なおhsl()関数記法は、Internet Explorer 9以降でサポートされます。Browser compatibility - <color> - CSS | MDN

hueのみ変化
指定値 表示例 キーワード
hsl( 0, 100%, 50% )
red
hsl( 60, 100%, 50% )
yellow
hsl( 120, 100%, 50% )
lime
hsl( 180, 100%, 50% )
aqua
hsl( 240, 100%, 50% )
blue
hsl( 300, 100%, 50% )
fuchsia
hsl( 360, 100%, 50% )
red
saturationのみ変化
指定値 表示例
hsl( 0, 0%, 50% )
hsl( 0, 25%, 50% )
hsl( 0, 50%, 50% )
hsl( 0, 75%, 50% )
hsl( 0, 100%, 50% )
lightnessのみ変化
指定値 表示例
hsl( 0, 100%, 0% )
hsl( 0, 100%, 25% )
hsl( 0, 100%, 50% )
hsl( 0, 100%, 75% )
hsl( 0, 100%, 100% )

参考

≫スクリプトによるカラーモデルの変換

名前による指定

キーワード  
transparent transparent - <named-color> - CSS: Cascading Style Sheets | MDN
currentColor currentcolor keyword - <color> - CSS: Cascading Style Sheets | MDN

色キーワード (Color keywords)

color: red;
指定値 表示例 RGB16進
black
#000000
blue
#0000FF
lime
#00FF00
limegreen
#32cd32
green
#008000
aqua
#00FFFF
skyblue
#87CEEB
lightblue
#ADD8E6
red
#FF0000
fuchsia
#FF00FF
purple
#800080
yellow
#FFFF00
white
#FFFFFF
Color keywords - <color> - CSS | MDN

システムカラー (System Colors)

お使いの環境のシステムカラーは、システムカラーの一覧で確認できます。

Webカラー

Webカラーの必要性については、Adobe Dreamweaver * カラーで解説されています。

参考

参考

≫Webデザインにおける色について

HTMLの情報サイトから、まとめて検索