<color>

<color>CSSデータ型で、 sRGB 色空間にある一つの色を表します。 <color>アルファチャネル透過値を含むこともでき、背景とどのように合成するかを示すこともできます。

<color> は以下の何れかの方法で定義することができます。

  • キーワードの使用 (bluetransparent など)
  • RGB 立方体座標方式の使用 (#+16進数値や、rgb()rgba() の関数記法によって)
  • HSL 円柱座標方式 の使用 (hsl()hsla() の関数記法によって)

メモ: この記事は <color> データ型の詳細を説明しています。 HTML での色の使い方について詳しくは、 CSS を使用した HTML 要素への色の適用を参照してください。

構文

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

メモ: <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 システムでの色とは異なる可能性があります。

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

  • CSS Level 1 は基本的な16色だけを受け付けていました。VGA グラフィックカードで表示可能な色の組み合わせという意味で、VGA 色と命名されました。
  • CSS Level 2 は orange キーワードを追加しました。
  • 当初から、ブラウザーはその他の色を受け付けていました。初期のブラウザーのいくつかは X11 アプリケーションであったため、ほとんどは X11 色名称でしたが、少しずつ違いがありました。SVG 1.0 は正式にこうしたキーワードを定義した最初の規格でした。CSS Colors Level 3 も正式にこれらのキーワードを定義しました。このリストはよく拡張色キーワードX11 色SVG 色と呼ばれます。
  • CSS Colors Level 4 では ウェブのパイオニア、エリック・メイヤーに敬意を表して rebeccapurple のキーワードを追加しました。
仕様書 キーワード RGB 16 進表記
CSS Level 1 black #000000
silver #c0c0c0
gray #808080
white #ffffff
maroon #800000
red #ff0000
purple #800080
fuchsia #ff00ff
green #008000
lime #00ff00
olive #808000
yellow #ffff00
navy #000080
blue #0000ff
teal #008080
aqua #00ffff
CSS Level 2 (Revision 1) orange #ffa500
CSS Color Module Level 3 aliceblue #f0f8ff
antiquewhite #faebd7
aquamarine #7fffd4
azure #f0ffff
beige #f5f5dc
bisque #ffe4c4
blanchedalmond #ffebcd
blueviolet #8a2be2
brown #a52a2a
burlywood #deb887
cadetblue #5f9ea0
chartreuse #7fff00
chocolate #d2691e
coral #ff7f50
cornflowerblue #6495ed
cornsilk #fff8dc
crimson #dc143c
cyan
(synonym of aqua)
#00ffff
darkblue #00008b
darkcyan #008b8b
darkgoldenrod #b8860b
darkgray #a9a9a9
darkgreen #006400
darkgrey #a9a9a9
darkkhaki #bdb76b
darkmagenta #8b008b
darkolivegreen #556b2f
darkorange #ff8c00
darkorchid #9932cc
darkred #8b0000
darksalmon #e9967a
darkseagreen #8fbc8f
darkslateblue #483d8b
darkslategray #2f4f4f
darkslategrey #2f4f4f
darkturquoise #00ced1
darkviolet #9400d3
deeppink #ff1493
deepskyblue #00bfff
dimgray #696969
dimgrey #696969
dodgerblue #1e90ff
firebrick #b22222
floralwhite #fffaf0
forestgreen #228b22
gainsboro #dcdcdc
ghostwhite #f8f8ff
gold #ffd700
goldenrod #daa520
greenyellow #adff2f
grey #808080
honeydew #f0fff0
hotpink #ff69b4
indianred #cd5c5c
indigo #4b0082
ivory #fffff0
khaki #f0e68c
lavender #e6e6fa
lavenderblush #fff0f5
lawngreen #7cfc00
lemonchiffon #fffacd
lightblue #add8e6
lightcoral #f08080
lightcyan #e0ffff
lightgoldenrodyellow #fafad2
lightgray #d3d3d3
lightgreen #90ee90
lightgrey #d3d3d3
lightpink #ffb6c1
lightsalmon #ffa07a
lightseagreen #20b2aa
lightskyblue #87cefa
lightslategray #778899
lightslategrey #778899
lightsteelblue #b0c4de
lightyellow #ffffe0
limegreen #32cd32
linen #faf0e6
magenta
(synonym of fuchsia)
#ff00ff
mediumaquamarine #66cdaa
mediumblue #0000cd
mediumorchid #ba55d3
mediumpurple #9370db
mediumseagreen #3cb371
mediumslateblue #7b68ee
mediumspringgreen #00fa9a
mediumturquoise #48d1cc
mediumvioletred #c71585
midnightblue #191970
mintcream #f5fffa
mistyrose #ffe4e1
moccasin #ffe4b5
navajowhite #ffdead
oldlace #fdf5e6
olivedrab #6b8e23
orangered #ff4500
orchid #da70d6
palegoldenrod #eee8aa
palegreen #98fb98
paleturquoise #afeeee
palevioletred #db7093
papayawhip #ffefd5
peachpuff #ffdab9
peru #cd853f
pink #ffc0cb
plum #dda0dd
powderblue #b0e0e6
rosybrown #bc8f8f
royalblue #4169e1
saddlebrown #8b4513
salmon #fa8072
sandybrown #f4a460
seagreen #2e8b57
seashell #fff5ee
sienna #a0522d
skyblue #87ceeb
slateblue #6a5acd
slategray #708090
slategrey #708090
snow #fffafa
springgreen #00ff7f
steelblue #4682b4
tan #d2b48c
thistle #d8bfd8
tomato #ff6347
turquoise #40e0d0
violet #ee82ee
wheat #f5deb3
whitesmoke #f5f5f5
yellowgreen #9acd32
CSS Color Module Level 4 rebeccapurple #663399

transparent キーワード

transparent は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密にはこれはアルファチャンネルに最大値を持つ黒色で、計算値 rgba(0,0,0,0) へのショートカットです。

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

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

currentcolor キーワード

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

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

currentcolor の例

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

RGB 色

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

構文

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

メモ: 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 (青) は 数値またはパーセント表記のどちらかで、255100%に対応します。 A (アルファ)は01の間の数値、またはパーセント表記で、数値1100% (不透明) です。
関数表記: rgb[a](R G B[ / A])
CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。

様々な RGB 構文

この例は、一つの色を 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%)
RGB の様々な透過性
/* 16進表記 */
#3a30                    /* 透明な緑 */ 
#3A3F                    /* 不透明な緑 */ 
#33aa3300                /* 完全に透明な緑 */ 
#33AA3388                /*  50%半透明の緑 */ 

/* 関数表記 */
rgba(51, 170, 51, .1)    /*  10%半透明の緑 */ 
rgba(51, 170, 51, .4)    /*  40%半透明の緑 */ 
rgba(51, 170, 51, .7)    /*  70%半透明の緑 */ 
rgba(51, 170, 51,  1)    /* 完全に不透明な緑 */ 

/* ホワイトスペース区切りの構文 */
rgba(51 170 51 / 0.4)    /*  40%半透明の緑 */ 
rgba(51 170 51 / 40%)    /*  40%半透明の緑 */ 

/* 実数値の関数構文 */
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)

HSL 色

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

多くのデザイナーは、 HSL は色相、彩度、明度をそれぞれ個別に調整できるので、 RGB より直感的であると考えています。 HSL は一連の合う色の組み合わせ (例えば、同じ色相で、明暗や彩度が異なる色など) をより簡単に作成することもできます。

構文

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

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

関数表記: hsl[a](H, S, L[, A])
H (色相) は色相環の角度CSS Color Module Level 4 で定義されている degradgradturn の単位で与えます。単位のない数値の場合は、 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 (アルファ)は01の間の数値、またはパーセント表記で、数値1100% (不透明) です。
関数表記: hsl[a](H S L[ / A])
CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。

様々な HSL の構文
/* これらの例はすべて同じ色、ラベンダーを指定します。 */
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

/* これらの例はすべて同じ色、15%半透明のラベンダーを指定します。 */
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)
彩度100%の色
表記 説明
hsl(0, 100%, 50%) red
hsl(30, 100%, 50%) orange
hsl(60, 100%, 50%) yellow
hsl(90, 100%, 50%) lime green
hsl(120, 100%, 50%) green
hsl(150, 100%, 50%) blue-green
hsl(180, 100%, 50%) cyan
hsl(210, 100%, 50%) sky blue
hsl(240, 100%, 50%) blue
hsl(270, 100%, 50%) purple
hsl(300, 100%, 50%) magenta
hsl(330, 100%, 50%) pink
hsl(360, 100%, 50%) red
緑の明度の変化
表記 説明
hsl(120, 100%, 0%) black
hsl(120, 100%, 20%)
hsl(120, 100%, 40%)
hsl(120, 100%, 60%)
hsl(120, 100%, 80%)
hsl(120, 100%, 100%) white
緑の彩度の変化
表記 説明
hsl(120, 100%, 50%) green
hsl(120, 80%, 50%)
hsl(120, 60%, 50%)
hsl(120, 40%, 50%)
hsl(120, 20%, 50%)
hsl(120, 0%, 50%) gray
HSL の様々な透過性
hsla(240, 100%, 50%, .05)     /*   5%半透明の青 */ 
hsla(240, 100%, 50%, .4)      /*  40%半透明の青 */ 
hsla(240, 100%, 50%, .7)      /*  70%半透明の青 */ 
hsla(240, 100%, 50%, 1)       /* 不透明な青 */ 

/* 空白表記 */
hsla(240 100% 50% / .05)      /*   5%半透明の青 */ 

/* アルファのパーセント表記 */
hsla(240 100% 50% / 5%)       /*   5%半透明の青 */ 

システム色

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

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

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

ActiveText

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

ButtonFace

プッシュボタンの背景

ButtonText

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

Canvas

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

CanvasText

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

Field

入力フィールドの背景

FieldText

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

GrayText

無効なテキスト

Highlight

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

HighlightText

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

LinkText

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

VisitedText

訪問したリンクのテキスト

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

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

ActiveBorder

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

ActiveCaption

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

AppWorkspace

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

Background

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

ButtonHighlight

周囲の境界線で1つの平面を作って3Dになっている3D要素の光源に向いている境界線です。

ButtonShadow

周囲の境界線で1つの平面を作って3Dになっている3D要素の光源から離れている境界線です。

CaptionText

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

InactiveBorder

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

InactiveCaption

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

InactiveCaptionText

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

InfoBackground

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

InfoText

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

Menu

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

MenuText

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

Scrollbar

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

ThreeDDarkShadow

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の暗い方 (ふつうは外側) の色。

ThreeDFace

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の表面の色。前景色には ButtonText を使用してください。

ThreeDHighlight

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺の明るい方 (ふつうは外側) の色。

ThreeDLightShadow

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺のっ暗い方 (ふつうは内側) の色。

ThreeDShadow

囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の明るい方 (ふつうは内側) の色。

Window

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

WindowFrame

ウィンドウの枠。

WindowText

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

Mozilla システム色拡張

-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 のカスタムアクセントカラーの上に配置されたテキストの色にアクセスするために使用します。

Mozilla 色設定拡張

-moz-activehyperlinktext

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

-moz-default-background-color

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

-moz-default-color

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

-moz-hyperlinktext

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

-moz-visitedhyperlinktext

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

補間

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

アクセシビリティの考慮事項

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

仕様書

仕様書 状態 備考
CSS Color Module Level 4
<color> の定義
草案 rebeccapurple、4 桁 (#RGBA) および 8 桁 (#RRGGBBAA) の 16 進記法、rgb() および hsl() の別名である rgba() および hsla() (どちらも引数の構文が同じ)、関数の引数をカンマの代わりに空白で区切るこおt、アルファ値のパーセント値表記、hsl() 色の色相の角度表記を追加。
CSS Color Module Level 3
<color> の定義
勧告 システム色を非推奨化。 SVG 色を追加。rgba(), hsl(), hsla() 関数記法を追加
CSS Level 2 (Revision 1)
<color> の定義
勧告 orange キーワードとシステム色を追加
CSS Level 1
<color> の定義
勧告 初回定義。基本16色のキーワードを含む。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
<color>Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Alpha color values (rgba(), hsla())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3IE 完全対応 9Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)Chrome 完全対応 62
完全対応 62
完全対応 52
無効
無効 From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 79Firefox 完全対応 49IE 未対応 なしOpera 完全対応 49
完全対応 49
完全対応 39
無効
無効 From version 39: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 9.1WebView Android 完全対応 62Chrome Android 完全対応 62
完全対応 62
完全対応 52
無効
無効 From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 49Opera Android 完全対応 47
完全対応 47
完全対応 41
無効
無効 From version 41: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 9.3Samsung Internet Android 完全対応 8.0
currentcolorChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 4WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
Allow floats in rgb() and rgba()Chrome 完全対応 66Edge 完全対応 79Firefox 完全対応 52IE 未対応 なしOpera 完全対応 53Safari 完全対応 12.1WebView Android 完全対応 66Chrome Android 完全対応 66Firefox Android 完全対応 52Opera Android 完全対応 47Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 9.0
HSL color values (hsl())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 3.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0
hsl() can accept alpha valuesChrome 完全対応 65Edge 完全対応 79Firefox 完全対応 52IE 未対応 なしOpera 完全対応 52Safari 完全対応 12.1WebView Android 完全対応 65Chrome Android 完全対応 65Firefox Android 完全対応 52Opera Android 完全対応 47Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 9.0
Keyword color valuesChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3
補足
完全対応 3
補足
補足 Internet Explorer 8 and later support gray color keywords spelled with an e (grey, darkgrey, darkslategrey, dimgrey, lightgrey, and lightslategrey). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (gray, darkgray, darkslategray, dimgray, lightgray, and lightslategray).
Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
rebeccapurpleChrome 完全対応 38Edge 完全対応 12Firefox 完全対応 33IE 完全対応 11Opera 完全対応 25Safari 完全対応 9WebView Android 完全対応 38Chrome Android 完全対応 38Firefox Android 完全対応 33Opera Android 完全対応 25Safari iOS 完全対応 8Samsung Internet Android 完全対応 3.0
rgb() can accept alpha valuesChrome 完全対応 65Edge 完全対応 79Firefox 完全対応 52IE 未対応 なしOpera 完全対応 52Safari 完全対応 12.1WebView Android 完全対応 65Chrome Android 完全対応 65Firefox Android 完全対応 52Opera Android 完全対応 47Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 9.0
RGB functional notation (rgb())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
RGB hexadecimal notation (#RRGGBB, #RGB)Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Space-separated functional color notationsChrome 完全対応 65Edge 完全対応 79Firefox 完全対応 52IE 未対応 なしOpera 完全対応 52Safari 完全対応 12.1WebView Android 完全対応 65Chrome Android 完全対応 65Firefox Android 完全対応 52Opera Android 完全対応 47Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 9.0
transparentChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3IE 完全対応 9Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報