CSS<color> データ型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 キーワード 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
(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
(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 の例

<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(R, G, B[, A]) または rgba(R, G, B, A)
R (赤)、 G (緑)、 B (青) は 整数またはパーセント表記のどちらかで、255100%に対応します。 A (アルファ)は01の間の数値、またはパーセント表記で、数値1100% (不透明) です。
関数表記: rgb(R G B[ / A]) または rgba(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) /* ERROR! 小数は使用しないでください */
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)
rgb(255 0 153)

/* 浮動小数点値による実数表記 */
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() can be used as an alias here, with same behavior) */   
rgb(51 170 51 / .4)     /* 40%半透明の緑 */ 
rgb(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(H, S, L[, A]) または hsla(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(H S L[ / A]) または hsla(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%半透明の青 */ 

システム色

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

ActiveBorder
アクティブウィンドウの境界線。
ActiveCaption
アクティブウィンドウのキャプション。 CaptionText を前景色として使用してください。
AppWorkspace
複数文書インターフェイス (MDI) の背景色。
Background
デスクトップの背景です。
ButtonFace
周囲の境界線で1つの平面を作って3Dになっている3D要素の表面の背景色です。 ButtonText を前景色として使用してください。
ButtonHighlight
周囲の境界線で1つの平面を作って3Dになっている3D要素の光源に向いている境界線です。
ButtonShadow
周囲の境界線で1つの平面を作って3Dになっている3D要素の光源から離れている境界線です。
ButtonText
プッシュボタンの文字列です。 ButtonFace または ThreeDFace を背景色として使用してください。
CaptionText
キャプションの文字列、サイズ変更ボックス、スクロールバーの矢印ボックスの文字列です。 ActiveCaption を背景色として使用してください。
GrayText
灰色の (無効な) 文字列です。
Highlight
選択され制御可能な項目です。 HighlightText を前景色に使用してください。
HighlightText
選択され制御可能な項目の文字列です。 Highlight を背景色に使用してください。
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
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
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
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.
-moz-win-accentcolor
Gecko 56 が必要
Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc.
-moz-win-accentcolortext
Gecko 56 が必要
Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.

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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
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 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
RGB hexadecimal notation (#RRGGBB, #RGB)Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
RGB functional notation (rgb())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
HSL color values (hsl())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Alpha color values (rgba(), hsla())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3IE 完全対応 9Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
currentcolorChrome 完全対応 1Edge ? Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 4WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
transparentChrome 完全対応 1Edge ? Firefox 完全対応 3IE 完全対応 9Opera 完全対応 10Safari 完全対応 3.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rebeccapurpleChrome 完全対応 38Edge ? Firefox 完全対応 33IE 完全対応 11Opera 完全対応 25Safari 完全対応 ありWebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android ? Safari iOS 完全対応 8Samsung Internet Android ?
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 未対応 なしFirefox 完全対応 49IE ? Opera 完全対応 39
無効
完全対応 39
無効
無効 From version 39: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 9.1WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
Space-separated functional color notationsChrome 完全対応 65Edge ? Firefox 完全対応 52IE ? Opera 完全対応 52Safari ? WebView Android 完全対応 65Chrome Android 完全対応 65Edge Mobile ? Firefox Android 完全対応 52Opera Android 完全対応 52Safari iOS ? Samsung Internet Android ?
Allow floats in rgb() and rgba()Chrome 完全対応 66Edge ? Firefox 完全対応 52IE ? Opera 完全対応 53Safari ? WebView Android 完全対応 66Chrome Android 完全対応 66Edge Mobile ? Firefox Android 完全対応 52Opera Android 完全対応 53Safari iOS ? Samsung Internet Android ?

凡例

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

関連情報

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

最終更新者: mfuji09,