<color>

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

Note: <color> の色は詳細に定義されていますが、出力機器によって (時には著しく) 違って見えるかもしれません。出力機器の大半は色補正がされておらず、ブラウザーによっては出力機器の色プロファイルに対応していないからです。

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

キーワードを使うとき、考慮すべき点がいくつかあります。

• HTML は CSS1 に見られる基本 16 色のみを解釈し、解釈できない値を (ふつう完全に違う色に) 変換する際は特定のアルゴリズムを使用します。その他の色キーワードは CSS および SVG のみで使用してください。
• HTML とは異なり、 CSS では未知のキーワードは完全に無視されます。
• CSS のキーワード定義された色はどれも透明度を持たず、完全に不透明な色です。
• 同じ色を表すキーワードがいくつかあります。
  • aqua / cyan
  • fuchsia / magenta
  • darkgray / darkgrey
  • darkslategray / darkslategrey
  • dimgray / dimgrey
  • lightgray / lightgrey
  • lightslategray / lightslategrey
  • gray / grey
  • slategray / slategrey
• キーワードは X11 の色名からとられたものですが、メーカーが X11 の色を特定のハードウェアに合わせて変えていることがあるので、 RGB 値は X11 システムでの色とは異なる可能性があります。

Note: 利用可能なキーワードの一覧は、様々な CSS の仕様書によって異なります。

• CSS Level 1 では基本的な 16 色だけを受け付けていました。これは VGA 色と呼ばれ、VGA グラフィックカードで表示可能な色です。
• CSS Level 2 では orange キーワードが追加されました。
• 初期のブラウザーでは仕様にない様々な色 (主に X11 色リストからの転用) に対応していましたが、正式に定義されたのは SVG 1.0 と CSS Colors Level 3 からでした。これらはよく拡張色キーワード、X11 色、SVG 色と呼ばれます。
• CSS Colors Level 4 では ウェブのパイオニア、エリック・メイヤーに敬意を表して rebeccapurple のキーワードを追加しました。

transparent は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密には、transparent は rgba(0,0,0,0) のショートカットです。

Note: グラデーションの場合の同様、予期しない動きを避けるために、現在の CSS の仕様書は transparent をアルファ乗算色空間で計算するように定めています。しかし、古いブラウザーはアルファチャンネルが 0 の値である黒として扱うかもしれません。

Note: transparent キーワードは CSS Level 2 (Revision 1) では色ではありませんでした。これは background プロパティと border プロパティの 2 つにおいて、通常の <color> の代わりに使用することができた特殊なキーワードでした。基本的に、継承された色を開発者が上書きすることができるように追加されたものです。 CSS Colors Level 3 でアルファチャンネルが出現し、 transparent は色として再定義されました。 <color> の値を使用することができる場所ならば、どこでも使用することができるようになりました。

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

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

currentcolor の例

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

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

構文

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

Note: CSS Colors Level 4 では、 rgba() は rgb() の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。

16 進表記: #RRGGBB[AA]

R (赤)、 G (緑)、 B (青) と A (アルファ) は 16 進数の文字 (0–9, A–F) です。 A は任意です。例えば、 #ff0000 は #ff0000ff と同等です。

16 進表記: #RGB[A]

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

関数表記: rgb[a](R, G, B[, A])

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

関数表記: rgb[a](R G B[ / A])

CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。

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

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

構文

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

Note: CSS Colors Level 4 では、 hsla() は hsl() の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。

関数表記: hsl[a](H, S, L[, A])

H (色相) は色相環の角度を CSS Color Module Level 4 で定義されている deg、 rad、 grad、 turn の単位で与えます。単位のない数値の場合は、 CSS Color Module 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[a](H S L[ / A])

CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。

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

以下のリストにあるキーワードは、 CSS Color Module Level 4 仕様書で定義されています。

Note: なお、これらのキーワードは大文字小文字を区別しませんが、読みやすさのために大文字小文字を交ぜて表記しています。

ActiveText

アクティブなリンクのテキスト

ButtonBorder

コントロールのベースの境界色

ButtonFace

プッシュボタンの背景

ButtonText

プッシュボタンのテキスト

Canvas

アプリケーションのコンテンツや文書の背景

CanvasText

アプリケーションのコンテンツや文書のテキスト

Field

入力フィールドの背景

FieldText

入力フィールドのテキスト

GrayText

無効なテキスト

Highlight

コントロールの中で選択されているアイテムの背景

HighlightText

コントロールの中で選択されているアイテムのテキスト

LinkText

アクティブではない、訪問していないリンクのテキスト

Mark

(HTML の mark 要素のように) 特別なマークが付けられたテキストの背景

MarkText

(HTML の mark 要素のように) 特別にマークされたテキスト

VisitedText

訪問済みのリンクのテキスト

非推奨のシステム色のキーワード

以下のキーワードは、 CSS Color モジュールの初期の版で定義されていました。これらは非推奨になりました。公開ウェブページでの使用は Deprecated です。

ActiveBorder

アクティブウィンドウの境界線。

ActiveCaption

アクティブウィンドウのキャプション。 CaptionText を前景色として使用してください。

AppWorkspace

複数文書インターフェイス (MDI) の背景色。

Background

デスクトップの背景です。

ButtonHighlight

周囲の境界線の層によって立体的に見える 3D 要素の、光源に面した境界線の色です。

ButtonShadow

周囲の境界線の層によって立体的に見える 3D 要素の、光源から離れた境界線の色です。

CaptionText

キャプションの文字列、サイズ変更ボックス、スクロールバーの矢印ボックスの文字列です。 ActiveCaption を背景色として使用してください。

InactiveBorder

非アクティブウィンドウの境界線です。

InactiveCaption

非アクティブウィンドウのキャプションです。 InactiveCaptionText を前景色に使用してください。

InactiveCaptionText

非アクティブなキャプションの文字列の色です。 InactiveCaption を背景色に使用してください。

InfoBackground

ツールチップコントロールの背景色です。 InfoText を前景色に使用してください。

InfoText

ツールチップコントロールの文字色です。 InfoBackground を背景色に使用してください。

Menu

メニューの背景。 MenuText または -moz-MenuBarText を前景色に使用してください。

MenuText

メニュー内の文字列。 Menu を背景色に使用してください。

Scrollbar

スクロールバーの背景色。

ThreeDDarkShadow

連続した 2 つの境界線によって立体的に見える 3D 要素の、光源から離れた 2 つの境界線のうち、暗い方 (一般的には外側) の境界線の色。

ThreeDFace

連続した 2 つの境界線によって立体的に見える 3D 要素の表面の色。前景色には ButtonText を使用してください。

ThreeDHighlight

連続した 2 つの境界線によって立体的に見える 3D 要素の、光源に向いた 2 つの境界線のうち、明るい方 (一般的には外側) の色。

ThreeDLightShadow

連続した 2 つの境界線によって立体的に見える 3D 要素の、光源に向いた 2 つの境界線のうち、暗い方 (一般的には内側) の色。

ThreeDShadow

連続した 2 つの境界線によって立体的に見える 3D 要素の、光源から離れた 2 つの境界線のうち、明るい方 (一般的には内側) の色。

Window

ウィンドウの背景。 WindowText を前景色に使用してください。

WindowFrame

ウィンドウの枠。

WindowText

ウィンドウ内の文字列。 Window を背景色に使用してください。

-moz-ButtonDefault

ダイアログボックスの既定の動作を表すボタンの周りを囲む境界線の色です。

-moz-ButtonHoverFace

マウスポインターが上にある時のボタンの背景色 (マウスポインターが上にない場合は ThreeDFace または ButtonFace)。 -moz-ButtonHoverText の前景色と一緒に使う必要があります。

-moz-ButtonHoverText

マウスポインタが上にあるボタンのテキスト色 (マウスポインタが上にない場合は ButtonText)。 -moz-ButtonHoverFace background の背景色と一緒に使う必要があります。

-moz-CellHighlight

ツリーウィジェットで選択された項目の背景色。 -moz-CellHighlightText の前景色と一緒に使用する必要があります。 -moz-html-CellHighlight も参照。

-moz-CellHighlightText

ツリー内で選択された項目のテキスト色。 -moz-CellHighlight background の背景色と一緒に使う必要があります。 -moz-html-CellHighlightText も参照。

-moz-Combobox

コンボボックスの背景色。 -moz-ComboboxText の前景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに -moz-Field を使用してください。

-moz-ComboboxText

コンボボックスのテキスト色。 -moz-Combobox の背景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに -moz-FieldText を使用してください。

-moz-Dialog

ダイアログボックスの背景色。moz-DialogTextの前景色と一緒に使う必要があります。

-moz-DialogText

ダイアログボックスのテキスト色。 -moz-DialogText の背景色と一緒に使う必要があります。

-moz-dragtargetzone, -moz-EvenTreeRow

ツリー内の偶数行の背景色。 -moz-FieldText の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 -moz-Field を使用してください。 -moz-OddTreeRow も参照してください。

-moz-html-CellHighlight

HTML の <select> における強調表示されたアイテムの背景色。前景色には -moz-html-CellHighlightText を使用します。 Gecko 1.9 以前では、 -moz-CellHighlight を使用してください。

-moz-html-CellHighlightText

HTML の <select> における強調表示されたアイテムのテキストの色。背景色には -moz-html-CellHighlight を使用します。 Gecko 1.9 以前では、 -moz-CellHighlightText を使用してください。

-moz-mac-accentdarkestshadow, -moz-mac-accentdarkshadow, -moz-mac-accentface, -moz-mac-accentlightesthighlight, -moz-mac-accentlightshadow, -moz-mac-accentregularhighlight, -moz-mac-accentregularshadow

アクセント色です。

-moz-mac-chrome-active, -moz-mac-chrome-inactive

非アクティブおよびアクティブなブラウザーのクロームの色です。

-moz-mac-focusring, -moz-mac-menuselect, -moz-mac-menushadow, -moz-mac-menutextselect, -moz-MenuHover

ホバーされたメニュー項目の背景色。 Highlight によく似ています。 -moz-MenuHoverText や -moz-MenuBarHoverText の前景色と一緒に使う必要があります。

-moz-MenuHoverText

ホバーされたメニュー項目のテキスト色。 HighlightText によく似ています。 -moz-MenuHover の背景色と一緒に使う必要があります。

-moz-MenuBarText

メニューバーのテキスト色。 MenuText によく似ています。 Menu の背景の上に使用します。

-moz-MenuBarHoverText

メニューバーのホバーされたテキストの色。多くの場合、 -moz-MenuHoverText に似ています。 -moz-MenuHover 背景の上に使用する必要があります。

-moz-nativehyperlinktext

既定のプラットフォームのハイパーリンク色です。

-moz-OddTreeRow

ツリー内の奇数行の背景色。 -moz-FieldText の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 -moz-Field を使用してください。 -moz-EvenTreeRow も参照してください。

-moz-win-communicationstext

-moz-appearance: -moz-win-communications-toolbox; を持つオブジェクトのテキストに使用する必要があります。

-moz-win-mediatext

-moz-appearance: -moz-win-media-toolbox を持つオブj稀有とのテキストに使用する必要があります。

-moz-win-accentcolor

スタートメニューやタスクバー、タイトルバーなどに設定できる Windows 10 のカスタムアクセント色にアクセスするために使用します。

-moz-win-accentcolortext

スタートメニュー、タスクバー、タイトルバーなどの Windows 10 のカスタムアクセント色の上に配置されたテキストの色にアクセスするために使用します。

-moz-activehyperlinktext

アクティブ化されたリンクの文字色のユーザー設定です。既定の文書の背景色と共に使用されます。

-moz-default-background-color

文書の背景色のユーザー設定です。

-moz-default-color

文字色のユーザー設定です。

-moz-hyperlinktext

未訪問のリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。

-moz-visitedhyperlinktext

訪問済みのリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。

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

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

実は、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() (en-US) 関数で指定された色は、定義済みの色空間のほか、@color-profile ルールで定義されたカスタム色空間でも色を指定できます。

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

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

この例では、<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, 100%)

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

/* 浮動小数点値による実数表記 */
rgb(255, 0, 153.6, 1)
rgb(1e2, .5e1, .5e0, +.25e2%)

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