目次
CSSの色について
- CSSで色を指定する場合は、カラーキーワード、16進数、関数、のいずれかの方法で指定することが可能です。
16進数書式
16進数書式
p {
color: #ff0000;
}
-
16進数書式は、CSSの色をRGBの各値を16進数で指定する書式です。
- RGBとは、red(赤)、green(緑)、blue(青)、の頭文字です。
- RGBでは、赤緑青の三原色を使ってさまざまな色を表現することができます。
- 16進数のアルファベット部分は、大文字でも小文字でもどちらでも構いません。
16進数書式の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: #ff0000;
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>
表示結果
カラーキーワード書式
カラーキーワード書式
p {
color: red;
}
- カラーキーワード書式は、CSSの色をカラーキーワードで指定する書式です。
- カラーキーワードは、英語の色の名前です。
- CSSで定義されているカラーキーワードの一覧はカラーキーワードを参照して下さい。。
カラーキーワード書式の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>
表示結果
transparent
transparent
p {
color: transparent;
}
- transparentは、透明色を表すキーワードです。
transparentの使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: transparent;
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>
表示結果
currentcolor
currentcolor
p {
background-color: currentcolor;
}
- currentcolorは、同じ要素のcolorプロパティの値を表すキーワードです。
currentcolorの使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
background-color: currentcolor;
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>
表示結果
関数書式
- 関数書式は、CSSの色を関数で指定する書式です。
- 以下、利用できる関数について説明します。
rgb関数
rgb関数
p {
color: rgb(255, 0, 0);
}
- rgb関数を利用すると、RGBの各値を10進数で指定することができます。
-
例えば、R値を「100」、G値を「50」、B値を「200」、で指定する場合は以下のように記述します。
- 各値の前後には、空白文字を入れることもできます。
- 各値の間には、「,(カンマ)」を入れます。
rgb関数の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: rgb(100, 50, 200);
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>
表示結果
rgba関数
rgba関数
p {
color: rgba(255, 0, 0, 0.5);
}
- rgba関数を利用すると、RGBの各値に加えalpha(不透明度)を指定することができます。
- alpha値は、0.0〜1.0までの数値(整数でも小数でも可)で指定し、0.0が完全な透明で1.0が完全な不透明になります。
- 例えば、R値を「100」、G値を「50」、B値を「200」、alpha値を「0.5」、で指定する場合は以下のように記述します。
rgba関数の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: rgba(100, 50, 200, 0.5);
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>
表示結果
hsl関数
hsl関数
p {
hsl(0, 100%, 50%);
}
-
hsl関数を利用すると、色度、彩度、明度、の値で色を指定することができます。
- hslとは、hue(色相)、saturation(彩度)、lightness(明度)、の頭文字をとった単語です。

-
1番目の数値(引数)は、色度(色相環に基づく色味)を表します。
- 単位は「°(度)」で、360°で色相環を1周します。
- 赤は0°、緑は120°、青は240°と定められています。
- 記述する際は、単位の「°」を記述する必要はありません。
-
2番目の数値(引数)は、彩度(色の鮮やかさ)を表します。
- 単位は「%(パーセント)」です。
- 数値が0%に近づくほど、くすんだ色になります。
-
3番目の数値(引数)は、明度(色の明るさ)を表します。
- 単位は「%(パーセント)」です。
- 数値が0%に近づくほど黒くなっていき、100%に近づくほど白くなっていきます。
-
例えば、hue値を「0°」、saturation値を「100%」、lightness値を「50%」、で指定する場合は以下のように記述します。
- 各値の前後には、空白文字を入れることもできます。
- 各値の間には、「,(カンマ)」を入れます。
hsl関数の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: hsl(0, 100%, 50%);
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>
表示結果
hsla関数
hsla関数
p {
hsla(0, 100%, 50%, 0.5);
}
- hsla関数を利用すると、HSLの各値に加えalpha(不透明度)を指定することができます。
- alpha値は、0.0〜1.0までの数値(整数でも小数でも可)で指定し、0.0が完全な透明で1.0が完全な不透明になります。
- 例えば、hue値を「0°」、saturation値を「100%」、lightness値を「50%」、alpha値を「0.5」、で指定する場合は以下のように記述します。
hsla関数の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: hsla(0, 100%, 50%, 0.5);
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>
表示結果
hwb関数
hwb関数
p {
hwb(0, 5%, 10%, 0.5);
}
-
hwb関数を利用すると、色度、白味、黒味、不透明度、の値で色を指定することができます。
- hwbとは、hue(色相)、whiteness(白味)、blackness(黒味)、の頭文字をとった単語です。
-
1番目の数値(引数)は、色度(色相環に基づく色味)を表します。
- 単位は「°(度)」で、360°で色相環を1周します。
- 赤は0°、緑は120°、青は240°と定められています。
- 記述する際は、単位の「°」を記述する必要はありません。
-
2番目の数値(引数)は、白味の度合いを表します。
- 単位は「%(パーセント)」です。
-
3番目の数値(引数)は、黒味の度合いを表します。
- 単位は「%(パーセント)」です。
-
4番目の数値(引数)は、透明度を表します。省略可。
- 0.0〜1.0までの数値(整数でも小数でも可)で指定し、0.0が完全な透明で1.0が完全な不透明になります。
- hwb関数は、hsl関数と似ていますが、人にとって直感的で使いやすい場合が多いです。
-
例えば、hue値を「0°」、whiteness値を「5%」、blackness値を「10%」alpha値を「0.5」、で指定する場合は以下のように記述します。
- 各値の前後には、空白文字を入れることもできます。
- 各値の間には、「,(カンマ)」を入れます。
hwb関数の使用例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
p {
color: hwb(0, 5%, 10%, 0.5);
}
</style>
</head>
<body>
<p>本文</p>
</body>
</html>
表示結果