CSS の <color> データ型は sRGB 色空間にある一つの色を表します。 <color> は アルファチャネル透過値を含むこともでき、背景とどのように合成するかを示すこともできます。
<color> は以下の何れかの方法で定義することができます。
- キーワードの使用 (
blueやtransparentなど) - 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/cyanfuchsia/magentadarkgray/darkgreydarkslategray/darkslategreydimgray/dimgreylightgray/lightgreylightslategray/lightslategreygray/greyslategray/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 の値をプロパティが既定で受け取らなくても利用することができます。
currentColor が color プロパティの値として使用された場合、 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(青) は整数またはパーセント表記のどちらかで、255が100%に対応します。A(アルファ)は0と1の間の数値、またはパーセント表記で、数値1が100%(不透明) です。- 関数表記:
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 で定義されている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の間の数値、またはパーセント表記で、数値1が100%(不透明) です。- 関数表記:
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
ThreeDFaceorButtonFacewhen the mouse pointer is not over it). Should be used with the-moz-ButtonHoverTextforeground 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 backgroundcolor. - -moz-CellHighlight
- Background color for selected item in a tree widget. Should be used with the
-moz-CellHighlightTextforeground color. See also-moz-html-CellHighlight. - -moz-CellHighlightText
- Text color for a selected item in a tree. Should be used with the
-moz-CellHighlight backgroundcolor. See also-moz-html-CellHighlightText. - -moz-Combobox
- Background color for combo-boxes. Should be used with the
-moz-ComboboxTextforeground color. In versions prior to 1.9.2, use-moz-Fieldinstead. - -moz-ComboboxText
- Text color for combo-boxes. Should be used with the
-moz-Comboboxbackground color. In versions prior to 1.9.2, use-moz-FieldTextinstead. - -moz-Dialog
- Background color for dialog boxes. Should be used with the
-moz-DialogTextforeground color. - -moz-DialogText
- Text color for dialog boxes. Should be used with the
-moz-Dialogbackground color. - -moz-dragtargetzone
- -moz-EvenTreeRow
- Background color for even-numbered rows in a tree. Should be used with the
-moz-FieldTextforeground color. In Gecko versions prior to 1.9, use-moz-Field. See also-moz-OddTreeRow. - -moz-Field
- 既定の mozilla のテキストフィールドの背景色。Should be used with the
-moz-FieldTextforeground color. - -moz-FieldText
- 既定の mozilla のテキストフィールドの前景色。Should be used with the
-moz-Field,-moz-EvenTreeRow, or-moz-OddTreeRowbackground 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-MenuHoverTextor-moz-MenuBarHoverTextforeground color. - -moz-MenuHoverText
- Text color for hovered menu items. Often similar to
HighlightText. Should be used with the-moz-MenuHoverbackground color. - -moz-MenuBarText
- Text color in menu bars. Often similar to
MenuText. Should be used on top ofMenubackground. - -moz-MenuBarHoverText
- Color for hovered text in menu bars. Often similar to
-moz-MenuHoverText. Should be used on top of-moz-MenuHoverbackground. - -moz-nativehyperlinktext
- 既定のプラットフォームのハイパーリンク色
- -moz-OddTreeRow
- Background color for odd-numbered rows in a tree. Should be used with the
-moz-FieldTextforeground 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() (どちらも引数の構文が同じ)、関数の引数をコンマの代わりに空白で区切るこおｔ、アルファ値のパーセント値表記、hsl() 色の色相の角度表記を追加。 |
| CSS Color Module Level 3 <color> の定義 |
勧告 | システム色を非推奨化。 SVG 色を追加。rgba(), hsl(), hsla() 関数記法を追加 |
| CSS Level 2 (Revision 1) <color> の定義 |
勧告 | orange キーワードとシステム色を追加 |
| CSS Level 1 <color> の定義 |
勧告 | 初回定義。基本16色のキーワードを含む。 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 基本対応 | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 あり | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 1 | Chrome Android 完全対応 18 | Edge Mobile 完全対応 12 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
| Keyword color values | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE
完全対応
3
| Opera 完全対応 3.5 | Safari 完全対応 1 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
RGB hexadecimal notation (#RRGGBB, #RGB) | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 3 | Opera 完全対応 3.5 | Safari 完全対応 1 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
RGB functional notation (rgb()) | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 4 | Opera 完全対応 3.5 | Safari 完全対応 1 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
HSL color values (hsl()) | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 9 | Opera 完全対応 9.5 | Safari 完全対応 3.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
Alpha color values (rgba(), hsla()) | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 3 | IE 完全対応 9 | Opera 完全対応 10 | Safari 完全対応 3.1 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
currentcolor | Chrome 完全対応 1 | Edge ? | Firefox 完全対応 1.5 | IE 完全対応 9 | Opera 完全対応 9.5 | Safari 完全対応 4 | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
transparent | Chrome 完全対応 1 | Edge ? | Firefox 完全対応 3 | IE 完全対応 9 | Opera 完全対応 10 | Safari 完全対応 3.1 | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
rebeccapurple | Chrome 完全対応 38 | Edge ? | Firefox 完全対応 33 | IE 完全対応 11 | Opera 完全対応 25 | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android ? | Edge Mobile ? | Firefox Android 完全対応 33 | Opera Android ? | Safari iOS 完全対応 8 | Samsung Internet Android ? |
RGBA hexadecimal notation (#RRGGBBAA, #RGBA) | Chrome
完全対応
62
| Edge 未対応 なし | Firefox 完全対応 49 | IE ? | Opera
完全対応
39
| Safari 完全対応 9.1 | WebView Android ? | Chrome Android ? | Edge Mobile 未対応 なし | Firefox Android ? | Opera Android 未対応 なし | Safari iOS ? | Samsung Internet Android ? |
| Space-separated functional color notations | Chrome 完全対応 65 | Edge ? | Firefox 完全対応 52 | IE ? | Opera 完全対応 52 | Safari ? | WebView Android 完全対応 65 | Chrome Android 完全対応 65 | Edge Mobile ? | Firefox Android 完全対応 52 | Opera Android 完全対応 52 | Safari iOS ? | Samsung Internet Android ? |
Allow floats in rgb() and rgba() | Chrome 完全対応 66 | Edge ? | Firefox 完全対応 52 | IE ? | Opera 完全対応 53 | Safari ? | WebView Android 完全対応 66 | Chrome Android 完全対応 66 | Edge Mobile ? | Firefox Android 完全対応 52 | Opera Android 完全対応 53 | Safari iOS ? | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
関連情報
opacityプロパティは要素レベルで色の透明度を定義できます。- このデータ型を使用するよく使われるプロパティ:
color,background-color,border-color,outline-color,text-shadow,box-shadow - CSS を使った HTML の要素への色の適用