<color>

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

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

このようなキーワードの完全なリストはこちらにあります。

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

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

hsl() または hsla(): hsl[a](H, S, L[, A]) または hsl[a](H S L[ / A])

H （色相）は色相環の角度 (<angle>) を CSS 色 で定義されている deg、 rad、 grad、 turn の単位で与えます。単位のない数値 (<number>) の場合は、 CSS Color Level 3 で定められている通り deg (度) として扱われます。定義では、赤=0deg=360deg であり、他の色は、緑=120deg、 青=240deg、 などのように色相環を回ります。 <angle> は暗黙的に周回するので、 -120deg=240deg、 480deg=120deg、 -1turn=1turn のようになります。

S （彩度）と L （明度）はパーセント値です。彩度 100% は完全に鮮やかな色で、彩度0%は完全に色彩がない色（無彩色）です。明度100%は白で、明度0%は黒で、明度50%は「普通」です。

A （アルファ）は 0 と 1 の間の<number>、または <percentage> で、数値 1 が100% （不透明）です。

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> の値は赤、緑、青の成分ごとに補間 (en-US)されます。それぞれの成分は浮動小数点の実数として補間されます。なお、予期しない灰色が現れるのを避けるため、色の補間はアルファ乗算済み sRGBA 色空間で行われます。アニメーションでは補間の速度はアニメーションと関連づけられたタイミング関数によって決められます。

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

<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()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | 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 ] ]? )  

<alpha-value> = 
  <number>      |
  <percentage>  

<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 プロパティは要素レベルで色の透明度を定義できます。
• このデータ型を使用するよく使われるプロパティ: color, background-color, border-color, box-shadow, outline-color, text-shadow
• CSS を使った HTML の要素への色の適用