CSSの合法色値
- 前のページ CSS カラー
- 次のページ CSS デフォルト値
CSS カラー
CSSでの色は以下の方法で指定できます：
- 十六進数色
- 透明度のある十六進数色
- RGB色
- RGBA 頂点
- HSL 頂点
- HSLA 颜色
- 预定义/跨浏览器的颜色名称
- を使用して
currentcolorキーワード
十六進数色
十六進数色を#RRGGBBで指定します。RR（赤）、GG（緑）、BB（青）の十六進数整数は色成分（成分）を指定します。すべての値は00からFFの間でなければなりません。
例えば、＃0000ffの値は青色に表示されます。なぜなら、青色成分が最高値（ff）に設定され、他の成分が00に設定されているからです。
实例
異なるHEX色を定義します：
#p1 {background-color: #ff0000;} /* 赤色 */
#p2 {background-color: #00ff00;} /* 緑色 */
#p3 {background-color: #0000ff;} /* 青色 */
透明度のある十六進数色
十六進数色を#RRGGBBで指定します。透明度を増やす場合は、00とFFの間に2つの追加の数字を追加します。
实例
透明度のあるHEX色を定義します：
#p1a {background-color: #ff000080;} /* 透明度のある赤色 */
#p2a {background-color: #00ff0080;} /* 透明度のある緑色 */
#p3a {background-color: #0000ff80;} /* 透明度のある青色 */
RGB色
RGB色値は rgb()関数指定する場合、以下の文法が適用されます：
rgb(red, 緑, blue)
各パラメータ（red, 緑, blue色の強度を定義します。0から255までの整数または百分比值（0％から100％まで）ができます。
例えば、値rgb(0,0,255)は青色に表示されます。なぜなら、blueパラメータが最高値（255）に設定され、他のパラメータが0に設定されているからです。
また、以下の値は同じ色を定義します：rgb(0,0,255) と rgb(0%,0%,100%)。
实例
異なる RGB 頂点を定義します：
#p1 {background-color: rgb(255, 0, 0);} /* 赤色 */
#p2 {background-color: rgb(0, 255, 0);} /* 緑色 */
#p3 {background-color: rgb(0, 0, 255);} /* 青色 */
RGBA 頂点
RGBA 頂点値は RGB 頂点値の拡張で、アルファチャンネルを持ち、オブジェクトの不透明度を指定します。
RGBA 頂点は rgba() 関数指定する場合、以下の文法が適用されます：
rgba(red, 緑, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
实例
透明度のある異なる RGB 頂点を定義します：
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* 透明度のある赤 */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* 透明度のある緑 */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* 透明度のある青 */
HSL 頂点
HSLとは色相（hue）、彩度（saturation）、明度（lightness）を指し、色の円筒座標表示を表現しています。
を使用して hsl() 関数HSL 頂点値を指定する場合、この関数の文法は以下の通りです：
hsl(hue, saturation, lightness)
色相は色環の度数（0から360）です；0（または360）は赤で、120は緑、240は青です。
彩度もパーセントで指定されます；0％はグレーの影で、100％はフルカラーです。
明度もパーセントで指定されます；0％は黒で、100％は白です。
实例
異なる HSL 頂点を定義します：
#p1 {background-color: hsl(120, 100%, 50%);} /* 緑色 */
#p2 {background-color: hsl(120, 100%, 75%);} /* 浅緑色 */
#p3 {background-color: hsl(120, 100%, 25%);} /* 深緑色 */
#p4 {background-color: hsl(120, 60%, 70%);} /* 柔和的绿色 */
HSLA 颜色
HSLA 颜色值是 HSL 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。
HSLA 颜色值由 hsla() 函数指定，该函数的语法如下：
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
实例
定义带有不透明度的不同 HSL 颜色：
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* 带不透明度的绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* 带不透明度的浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* 带不透明度的深绿色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* 带不透明度的柔绿色 */
预定义/跨浏览器的颜色名称
HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。
例如：blue、red、coral、brown 等：
实例
定义不同的颜色名：
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
所有预定义名称的列表都可以在我们的 颜色名称参考手册 中找到。
currentcolor 关键字
currentcolor 关键字引用元素的 color 属性值。
实例
以下 <div> 元素的边框颜色将为蓝色，因为 <div> 元素的文本颜色为蓝色：
#myDIV {
color: blue; /* 蓝色文本色 */
border: 10px solid currentcolor; /* 蓝色边框色 */
}
- 前のページ CSS カラー
- 次のページ CSS デフォルト値
