色のチュートリアル
赤、緑、青の光を組み合わせて色が表示されます。
色の名前
CSSでは、色の名前を使用して色を設定できます。
例
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
CSSの色の値
CSSを使用すると、さまざまな方法で色を指定できます。
- 色名で
- RGB値として
- 16進値として
- HSL値として（CSS3）
- HWB値として（CSS4）
- キーワード
currentcolor付き
RGBカラー
RGBカラー値はすべてのブラウザでサポートされています。
RGBカラー値は、rgb（ RED、 GREEN、 BLUE）で指定されます。
各パラメーターは、色の強度を0〜255の整数として定義します。
たとえば、青のパラメータが最大値（255）に設定され、その他のパラメータが0に設定されているため、rgb（0,0,255）は青としてレンダリングされます。
例
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
灰色の色合いは、多くの場合、3つの光源すべてに等しい値を使用して定義されます。
例
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
16進数の色
16進色の値は、すべてのブラウザーでサポートされています。
16進数の色は、次のように指定されます。＃RR GGBB。
RR（赤）、GG（緑）、BB（青）は、色の強度を指定する00からFFまでの16進整数です。
たとえば、青のコンポーネントは最高値（FF）に設定され、他のコンポーネントは00に設定されているため、＃0000FFは青で表示されます。
例
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
灰色の色合いは、多くの場合、3つの光源すべてに等しい値を使用して定義されます。
例
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
大文字または小文字？
大文字または小文字を使用して、16進値を指定できます。
小文字の方が書きやすいです。大文字の方が読みやすいです。
色の名前
CSSは140の標準色名をサポートしています。
次の章では、16進値を持つ色名の完全なアルファベット順のリストを示します。
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
currentcolorキーワード
currentcolorキーワードは、要素のcolorプロパティの値を参照します。
例
<div>要素のテキストの色が青であるため、次の<div>要素の境界線の色は青になります。
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}