RGBについて.....
コンピューターでは光の3原色である赤(R)、緑(G)、青(B)
それぞれの色で0~255までの数値(256段階)で表すことで特定の色を表現します。
したがってフルカラーと呼ばれるものでは256*256*256=16777216色扱えるということになります。
HTMLで、色のスタイルシートの指定方法
個別に文字色を指定する方法について(#ハッシュ)を付けて16進数(HEX)のRGB値で指定します。
font color="#ff00ff"(#ハッシュ)を付けて(HEX)16進数で指定します。
font color="#f0f"3桁での省略も可能です。
表記例:<fontcolor="#ff00ff">あいうえお</font>body{ background-color: white; // 背景色 color: rgb(255,128,128); // 文字色 color: rgb(100%,100%,0%); // yellow color: #333; color: # 996633; }
配色の指定の方法の種類
- HEX(16進数)による指定(3文字での省略も可能)
表記例)color: #ff00ff;表記例)color: #ff0;- 色名による指定。基本16色以外では環境によって、きちんと表示できない場合があります。
表記例)color: green;- 10進数による指定。0から255の値を指定。
表記例) rgb(255,255,255)- パーセンテージによる指定。
表記例) rgb(100%,100%,100%)- currentColor...当該、要素のcolorプロパティ。要素と同じ色が指定されます。
color:currentColor;- transparent...透明を指定します。
color:transparent;
HTMLに直接記述するスタイルシートの指定方法
<span style="color: rgb(0,128,0);">緑</span><span style="color: red;">赤</span><span style="color: #fff;">白</span>CSS3でのHSL色指定
※CSS3から指定可能になりました。hsl(色相環の度数[0-360],彩度[0-100%],輝度[0-100%])で指定できます。
Hue(色相)カラーサークルの色相環の角度で指定。赤(360)、緑(120)、青(240)
Saturation(彩度)色の鮮やかさ。0%(無彩色) ~ 100%(純色)の範囲指定。
Lightness/Luminarce(輝度)色の明るさ。0%(黒) ~ 100%(白)の範囲指定。
- ※表記例 (greenというクラスで指定の例です)
.green {background-color: hsl(120, 50%, 50%);}
rgba css3から指定可能
rgba(0,0,255,1)のような形で指定。3つのrgbの指定をしたあと、alpha(透明度)を指定します。
rgbの指定は#00FF00のような16進数での表記はできません。透明度は0(完全に透明)から1(完全に不透明)の間で指定します。
同じくhslaというのもあります。次の形で指定。
hsla(0,50%,100%,0.5)