CSS法的カラー値

❮前次リファレンス❯

CSSの色

CSSの色は以下の方法で指定することができます。

進色
RGBの各色
RGBA色
HSL色
HSLAの色
事前定義された/クロスブラウザの色の名前

進色

16進数のカラー値は、すべての主要なブラウザでサポートされています。

16進数の色を用いて指定されている：#RRGGBB、RR (red) 、G-G (green)およびBB (blue)進整数は色のコンポーネントを指定します。すべての値は00とFFの間でなければなりません。

青色成分がその最大値に設定されているため、例えば、＃1 0000FF値は、青として表示される(ff)および他のものは00に設定されています。

例

別のHEX色を定義します。

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

»それを自分で試してみてください

RGBの色

RGBカラー値は、すべての主要なブラウザでサポートされています。

：RGBカラー値で指定されrgb(red, green, blue) 。各パラメータ（赤、緑、青）色の強度を定義し、0から255までの整数またはパーセント値であることができる(from 0% to 100%)

例えば、 rgb(0,0,255)の青色のパラメータがその最大値に設定されているため値が青色としてレンダリングされ(255)その他が0に設定されています。

また、以下の値が同じ色を定義： rgb(0,0,255)とrgb(0%,0%,100%)

例

異なるRGBカラーを定義します。

#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */

»それを自分で試してみてください

RGBA色

RGBAカラー値は、IE9 +、Firefox 3以上、クロム、サファリ、とOpera 10+でサポートされています。

RGBAカラー値は、アルファチャネルを有するRGBカラー値の拡張である - オブジェクトの不透明度を指定します。

：RGBA色値で指定されるrgba(red, green, blue, alpha) 。アルファパラメータが0.0の間の数である(fully transparent)から1.0 (fully opaque) 。

例

不透明度が異なるRGBカラーを定義します。

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

»それを自分で試してみてください

HSL色

HSLカラー値は、IE9 +、Firefoxの、クロム、サファリ、およびオペラ10+でサポートされています。

HSLは、色相、彩度、明度の略 - と色の円筒座標表現を表します。

：HSLカラー値を用いて指定されたhsl(hue, saturation, lightness) 。

色相は、カラーホイール上の度合いである(from 0 to 360) 0 - (or 360)赤で、120は緑色で、240は青です。彩度は、パーセント値です。 0％はグレーの陰影を意味し、100％がフルカラーです。明度もパーセンテージです。 0％から100％が白、黒です。

例

別のHSLカラーを定義します。

#p1 {background-color: hsl(120, 100%, 50%);}   /* green */
#p2 {background-color: hsl(120, 100%, 75%);}   /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}   /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}    /* pastel green */

»それを自分で試してみてください

HSLAの色

HSLAカラー値は、IE9 +、Firefox 3以上、クロム、サファリ、とOpera 10+でサポートされています。

オブジェクトの不透明度を指定する - HSLAカラー値は、アルファチャンネル付きHSLカラー値の拡張です。

：HSLAの色の値がで指定されているhsla(hue, saturation, lightness, alpha)のアルファパラメータは不透明度を定義し、。アルファパラメータが0.0の間の数である(fully transparent)から1.0 (fully opaque) 。

例

不透明度と異なるHSL色を定義します。

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */

»それを自分で試してみてください