<color>

概要

CSS<color> データ型は sRGB 色空間 にある一つの色を表します。色は以下の方法で記述できます:

利用可能な色の値は、最新の CSS3 カラーに達するまでに、仕様書の発展にともない拡張されてきたことに注意してください。

sRGB 空間にある色と関連づけて、<color> 値は アルファチャンネル 座標である透明度を持つこともできます。これはその色と背景色の 合成 方法を示します。

CSS の色は正確に定義されていますが、出力デバイスによって違って見えるかもしれません。出力デバイスの大半は色補正がされておらず、一部のブラウザーは出力デバイスの カラープロファイル をサポートしていません。これらがないと、色の描画が大きく変化する可能性があります。

注記: W3C の WCAG 2.0 勧告はウェブ著者に、特定の情報、アクション、結果を伝えるためだけにを使わないよう強くアドバイスしています。ユーザーによっては色の識別に問題を抱えていて、伝達された内容が把握できないかもしれないからです。もちろん、控えるべきなのは色を使うことではなく、ある情報を表すためだけに使うことです (詳しくは Color and color contrast をご覧ください)。

補間

<color> CSS データ型の値はアニメーションや <gradient> 値の作成ができるように補間可能です。この場合色はその構成要素である赤、緑、青それぞれが実数、浮動小数点数として扱われ補間されます。予期しない灰色が現れるのを避けるため、色の補間は アルファ乗算済み sRGBA 色空間 で行われることに注意してください。アニメーションでは補間の速度はアニメーションと関連づけられた timing function によって決められます。

複数の方法で <color> 値を記述できます。

色キーワード

色キーワードは大文字と小文字の区別をしない識別子で、特定の色を表します。例えば redbluebrownlightseagreen といったものです。名前に色を書きますが、ほとんどは人工的な定義です。仕様書が発展するたびに利用可能な値の一覧は大きく変化しました:

  • CSS Level 1 は基本的な 16 色だけを受け付けました。VGA グラフィックカードで表示可能な色の組み合わせという意味で、VGA カラーと命名されました。
  • CSS Level 2 は orange キーワードを追加しました。
  • 当初から、ブラウザーはその他の色を受け付けていました。初期のブラウザーのいくつかは X11 アプリケーションであったため、ほとんどは X11 色名称でしたが、少しずつ違いがありました。SVG 1.0 は正式にこうしたキーワードを定義した最初の規格でした。CSS Colors Level 3 も正式にこれらのキーワードを定義しました。このリストはよく拡張色キーワードX11 カラーSVG カラーと呼ばれます。

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

  • HTML では、HTML で一般的な基本 16 色以外は使用できません。HTML は未知の値を独自アルゴリズムを使って、完全に別な色に変換します。基本 16 色以外のキーワードは SVG と CSS でのみ使用すべきです。
  • CSS プロパティでは未知のキーワードは無効になります。無効なプロパティは無視され、その色は一切効果を持ちません。これは HTML と違った動作です。
  • CSS のキーワード定義された色はどれも透明度を持たず、完全に不透明な色です。
  • 同じ色を表すキーワードがあります:
    • darkgray / darkgrey
    • darkslategray / darkslategrey
    • dimgray / dimgrey
    • lightgray / lightgrey
    • lightslategray / lightslategrey
    • gray / grey
    • slategray / slategrey
  • キーワードの名前は X11 の色名からとられたものですが、メーカーが特定のハードウェアに適応させたので、X11 システムのシステムカラーとは異なる可能性があります。
仕様書 キーワード 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 #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  
  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  

rebeccapurple 色は #639 色と同じであり、なぜ導入されたかに関する詳しい情報を、Trezy 氏が Codepen ブログの記事 "Honoring a Great Man" に掲載しています。

transparent キーワード

transparent は完全な透明色を表すキーワードです。設定された要素では背景色が見えるようになるでしょう。厳密にはこれはアルファチャンネルに最大値を持つ黒色で、計算値 rgba(0,0,0,0) へのショートカットです。

transparent の変遷
transparent キーワードは CSS Level 2 (Revision 1) では本当の色ではありませんでした。2 つの CSS プロパティ backgroundborder で、通常 <color> 値を置く場所に使える特殊なキーワードでした。本来は、継承された不透明色を上書きできるように追加されました。

アルファチャンネル を通じて透明度がサポートされると、transparent は本当の色として CSS Colors Level 3 で再定義され、color プロパティのような <color> 値が必要な場所ならどこでも使えるようになりました。

currentcolor キーワード

currentcolor キーワードは、要素の color プロパティの計算値です。プロパティや、デフォルトでは継承を行わない子要素のプロパティに、色のプロパティを継承させることができます。

currentcolor キーワードを color プロパティそのものに使うと、color: inherit として扱われます。

実動例

色のついた線 (ベタ塗りされた div) の色は親要素から継承した color プロパティのものです:

Live example 1
<div style="color:darkred">
 このテキストの色は次の線の色と同じです:
  <div style="background:currentcolor; height:1px"></div>
 テキストの続き。
</div>

Live example 2
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
 このテキストの色は次の線の色と同じです:
  <div style="background:currentcolor; height:1px"></div>
 テキストの続き。
</div> 

rgb()

注記: CSS Color Module Level 4 仕様では rgba() が、rgb() と同じ文法および動作である古い関数であると定義されました。つまり、事実上の別名です。今後は、どちらもまったく同じパラメーターを受け入れます。

色は red-green-blue (RGB) モデルを使って二つの方法で定義できます:

16 進記法 #RRGGBB#RGB
  • "#" に続く 6 個の 16進文字 (0-9, A-F)。はじめの 2 つは赤、次の 2 つは緑、最後の 2 つは青を表します。
  • "#" に続く 3 個の 16 進文字 (0-9, A-F)。最初の桁は赤、2 番目の桁は緑、最後の桁は青を表します。
3 文字 RGB 記法 (#RGB) と 6 文字記法 (#RRGGBB) は等価です。例えば、#f03#ff0033 は同じ色を表します。
関数記法 rgb(R,G,B)
"rgb" に続く 3 個の <integer> または 3 個の <percentage> 値、および省略可能なアルファ値 (これは 0 から 1 の間の <number> または <percentage>)。アルファ値は色の透明度を表します。
整数値 255 および 16 進の F または FF は 100% に対応します。
/* これらの例はすべて同じ RGB color を指定します: */
 
#f03
#F03
#ff0033
#FF0033
rgb(255,0,51)
rgb(255, 0, 51)
rgb(255, 0, 51.2) /* ERROR!小数ではなく整数を使用してください */ 
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)
rgb(100%, 0, 20%) /* ERROR!整数と割合を混在しないでください */

/* ホワイトスペースを使用する構文 */
rgb(255 0 0)

/* 省略可能なアルファ値 */
rgb(255,0,0,0.4)  /* 40% opaque red */ 
rgb(255,0,0,40%)  /* 40% opaque red with percentage value for alpha */ 
rgb(255 0 0 / 0.4)  /* 40% opaque red */ 
rgb(255 0 0 / 40%)  /* 40% opaque red with percentage value for alpha */ 

hsl()

注記: CSS Color Module Level 4 仕様では hsla() が、hsl() と同じ文法および動作である古い関数であると定義されました。つまり、事実上の別名です。今後は、どちらもまったく同じパラメーターを受け入れます。

色は hsl() 関数記法を使用して、色相、彩度、輝度または HSL で定義できます。RGB に対する HSL の利点は、より直感的であることです: ほしい色を推測可能であり、微調整できます。同一色相配色を作るのも容易です (色相 (hue) を同じにして輝度 (lightness/darkness) と彩度 (saturation) を変化させる)。

色相 (Hue) はカラーサークル (虹を円で表現したもの) の角度として表されます。角度は単位の無い <number> として与えられます。定義により red=0=360 であり、他の色は円の周りに広がります: green=120, blue=240 など。角度であるため、-120=240 や 480=120 のように暗黙のうちに変換されます。

彩度と輝度は割合で表現されます。
100% は完全彩度で、0% は灰色の色合いです。
100% の輝度 は白、0% の輝度は黒、50% の輝度は "普通" です。

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */ 

/* ホワイトスペースを使用する構文 */
hsl(120 60% 70%)  /* pastel green */ 

/* 色相を角度で表す。rad, grad, turn も使用可能 */
hsl(120deg 60% 70%)  /* pastel green */ 

/* 省略可能なアルファ値 */
hsl(240,100%,50%,0.05)  /* 5% opaque blue */ 
hsl(240,100%,50%,5%)  /* 5% opaque blue with percentage value for alpha */ 
hsl(240 100% 50% / 0.05) /* 5% opaque blue */ 
hsl(240 100% 50% / 5%) /* 5% opaque blue with percentage value for alpha */

rgba()

Red-green-blue-alpha モデル (RGBa) の色を 2 つの方法で定義できます:

16 進記法 #RRGGBBAA#RGBA
  • "#" に続く 8 個の 16進文字 (0-9, A-F)。はじめの 2 つは赤、次の 2 つは緑、3 番目の 2 つは青、最後の 2 つは透明度を表します。
  • "#" に続く 4 個の 16 進文字 (0-9, A-F)。最初の桁は赤、2 番目の桁は緑、3 番目の桁は青、最後の桁は透明度を表します。
4 文字 RGB 記法 (#RGBA) と 8 文字記法 (#RRGGBBAA) は等価です。例えば、#f038#ff003388 は同じ色を表します。
関数記法 rgba()
RGBa は RGB 色モデルにアルファチャンネルを追加して、色の透明度を指定できるように拡張します。
a は透明度を意味します: 0= 透明 (transparent) ; 1= 不透明 (opaque);
#f030                /* 0% opaque red */  
#F03F                /* full opaque red */  
#ff003300            /* 0% opaque red */  
#FF003388            /* 50% opaque red */  
rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */ 

/* ホワイトスペースを使用する構文 */
rgba(255 0 0 / 0.4)  /* 40% opaque red */ 

/* アルファチャンネルをパーセンテージで表す */
rgba(255 0 0 / 40%)  /* 40% opaque red */ 

注記: CSS Color Module Level 4 仕様では rgba() が、rgb() と同じ文法および動作である古い関数であると定義されました。つまり、事実上の別名です。今後は、どちらもまったく同じパラメーターを受け入れます。

hsla()

hue-saturation-lightness-alpha モデル (HSLa) の色は hsla() 関数記法で定義できます。HSLa は、HSL 色モデルにアルファチャンネルを追加して色の透明度を指定できるように拡張します。
a は透明度を意味します: 0= 透明 (transparent) ; 1= 不透明 (opaque);

hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
hsla(240,100%,50%,   1)   /* full opaque blue */ 

/* ホワイトスペースを使用する構文 */
hsla(240 100% 50% / 0.05) /* 5% opaque blue */ 

/* アルファチャンネルをパーセンテージで表す */
hsla(240 100% 50% / 5%) /* 5% opaque blue */ 

/* 色相を角度で表す。rad, grad, turn も使用可能 */
hsla(240deg 100% 50% / 5%) /* 5% opaque blue */ 
hsla(240deg,100%,50%, 0.4)  /* 40% opaque blue */ 

注記: CSS Color Module Level 4 仕様では hsla() が、hsl() と同じ文法および動作である古い関数であると定義されました。つまり、事実上の別名です。今後は、どちらもまったく同じパラメーターを受け入れます。

システムカラー

すべてのシステムカラーがすべてのシステムでサポートされているわけではありません。一般公開されるウェブページでの利用は です。

ActiveBorder
Active window border.
ActiveCaption
Active window caption. Should be used with CaptionText as foreground color.
AppWorkspace
Background color of multiple document interface.
Background
Desktop background.
ButtonFace
Face background color for 3-D elements that appear 3-D due to one layer of surrounding border. Should be used with the ButtonText foreground color.
ButtonHighlight
The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
ButtonShadow
The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
ButtonText
Text on push buttons. Should be used with the ButtonFace or ThreeDFace background color.
CaptionText
Text in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color.
GrayText
Grayed (disabled) text.
Highlight
Item(s) selected in a control. Should be used with the HighlightText foreground color.
HighlightText
Text of item(s) selected in a control. Should be used with the Highlight background color.
InactiveBorder
Inactive window border.
InactiveCaption
Inactive window caption. Should be used with the InactiveCaptionText foreground color.
InactiveCaptionText
Color of text in an inactive caption. Should be used with the InactiveCaption background color.
InfoBackground
Background color for tooltip controls. Should be used with the InfoText foreground color.
InfoText
Text color for tooltip controls. Should be used with the InfoBackground background color.
Menu
Menu background. Should be used with the MenuText or  -moz-MenuBarText foreground color.
MenuText
Text in menus. Should be used with the Menu background color.
Scrollbar
Background color of scroll bars.
ThreeDDarkShadow
The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDFace
The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the ButtonText foreground color.
ThreeDHighlight
The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
ThreeDLightShadow
The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two
concentric layers of surrounding border.
ThreeDShadow
The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
Window
Window background. Should be used with the WindowText foreground color.
WindowFrame
Window frame.
WindowText
Text in windows. Should be used with the Window background color.

Mozilla システムカラー拡張

-moz-ButtonDefault
The border color that goes around buttons that represent the default action for a dialog box.
-moz-ButtonHoverFace
The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color.
-moz-ButtonHoverText
The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverFace background color.
-moz-CellHighlight
Background color for selected item in a tree widget. Should be used with the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.
-moz-CellHighlightText
Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText.
-moz-Combobox
Background color for combo-boxes. Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.
-moz-ComboboxText
Text color for combo-boxes. Should be used with the -moz-Combobox background color. In versions prior to 1.9.2, use -moz-FieldText instead.
-moz-Dialog
Background color for dialog boxes. Should be used with the -moz-DialogText foreground color.
-moz-DialogText
Text color for dialog boxes. Should be used with the -moz-Dialog background color.
-moz-dragtargetzone
-moz-EvenTreeRow
Background color for even-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-OddTreeRow.
-moz-Field
デフォルトの mozilla のテキストフィールドの背景色。Should be used with the -moz-FieldText foreground color.
-moz-FieldText
デフォルトの mozilla のテキストフィールドの前景色。Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color.
-moz-html-CellHighlight
Background color for highlighted item in HTML <select>s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.
-moz-html-CellHighlightText
Text color for highlighted items in HTML <select>s. Should be used with the -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -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
Background color for hovered menu items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
-moz-MenuHoverText
Text color for hovered menu items. Often similar to HighlightText. Should be used with the -moz-MenuHover background color.
-moz-MenuBarText
Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background.
-moz-MenuBarHoverText
Color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background.
-moz-nativehyperlinktext
デフォルトのプラットフォームのハイパーリンク色
-moz-OddTreeRow
Background color for odd-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow.
-moz-win-communicationstext
Should be used for text in objects with -moz-appearance: -moz-win-communications-toolbox;.
-moz-win-mediatext
Should be used for text in objects with -moz-appearance: -moz-win-media-toolbox.

Mozilla カラー設定拡張

-moz-activehyperlinktext
User's preference for text color of active links. Should be used with the default document background color.
-moz-default-background-color
User's preference for the document background color.
-moz-default-color
User's preference for the text color.
-moz-hyperlinktext
User's preference for the text color of unvisited links. Should be used with the default document background color.
-moz-visitedhyperlinktext
User's preference for the text color of visited links. Should be used with the default document background color.

仕様

仕様書 策定状況 コメント
CSS Color Module Level 4
<color> の定義
勧告改訂案 rebeccapurple、4 桁 (#RGBA) および 8 桁 (#RRGGBBAA) の 16 進記法、rgb() および hsl() の別名である rgba() および hsla() (どちらもパラメーターの構文が同じ)、カンマではなく空白で区切る関数のパラメーター、アルファ値のパーセンテージ表記、hsl() 色の色相の角度表記を追加。
CSS Color Module Level 3
<color> の定義
勧告 システムカラーを非推奨化。SVGカラーを追加。rgba(), hsl(), hsla() 関数記法を追加
CSS Level 2 (Revision 1)
<color> の定義
勧告 orange 色とシステムカラーを追加
CSS Level 1
<color> の定義
勧告 初期定義

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
色キーワード 1.0 1.0 (1.0) 3.0 [1] 3.5 1.0 (85)
#RRGGBB, #RGB 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)
rgb() 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
hsl() 1.0 1.0 (1.5) 9.0 9.5 3.1 (525)
rgba(), hsla() 1.0 3.0 (1.9) 9.0 10.0 3.1 (525)
currentcolor 1.0 1.5 (1.8) 9.0 9.5 4.0 (528)
transparent 1.0 3.0 (1.9) 9.0 [2] 10.0 3.1 (525)
rebeccapurple 38.0 33 (33) 11 25.0 7.1
#RRGGBBAA, #RGBA 52.0 49 (49) ? 39.0 9.1
rgb() および hsl() の別名である rgba() および hsla()
カンマではなく空白で区切る関数のパラメーター
アルファ値のパーセンテージ表記
hsl() 色の色相の角度表記
? 52 (52) ? ? ?
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート (有) (有) (有) (有) (有)
rgba(), hsla() (有) (有) (有) (有) (有)
rebeccapurple (有) 33.0 (33) ? ? 8
#RRGGBBAA, #RGBA 52.0 49.0 (49) 未サポート 未サポート ?
rgb() および hsl() の別名である rgba() および hsla()
カンマではなく空白で区切る関数のパラメーター
アルファ値のパーセンテージ表記
hsl() 色の色相の角度表記
? 52.0 (52) ? ? ?

[1] 'e' の綴りの grey (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey) がサポートされたのは IE 8.0 からです。IE 3 から IE 7 は 'a' の綴りの別形だけをサポートします: gray, darkgray, darkslategray, dimgray, lightgray, lightslategray.

[2] IE 7-8 は transparent キーワードを backgroundborder でのみサポートしています。color: transparent; は IE では黒で表示されます。また、IE6 は transparent のボーダーを黒で表示します。

[3] この機能はバージョン 52 以降の Chrome Canary でサポートします。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, Sebastianz, Simplexible, fscholz, teoli, ethertank, Marsf, sosleepy, Level
 最終更新者: yyss,