<color>
<color>
は CSS のデータ型で、一つの色を表します。
<color>
はアルファチャネルの透過値を含むことがあり、この色を背景とどれだけ混合するかを示すこともできます。
メモ: <color>
の色は詳細に定義されていますが、出力機器によって(時には著しく)違って見えるかもしれません。出力機器の大半は色補正がされておらず、ブラウザーによっては出力機器の色プロファイルに対応していないからです。
構文
/* 名前付きの色 */
rebeccapurple
aliceblue
/* RGB 16 進値 */
#f09
#ff0099
/* RGB (Red, Green, Blue) */
rgb(255 0 153)
rgb(255 0 153 / 80%)
/* HSL (Hue, Saturation, Lightness) */
hsl(150 30% 60%)
hsl(150 30% 60% / 80%)
/* HWB (Hue, Whiteness, Blackness) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)
/* LAB (Lightness, A-axis, B-axis) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)
/* LCH (Lightness, Chroma, Hue) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)
/* Oklab (Lightness, A-axis, B-axis) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)
/* Oklch (Lightness, Chroma, Hue) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)
/* 相対的な CSS 色 */
/* HSL 色相の変更 */
hsl(from red 240deg s l)
/* HWB アルファチャネルの変更 */
hwb(from green h w b / 0.5)
/* LCH 輝度の変更 */
lch(from blue calc(l + 20) c h)
/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))
<color>
は以下の何れかの方法で定義することができます。
- キーワード:
<named-color>
(blue
やpink
など)、<system-color>
、currentcolor
- 16 進記法:
<hex-color>
(#ff0000
など) <color-function>
として、色空間の引数を関数記法を使用して:- 相対色の構文を用いると、既存の色に基づく新しい色を出力することができます。上記の色関数はいずれも、原色の前に
from
キーワードが先行し、その後に新しい出力色のためのチャンネル値の定義を続けることができます。 - 2 色の混合:
color-mix()
- 2 つの色の指定。 1 つ目の色は明るいカラースキームに、 2 つ目は暗いカラースキームに使用:
light-dark()
currentcolor キーワード
currentcolor
キーワードは、要素の color
プロパティの値を表します。これで color
の値をプロパティが既定で受け取らなくても利用することができます。
currentcolor
が color
プロパティの値として使用された場合、 color
プロパティが継承した値が使用されます。
<div style="color: blue; border: 1px dashed currentcolor;">
この文字列の色は青です。
<div style="background: currentcolor; height:9px;"></div>
このブロックは青い境界線で囲まれています。
</div>
色成分の欠落
CSS 色関数の各成分(古いカンマ区切り文字を使用するものを除く)は、キーワード none
を指定することで、欠落成分として指定することができます。
色補間における欠落成分を明示的に指定することは、一部の色成分は補間したいが他の色成分は補間したくないという用途に有益です。ほかはすべて、欠落した成分は適切な単位で値がゼロになります(0
、0%
、0deg
など)。例えば、次の例は補間以外で使用しても等価な色です。
/* これらは等価 */
color: oklab(50% none -0.25);
color: oklab(50% 0 -0.25);
/* これらは等価 */
background-color: hsl(none 100% 50%);
background-color: hsl(0deg 100% 50%);
補間
成分が欠落した補間
同じ色空間での色の補間
補間色空間内に正確に収まる色を補間するときは、一方の色から欠落している部品は、他の色から持っ ている同じ成分の値に置き換えられます。 例えば、 次の 2 つの表現は等価です。
color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30))
color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30))
メモ: 両方の色から成分が欠落している場合、この成分は補間後に欠落します。
異なる色空間からの色の補間: 類似成分
補間される色が補間色空間にない場合は、以下の表に記述されているように、同じカテゴリーの類似成分に基づいて、その欠落した成分が変換後の色に変換されます。
カテゴリー | 類似成分 |
---|---|
赤 | R , X |
緑 | G , Y |
青 | B , Z |
明度 | L |
彩度 | C , S |
色相 | H |
a | a |
b | b |
例
color(xyz 0.2 0.1 0.6)
におけるX
(0.2
) はrgb(50% 70% 30%)
におけるR
(50%
) の類似です。hsl(0deg 100% 80%)
におけるH
(0deg
) はoklch(80% 0.1 140)
におけるH
(140
) の類似です。
補間色空間として Oklch を使用し、下記の 2 色を例とします。
lch(80% 30 none)
color(display-p3 0.7 0.5 none)
前処理の手順は次の通りです。
-
両方の色で欠けている成分をゼロ値で置き換えます。
csslch(80% 30 0) color(display-p3 0.7 0.5 0)
-
両方の色を補間色空間に変換します。
cssoklch(83.915% 0.0902 0.28) oklch(63.612% 0.1522 78.748)
-
変換された色の成分が、対応する元の色の欠落した成分と類似している場合は、欠落した成分としてリセットします。
cssoklch(83.915% 0.0902 none) oklch(63.612% 0.1522 78.748)
-
欠落している部品は、他の変換された色の同じ部品で置き換えます。
cssoklch(83.915% 0.0902 78.748) oklch(63.612% 0.1522 78.748)
アクセシビリティの考慮
色を見分けることが難しい人がいます。 WCAG 2.2 勧告では、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは色と色のコントラストをご覧ください。
形式文法
<color> =
<color-base> |
currentColor |
<system-color>
<color-base> =
<hex-color> |
<color-function> |
<named-color> |
transparent
<color-function> =
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>
<rgb()> =
<legacy-rgb-syntax> |
<modern-rgb-syntax>
<rgba()> =
<legacy-rgba-syntax> |
<modern-rgba-syntax>
<hsl()> =
<legacy-hsl-syntax> |
<modern-hsl-syntax>
<hsla()> =
<legacy-hsla-syntax> |
<modern-hsla-syntax>
<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> =
color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<legacy-rgb-syntax> =
rgb( <percentage>#{3} , <alpha-value>? ) |
rgb( <number>#{3} , <alpha-value>? )
<modern-rgb-syntax> =
rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<legacy-rgba-syntax> =
rgba( <percentage>#{3} , <alpha-value>? ) |
rgba( <number>#{3} , <alpha-value>? )
<modern-rgba-syntax> =
rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<legacy-hsl-syntax> =
hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )
<modern-hsl-syntax> =
hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<legacy-hsla-syntax> =
hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )
<modern-hsla-syntax> =
hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<hue> =
<number> |
<angle>
<alpha-value> =
<number> |
<percentage>
<colorspace-params> =
<custom-params> |
<predefined-rgb-params> |
<predefined-polar-params> |
<predefined-rectangular-params> |
<xyz-params>
<custom-params> =
<dashed-ident> [ <number> | <percentage> | none ]+
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<predefined-polar-params> =
jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none ]
<predefined-rectangular-params> =
<predefined-rectangular> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz> [ <number> | <percentage> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
rec2100-pq |
rec2100-hlg |
rec2100-linear
<predefined-rectangular> =
jzazbz |
ictcp
<xyz> =
xyz |
xyz-d50 |
xyz-d65
例
色の値のテスター
この例では、 <div>
とテキスト入力を用意しています。入力欄に有効な色を入力すると、 <div>
にその色が採用され、色の値をテストすることができます。
HTML
<div></div>
<hr />
<label for="color">有効な色の値を入力してください:</label>
<input type="text" id="color" />
結果
彩度最高の色
この例では、 sRGB 色空間で彩度が最高の sRGB 色を表示させています。
HTML
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
CSS
div:nth-child(1) {
background-color: hsl(0 100% 50%);
}
div:nth-child(2) {
background-color: hsl(30 100% 50%);
}
div:nth-child(3) {
background-color: hsl(60 100% 50%);
}
div:nth-child(4) {
background-color: hsl(90 100% 50%);
}
div:nth-child(5) {
background-color: hsl(120 100% 50%);
}
div:nth-child(6) {
background-color: hsl(150 100% 50%);
}
div:nth-child(7) {
background-color: hsl(180 100% 50%);
}
div:nth-child(8) {
background-color: hsl(210 100% 50%);
}
div:nth-child(9) {
background-color: hsl(240 100% 50%);
}
div:nth-child(10) {
background-color: hsl(270 100% 50%);
}
div:nth-child(11) {
background-color: hsl(300 100% 50%);
}
div:nth-child(12) {
background-color: hsl(330 100% 50%);
}
結果
さまざまな明度の赤
この例では、 sRGB 色空間で様々な明度の赤を表示しています。
HTML
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
CSS
div:nth-child(1) {
background-color: hsl(0 100% 0%);
}
div:nth-child(2) {
background-color: hsl(0 100% 20%);
}
div:nth-child(3) {
background-color: hsl(0 100% 40%);
}
div:nth-child(4) {
background-color: hsl(0 100% 60%);
}
div:nth-child(5) {
background-color: hsl(0 100% 80%);
}
div:nth-child(6) {
background-color: hsl(0 100% 100%);
border: solid;
}
結果
様々な彩度の赤
この例では、 sRGB 色空間でさまざまな彩度の赤を表示させています。
HTML
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
CSS
div:nth-child(1) {
background-color: hsl(0 0% 50%);
}
div:nth-child(2) {
background-color: hsl(0 20% 50%);
}
div:nth-child(3) {
background-color: hsl(0 40% 50%);
}
div:nth-child(4) {
background-color: hsl(0 60% 50%);
}
div:nth-child(5) {
background-color: hsl(0 80% 50%);
}
div:nth-child(6) {
background-color: hsl(0 100% 50%);
}
結果
仕様書
Specification |
---|
CSS Color Module Level 4 # color-syntax |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
opacity
プロパティは要素レベルで色の透明度を定義できます。<hue>
データ型は色を色相関で表します。- このデータ型を使用するよく使われるプロパティ:
color
,background-color
,border-color
,box-shadow
,outline-color
,text-shadow
- CSS を使った HTML の要素への色の適用
- New functions, gradients, and hues in CSS colors (Level 4) (MDN blog, 2023)