<color>

<color> データ型は以下のいずれか 1 つの方法を使って指定されます。

色名は大文字と小文字の区別をしない識別子で、特定の色を表します。例えば red, blue, black, lightseagreen といったものです。色名は多少なりとそれぞれの色を説明していますが、ほとんどは基本的に人工的であり、名前の仕様について強い根拠はありません。

このようなキーワードの完全なリストは <named-color> ページにあります。

currentcolor キーワードは、要素の color プロパティの値を表します。これで color の値をプロパティが既定で受け取らなくても利用することができます。

currentcolor が color プロパティの値として使用された場合、 color プロパティが継承した値が使用されます。

<div style="color: blue; border: 1px dashed currentcolor;">
  この文字列の色は青です。
  <div style="background: currentcolor; height:9px;"></div>
  このブロックは青い境界線で囲まれています。
</div>

RGB 色モデルは赤、緑、青の成分によって指定されたsRGB 色空間内の色を定義します。アルファ成分は任意で、色の透過性を表します。

RGB 色は 16 進表記（# の接頭辞つき）と関数記法 (rgb(), rgba()) の両方で表現することができます。

16 進記法: #RGB[A] または #RRGGBB[AA]

R（赤）、G（緑）、B（青）と A（アルファ） は 16 進数の文字 (0–9, A–F) です。A は任意です。例えば、#ff0000 は #ff0000ff と同等です。 3 桁記法 (#RGB) は 6 桁形式 (#RRGGBB) を短縮したものです。例えば、#f09 は #ff0099 と同じ色です。同様に、4 桁の RGB 記法 (#RGBA) は 8 桁形式 (#RRGGBBAA) を短縮したものです。例えば、#0f38 は #00ff3388 と同じ色です。

rgb()（または古い rgba()）: rgb(R G B[ / A]) （または rgb[a](R, G, B[, A])）

R（赤）、G（緑）、B（青）は <number> または <percentage> のどちらかで、255 が 100% に対応します。 A（アルファ） は 0 と 1 の間の <number> 、または <percentage> で、数値 1 が 100%（不透明）です。

HSL 色モデルは色相 (H)、彩度 (S)、明度 (L) の各成分によって与えられた sRGB 色空間内の色を定義します。アルファ成分は任意で、色の透過性を表します。

hsl(): hsl(H S L [ / A])（または古い hsl(H, S, L [, A])）

H は色相で、色相環の角度 (<angle>) を deg、 rad、 grad、 turn の単位で取ります。定義上は、赤は 0deg、黄色は 60deg、緑は 120deg、青は 240deg、マゼンタは 300deg となります。単位のない <number> として書かれた場合、角度として解釈されます。S は彩度で <percentage> 値で表し、100% は完全に鮮やかな色で、0% は完全な無彩色（灰色）です。L は明度で <percentage> 値で表し、100% は白、0% は黒、50% は「普通」です。オプションの A はアルファ透過性で <percentage> 値または 0 と 1 の間の <number> で表し、数値 1 または 100% が完全に不透明、0 または 0% が完全に透過を表します。

HSL は、色相、彩度、明度をそれぞれ独立して調整できるため、RGB よりも直感的であると感じるデザイナーが多いようです。また、HSL を使用することで、同じ色のセットを簡単に作成することができます （同じ色相で複数の影を作成する場合など）。 しかし、HSL を使用して色のバリエーションを作成すると、知覚的に均一ではないため、驚くような結果になることがあります。たとえば、 hsl(240 100% 50%) と hsl(60 100% 50%) は、明度が同じであるにもかかわらず、前者が後者よりもはるかに暗くなります。

HSL 色は関数記法の hsl() を通して表現されます。

HSL 色モデルと同様に、 HWB 色モデルは sRGB 色空間の指定された色を、その色相、白色度、黒色度成分によって定義します。

HSL と同様に、 HWB は RGB よりも直感的に使用することができます。色相は同じように指定され，以下，白色度と黒色度がそれぞれパーセント値で続きます。この関数では、アルファ値も受け入れられます。

HWB 色は、関数 hwb() 記法で表現されます。

hwb(): hwb(H W B[ / A])

HSL と同じです。 H （色相）は、CSS Color 仕様で deg, rad, grad, turn で指定された色相環の <angle> です。単位を持たない <number> として書かれた場合は、 CSS Color Level 3 仕様で指定されているように、度数として解釈されます。定義上、 赤=0deg=360deg で、他の色は円周上に広がるので、緑=120deg、青=240deg などとなります。 <angle> としては、-120deg=240deg, 480deg=120deg, -1turn=1turn などのように暗黙のうちに回り込みます。

W （白さ）と B （黒さ）はパーセント値です。この 2 つの色は混合するので、黒という色を作るには、白さ 0%、黒さ 100% が必要です。逆に、白を表現するには、白さ 100%、黒さ 0% が必要です。どちらの値も 50% にすると中間色の灰色になり、他にも指定した色相の濃淡が現れます。

A （アルファ値、オプション）は、 0 から 1 までの <number>、または <percentage> で、数値 1 は 100% （完全な不透明）に対応します。アルファ値を指定するときは、その前にスラッシュ (/) を付けなければなりません。

色強制モード （forced-colors メディアクエリーで検出可能）では、多くの色がユーザーまたはブラウザーが定義したパレットに制約されます。これらのシステム色は以下のキーワードで公開されており、ページの残りの部分が制限されたパレットにうまく合わせられることを保証するために使用することができます。これらの値は他のコンテキストでも使用できますが、ブラウザーの対応は限定的です。

CSS Color Module Level 4 仕様書で定義されているキーワードは、 AccentColor, AccentColorText, ActiveText, ButtonBorder, ButtonFace, ButtonText, Canvas, CanvasText, Field, FieldText, GrayText, Highlight, HighlightText, LinkText, Mark, MarkText, SelectedItem, SelectedItemText, VisitedText です。

CSS Color 4 で Lab 色が導入されました。 Lab 色は、lab() 関数記法で指定します。 Lab 色は、特定の色空間に限定されず、人間の視覚の全領域を表現することができます。

CSS Color 4 で LCH 色が導入されました。 LCH 色は、lch() という関数記法で指定します。 特定の色空間に限定されず、人間の視覚の全領域を表現することができます。

実は、LCH は Lab の極致です。彩度と色相の構成要素が、混合ではなく、目的の色の質を指定する点で、Lab よりも人間に優しいものです。 この点では HSL と似ていますが、知覚的な均一性ははるかに高いと言えます。 HSL が hsl(60 100% 50%) と hsl(240 100% 50%) の両方を同じ明るさと表現するのに対し、LCH (および Lab) は、前者 (黄) の L は 97.6、後者 (青) の L は 29.6 と、それぞれ異なる明るさを正しく表現します。 そのため、LCH を使ってまったく異なる色のパレットを作成しても、予測可能な結果になります。 なお、LCH の色相は HSL の色相とは異なり、LCH の彩度は HSL の彩度とは異なりますが、概念的には類似していますのでご注意ください。

CSS Color 4 でこの表記が導入されました。 color() 関数で指定された色は、定義済みの色空間のほか、@color-profile ルールで定義されたカスタム色空間でも色を指定できます。

アニメーションやグラデーションにおいて、 <color> の値は赤、緑、青の成分ごとに補間されます。既定では、アニメーションは RGBA 色空間で行われ、CSS のトランジションやアニメーションではタイミング関数で補間の速度が決定されます。予期せぬ色が現れるのを防ぐために、color-mix() 関数記法を使用することを検討してください。

色相角を受け入れる関数で 2 色の <hue> (en-US) を補間することも可能です。詳しくは color-mix() 関数記法の記事で記述されています。

色を見分けることが難しい人がいます。WCAG 2.0 (en-US) 勧告では、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは色と色のコントラスト (en-US)をご覧ください。

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color> (en-US)         

<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent                

<absolute-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( <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>   

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

この例では、<div> とテキスト入力を用意しています。入力欄に有効な色を入力すると、<div> にその色が採用され、色の値をテストすることができます。

HTML

<div></div>
<hr />
<label for="color">有効な色の値を入力してください:</label>
<input type="text" id="color" />

CSS

div {
  width: 100%;
  height: 200px;
}

const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "") {
    return false;
  }
  if (stringToTest === "inherit") {
    return false;
  }
  if (stringToTest === "transparent") {
    return false;
  }

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") {
    return true;
  }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener("change", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.style.backgroundColor = "white";
    divElem.textContent = "Invalid color value";
  }
});

結果

この例は、一つの色を RGB 色構文で生成することができる様々な方法を示しています。

/* これらの様々な構文は、すべて同じ色、不透明な濃いピンク色を指定します。 */

/* 16進表記 */
#f09
#F09
#ff0099
#FF0099

/* 関数記法 */
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* ERROR! 数値とパーセントを混ぜないでください */
rgb(255 0 153)

/* アルファ値付き16進表記 */
#f09f
#F09F
#ff0099ff
#FF0099FF

/* アルファ値付き関数記法 */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, .5)
rgb(255, 0, 153, 0.5)
rgb(255, 0, 153, 100%)

/* 空白区切りの構文 */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* 浮動小数点値による実数表記 */
rgb(255, 0, 153.6, 1)
rgb(2.55e2, 0e0, 1.53e2, 1e2%)

• opacity プロパティは要素レベルで色の透明度を定義できます。
• <hue> (en-US) データ型は色を色相閣で表します。
• このデータ型を使用するよく使われるプロパティ: color, background-color, border-color, box-shadow, outline-color, text-shadow
• CSS を使った HTML の要素への色の適用
• New functions, gradients, and hues in CSS colors (Level 4) on MDN blog (May 3, 2023)