40 色の指定
CSSでは,色名,RGB,HSL,HEXなどの方法で色を指定できます.
40.1 色名
代表的な色名として,Tomato,Orange,Gray,Black,Whiteなどがあります.
HTML/CSSでは,140種類の色名が定義されています.
以下は,色名を使用して色を指定する例です.
/* style.css */
h1 {
background-color: Tomato;
color: White;
}
p {
background-color: gray;
color: white;
}40.2 RGB
rgb(red, green, blue)関数を使用して,red,green,blueの値を指定することによって色を指定できます.各値は0から255の範囲で指定します.
以下は,RGBを使用して色を指定する例です.
| Color | RGB |
|---|---|
| Red | rgb(255, 0, 0) |
| Green | rgb(0, 255, 0) |
| Blue | rgb(0, 0, 255) |
| Black | rgb(0, 0, 0) |
| White | rgb(255, 255, 255) |
RGB Calculatorを使って,色を調整してください.
以下は,RGBを使用して色を指定する例です.
/* style.css */
h1 {
background-color: rgb(0, 191, 255);
color: rgb(255, 255, 255);
}
p {
background-color: rgb(128, 128, 128);
color: rgb(255, 255, 255);
}40.3 HEX
#RRGGBB形式で色を指定することもできます.RR,GG,BBはそれぞれ赤,緑,青の値を00からFFの16進数で表現します.
以下は,HEXを使用して色を指定する例です.
| Color | HEX |
|---|---|
| Red | #FF0000 |
| Green | #00FF00 |
| Blue | #0000FF |
| Black | #000000 |
| White | #FFFFFF |
以下は,HEXを使用して色を指定する例です.
/* style.css */
.DIC161 {
color: #FF710A;
}
.PANTONE280 {
color: #223A76;
}<h1>法政大学のスクールカラー</h1>
<p>法政大学のスクールカラーは、<span class="DIC161">オレンジ</span>と<span class="PANTONE280">紺(法政ブルー)</span>です。</p>