May 1st,2022
CSSの色
＃
““<color>”値”とは？
“color”プロパティや“background-color”プロパティ、“border-color”プロパティなどの値として使用される“<color>”値は色を表します。
div {
color: rgb(50 60 70); /* ■ */
background-color: #e6eae3; /* ■ */
border-color: darkslategray; /* ■ */
}
“<color>”値として使用できる値にはあらかじめ定義されたキーワードであるカラーネーム(“<named-color>”値)、sRGBの色成分で色を表す16進数カラー(“<hex-color>”値)や“rgb()”関数、より直感的に色を表現することができる“hsl()”関数などが定義されており、様々な方法で色を表現することができます。
カラーネーム
color: mediumvioletred; /* ■ */
16進数カラー
color: #c71585; /* ■ */
RGBカラー
color: rgb(199 21 133); /* ■ */
HSLカラー
color: hsl(322 81% 43%); /* ■ */
HWBカラー
color: hwb(322 8% 22%); /* ■ */
＃
“<color>”値の一覧
“<absolute-color-base>”値
| データ型 | 説明 |
|---|---|
| <hex-color> | 16進数カラーコードで色を表す |
| <named-color> | 定義済みのカラー・ネームで色を表す |
transparent |
黒色透明を表す |
| rgb() | 赤、緑、青の色成分で色を表す |
| rgba() |
赤、緑、青の色成分とアルファ値で色を表す |
| hsl() |
色相、彩度、明度で色を表す |
| hsla() |
色相、彩度、明度、アルファ値で色を表す |
hwb() |
色相、白色度、黒色度で色を表す |
| lab() |
|
| lch() |
|
| oklab() |
|
| oklch() |
|
| color() |
他の“<color>”値
| データ型 | 説明 |
|---|---|
| currentcolor |
“color”プロパティの値を使用する |
| <system-color> | システムカラーを使用する |
| device-cmyk() |
＃
＃
＃
＃
“transparent”
“transparent”は透明の黒色(“rgb(0 0 0 / 0%)”)を表します。
“transparent”は仕様書では独立した項で定義されていますが、“<named-color>”値の一種です。
