--- a/master/types.html Thu May 10 12:00:41 2012 +0200
+++ b/master/types.html Thu May 10 12:09:49 2012 +0200
@@ -185,19 +185,24 @@
<h2 id="syntax">Syntax</h2>
- <p>The EBNF grammar is as used in the <a href="http://www.w3.org/TR/REC-xml/#sec-notation">XML specification</a>,
- with the addition of <strong>~</strong>, a <em>case-insensitive literal</em>: characters in the ASCII range (only) are declared to be case-insensitive. For example, ~"Hello" will match (H|h)(e|E)(l|L)(l|L)(o|O). This makes the productions much easier to read.</p>
- <table>
- <tr><td>?</td><td>optional, zero or one</td></tr>
- <tr><td>+</td><td>one or more</td></tr>
- <tr><td>*</td><td>zero or more</td></tr>
- <tr><td>|</td><td>alternation</td></tr>
- <tr><td>"string"</td><td>literal</td></tr>
- <tr><td>~"string"</td><td>case-insensitive literal</td></tr>
- <tr><td>[]</td><td>a character range</td></tr>
- <tr><td>[^]</td><td>excluded character range</td></tr>
- <tr><td>()</td><td>grouping</td></tr>
- </table>
+<p>The EBNF grammar is as used in the
+<a href="http://www.w3.org/TR/REC-xml/#sec-notation">XML specification</a>,
+with the addition of <strong>~</strong>, a <em>case-insensitive literal</em>:
+characters in the ASCII range (only) are declared to be case-insensitive. For
+example, ~"Hello" will match (H|h)(e|E)(l|L)(l|L)(o|O). This makes the
+productions much easier to read.</p>
+
+<table>
+ <tr><td>?</td><td>optional, zero or one</td></tr>
+ <tr><td>+</td><td>one or more</td></tr>
+ <tr><td>*</td><td>zero or more</td></tr>
+ <tr><td>|</td><td>alternation</td></tr>
+ <tr><td>"string"</td><td>literal</td></tr>
+ <tr><td>~"string"</td><td>case-insensitive literal</td></tr>
+ <tr><td>[]</td><td>a character range</td></tr>
+ <tr><td>[^]</td><td>excluded character range</td></tr>
+ <tr><td>()</td><td>grouping</td></tr>
+</table>
<h2 id="BasicDataTypes">Basic data types</h2>
@@ -205,8 +210,12 @@
of SVG properties and attributes. Some data types that are not referenced by
multiple properties and attributes are defined inline in subsequent chapters.</p>
- <p>Note that, as noted below, the specification of some types is different for CSS property values in style sheets (in the <a>'style attribute'</a> attribute,
- <a>'style element'</a> element or an external style sheet) than it is for for XML attribute values (including <a>presentation attribute</a>s). This is due to restrictions in the CSS grammar. For example, scientific notation is allowed in attributes, including presentation attributes, but not in style sheets.</p>
+<p>Note that, as mentioned below, the specification of some types is different
+for CSS property values in style sheets (in the <a>'style attribute'</a> attribute,
+<a>'style element'</a> element or an external style sheet) than it is for for
+XML attribute values (including <a>presentation attribute</a>s). This is due to
+restrictions in the CSS grammar. For example, scientific notation is allowed in
+attributes, including presentation attributes, but not in style sheets.</p>
<dl class='definitions'>
@@ -215,29 +224,32 @@
<p>Angles are specified in one of two ways depending upon whether
they are used in CSS <a>property</a> syntax or SVG <a>presentation attribute</a>
syntax:</p>
+
<ul>
<li>
- <p>When an <angle> is used in a style sheet or with a
- <a>property</a> in a <a>'style attribute'</a> attribute, the
- syntax must match the following pattern:</p>
- <pre class='grammar'><span id='Angle'>angle</span> ::= <a href='#DataTypeNumber'>number</a> (~"deg" | ~"grad" | ~"rad")?</pre>
- <p>where <span class='prop-value'>deg</span> indicates degrees,
- <span class='prop-value'>grad</span> indicates grads and
- <span class='prop-value'>rad</span> indicates radians.
- The unit identifier may be in lower (recommended) or upper case.</p>
- <p>For properties defined in CSS2
- [<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">CSS2</a>],
- an angle unit identifier must be provided (for non-zero
- values). For SVG-specific <a>properties</a> the angle unit
- identifier is optional. If a unit is not provided, the angle
- value is assumed to be in degrees.</p>
+ <p>When an <angle> is used in a style sheet or with a
+ <a>property</a> in a <a>'style attribute'</a> attribute, the
+ syntax must match the following pattern:</p>
+ <pre class='grammar'><span id='Angle'>angle</span> ::= <a href='#DataTypeNumber'>number</a> (~"deg" | ~"grad" | ~"rad")?</pre>
+ <p>where <span class='prop-value'>deg</span> indicates degrees,
+ <span class='prop-value'>grad</span> indicates grads and
+ <span class='prop-value'>rad</span> indicates radians.
+ The unit identifier may be in lower (recommended) or upper case.</p>
+ <p>For properties defined in CSS2
+ [<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">CSS2</a>],
+ an angle unit identifier must be provided (for non-zero
+ values). For SVG-specific <a>properties</a> the angle unit
+ identifier is optional. If a unit is not provided, the angle
+ value is assumed to be in degrees.</p>
</li>
<li>
- <p>When an <angle> is used in an SVG <a>presentation attribute</a>,
- the syntax must match the following pattern:</p>
- <pre class='grammar'>angle ::= <a href='#DataTypeNumber'>number</a> ("deg" | "grad" | "rad")?</pre>
- <p>The unit identifier, if present, must be in lower case; if
- not present, the angle value is assumed to be in degrees.</p>
+ <p>When an <angle> is used in an SVG <a>presentation attribute</a>,
+ the syntax must match the following pattern:</p>
+
+ <pre class='grammar'>angle ::= <a href='#DataTypeNumber'>number</a> ("deg" | "grad" | "rad")?</pre>
+
+ <p>The unit identifier, if present, must be in lower case; if
+ not present, the angle value is assumed to be in degrees.</p>
</li>
</ul>
<p>In the SVG DOM, <angle> values are represented using
@@ -248,7 +260,9 @@
<dd>
<p>The basic type <anything> is a sequence of zero or more characters.
Specifically:</p>
+
<pre class='grammar'><span id='Anything'>anything</span> ::= <a href='http://www.w3.org/TR/2008/REC-xml-20081126/#NT-Char'>Char</a>*</pre>
+
<p>where <a href='http://www.w3.org/TR/2008/REC-xml-20081126/#NT-Char'>Char</a> is the
production for a character, as defined in XML 1.0
([<a href='refs.html#ref-XML10'>XML10</a>], section 2.2).</p>
@@ -257,53 +271,57 @@
<dt id='DataTypeColor'><color></dt>
<dd>
<p>The basic type <color> is a CSS2 compatible specification for a
- color in the sRGB color space [<a href="refs.html#ref-SRGB">SRGB</a>].
- <color> applies to SVG's use of the <a>'color'</a> property and
- is a component of the definitions of properties <a>'fill'</a>,
- <a>'stroke'</a>, <a>'stop-color'</a>, <a>'flood-color'</a> and
- <a>'lighting-color'</a>, which also offer optional ICC-based color
- specifications.</p>
+ color in the sRGB color space [<a href="refs.html#ref-SRGB">SRGB</a>].
+ <color> applies to SVG's use of the <a>'color'</a> property and
+ is a component of the definitions of properties <a>'fill'</a>,
+ <a>'stroke'</a>, <a>'stop-color'</a>, <a>'flood-color'</a> and
+ <a>'lighting-color'</a>, which also offer optional ICC-based color
+ specifications.</p>
+
<p>SVG supports all of the syntax alternatives for <color> defined in
- <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color'>CSS2
- syntax and basic data types</a> ([<a href='refs.html#ref-CSS2'>CSS2</a>],
- section 4.3.6), with the exception that SVG allows an expanded list of
- <a href="types.html#ColorKeywords">recognized color keywords names</a>.</p>
+ <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color'>CSS2
+ syntax and basic data types</a> ([<a href='refs.html#ref-CSS2'>CSS2</a>],
+ section 4.3.6), with the exception that SVG allows an expanded list of
+ <a href="types.html#ColorKeywords">recognized color keywords names</a>.</p>
+
<p>A <color> is either a keyword (see
- <a href="types.html#ColorKeywords">Recognized color keyword names</a>) or a
- numerical RGB specification.</p>
+ <a href="types.html#ColorKeywords">Recognized color keyword names</a>) or a
+ numerical RGB specification.</p>
+
<p>In addition to these color keywords, users may specify
- keywords that correspond to the colors used by objects in the
- user's environment. The normative definition of these
- keywords is found in
- <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors'>User preferences
- for colors</a> ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 18.2).</p>
+ keywords that correspond to the colors used by objects in the
+ user's environment. The normative definition of these
+ keywords is found in
+ <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors'>User preferences
+ for colors</a> ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 18.2).</p>
+
<p>The format of an RGB value in hexadecimal notation is a "#"
- immediately followed by either three or six hexadecimal
- characters. The three-digit RGB notation (#rgb) is converted
- into six-digit form (#rrggbb) by replicating digits, not by
- adding zeros. For example, <span class='attr-value'>#fb0</span>
- expands to <span class='attr-value'>#ffbb00</span>. This
- ensures that white (<span class='attr-value'>#ffffff</span>) can be
- specified with the short notation (<span class='attr-value'>#fff</span>)
- and removes any dependencies on the color depth of the display.
+ immediately followed by either three or six hexadecimal
+ characters. The three-digit RGB notation (#rgb) is converted
+ into six-digit form (#rrggbb) by replicating digits, not by
+ adding zeros. For example, <span class='attr-value'>#fb0</span>
+ expands to <span class='attr-value'>#ffbb00</span>. This
+ ensures that white (<span class='attr-value'>#ffffff</span>) can be
+ specified with the short notation (<span class='attr-value'>#fff</span>)
+ and removes any dependencies on the color depth of the display.</p>
- The format of an RGB value in the
- functional notation is an RGB start-function followed by a comma-separated
- list of three numerical values (either three integer values
- or three percentage values) followed by ")".
- An RGB start-function is the case-insensitive string "rgb(", for example "RGB(" or "rGb(".
- For compatibility, the all-lowercase form "rgb(" is preferred.
+ <p>The format of an RGB value in the
+ functional notation is an RGB start-function followed by a comma-separated
+ list of three numerical values (either three integer values
+ or three percentage values) followed by ")".
+ An RGB start-function is the case-insensitive string "rgb(", for example "RGB(" or "rGb(".
+ For compatibility, the all-lowercase form "rgb(" is preferred.</p>
- The integer
- value 255 corresponds to 100%, and to F or FF in the
- hexadecimal notation: <span class='attr-value'>rgb(255,255,255)</span>
- = <span class='attr-value'>rgb(100%,100%,100%)</span>
- = <span class='attr-value'>#FFF</span>. White space characters are allowed
- around the numerical values. All RGB colors are specified in the sRGB
- color space [<a href="refs.html#ref-SRGB">SRGB</a>]. Using
- sRGB provides an unambiguous and objectively measurable definition
- of the color, which can be related to international standards
- (see [<a href="refs.html#ref-COLORIMETRY">COLORIMETRY</a>]).</p>
+ <p>The integer value 255 corresponds to 100%, and to F or FF in the
+ hexadecimal notation: <span class='attr-value'>rgb(255,255,255)</span>
+ = <span class='attr-value'>rgb(100%,100%,100%)</span>
+ = <span class='attr-value'>#FFF</span>. White space characters are allowed
+ around the numerical values. All RGB colors are specified in the sRGB
+ color space [<a href="refs.html#ref-SRGB">SRGB</a>]. Using
+ sRGB provides an unambiguous and objectively measurable definition
+ of the color, which can be related to international standards
+ (see [<a href="refs.html#ref-COLORIMETRY">COLORIMETRY</a>]).</p>
+
<pre class='grammar'><span id='Color'>color</span> ::= "#" <a href='#HexDigit'>hexdigit</a> <a href='#HexDigit'>hexdigit</a> <a href='#HexDigit'>hexdigit</a> (<a href='#HexDigit'>hexdigit</a> <a href='#HexDigit'>hexdigit</a> <a href='#HexDigit'>hexdigit</a>)?
| "rgb(" <a href='#WSP'>wsp</a>* <a href='#Integer'>integer</a> <a href='#Comma'>comma</a> <a href='#Integer'>integer</a> <a href='#Comma'>comma</a> <a href='#Integer'>integer</a> <a href='#WSP'>wsp</a>* ")"
| "rgb(" <a href='#WSP'>wsp</a>* <a href='#Integer'>integer</a> "%" <a href='#Comma'>comma</a> <a href='#Integer'>integer</a> "%" <a href='#Comma'>comma</a> <a href='#Integer'>integer</a> "%" <a href='#WSP'>wsp</a>* ")"
@@ -311,53 +329,59 @@
<span id='HexDigit'>hexdigit</span> ::= [0-9A-Fa-f]
<span id='Comma'>comma</span> ::= <a href='#WSP'>wsp</a>* "," <a href='#WSP'>wsp</a>*
</pre>
+
<p>where <var>color-keyword</var> matches (case insensitively) one of the
- color keywords listed in <a href="#ColorKeywords">Recognized color keyword names</a>
- below, or one of the system color keywords listed in
- <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors'>User preferences
- for colors</a> ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 18.2).</p>
+ color keywords listed in <a href="#ColorKeywords">Recognized color keyword names</a>
+ below, or one of the system color keywords listed in
+ <a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors'>User preferences
+ for colors</a> ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 18.2).</p>
+
<p>The corresponding SVG DOM interface definitions for
- <color> are defined in
- <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html">Document Object Model CSS</a>;
- in particular, see <a>RGBColor</a>
- ([<a href='refs.html#ref-DOM2STYLE'>DOM2STYLE</a>], section 2.2).
- SVG's extension to color, including the ability to specify ICC-based colors,
- are represented using DOM interface <a>SVGColor</a>.</p>
+ <color> are defined in
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html">Document Object Model CSS</a>;
+ in particular, see <a>RGBColor</a>
+ ([<a href='refs.html#ref-DOM2STYLE'>DOM2STYLE</a>], section 2.2).
+ SVG's extension to color, including the ability to specify ICC-based colors,
+ are represented using DOM interface <a>SVGColor</a>.</p>
</dd>
<dt id='DataTypeCoordinate'><coordinate></dt>
<dd>
<p>A <coordinate> is a length in the user coordinate system that is
- the given distance from the origin of the user coordinate system along the
- relevant axis (the x-axis for X coordinates, the y-axis for Y
- coordinates). Its syntax is the same as that for
- <a href='#DataTypeLength'><length></a>.</p>
+ the given distance from the origin of the user coordinate system along the
+ relevant axis (the x-axis for X coordinates, the y-axis for Y
+ coordinates). Its syntax is the same as that for
+ <a href='#DataTypeLength'><length></a>.</p>
+
<pre>coordinate ::= <a href='#Length'>length</a></pre>
+
<p>Within the SVG DOM, a <coordinate> is represented as
- an <a>SVGLength</a> or an <a>SVGAnimatedLength</a>.</p>
+ an <a>SVGLength</a> or an <a>SVGAnimatedLength</a>.</p>
</dd>
<dt id="DataTypeFrequency"><frequency></dt>
<dd>
<p>Frequency values are used with aural properties. As defined in
- CSS2, a frequency value is a <number> immediately followed
- by a frequency unit identifier. The frequency unit identifiers
- are:</p>
+ CSS2, a frequency value is a <number> immediately followed
+ by a frequency unit identifier. The frequency unit identifiers
+ are:</p>
+
<ul>
<li><span class="attr-value">Hz</span>: Hertz</li>
<li><span class="attr-value">kHz</span>: kilo Hertz</li>
</ul>
+
<p>Frequency values may not be negative.</p>
+
<p>In the SVG DOM, <frequency> values are represented
- using the <a>CSSPrimitiveValue</a>
- interface defined in <a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html'>Document Object Model CSS</a>
- ([<a href='refs.html#ref-DOM2STYLE'>DOM2STYLE</a>], section 2.2).</p>
+ using the <a>CSSPrimitiveValue</a>
+ interface defined in <a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html'>Document Object Model CSS</a>
+ ([<a href='refs.html#ref-DOM2STYLE'>DOM2STYLE</a>], section 2.2).</p>
</dd>
<dt id='DataTypeFuncIRI'><FuncIRI></dt>
- <dd>Functional notation for an <a>IRI</a>: "url(" <a href="#DataTypeIRI"><IRI></a> ")".
- </dd>
+ <dd>Functional notation for an <a>IRI</a>: "url(" <a href="#DataTypeIRI"><IRI></a> ")".</dd>
<dt id='DataTypeICCColor'><icccolor></dt>
<dd>
@@ -365,8 +389,10 @@
an ICC color specification is given by a name, which references
a <a>'color-profile element'</a> element, and one or more color component
values. The grammar is as follows:</p>
+
<pre class='grammar'><span id='ICCColor'>icccolor</span> ::= "icc-color(" <a href='#Name'>name</a> (<a href='#CommaWSP'>comma-wsp</a> <a href='#Number'>number</a>)+ ")"
name ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */</pre>
+
<p>The corresponding SVG DOM interface for <icccolor> is
<a>SVGICCColor</a>.</p>
</dd>
@@ -375,11 +401,15 @@
<dd>
<p>An <integer> is specified as an optional sign character ("+" or
"-") followed by one or more digits "0" to "9":</p>
+
<pre class='grammar'><span id='Integer'>integer</span> ::= [+-]? [0-9]+</pre>
+
<p>If the sign character is not present, the number is non-negative.</p>
+
<p>Unless stated otherwise for a particular attribute or
<a>property</a>, the range for an <integer> encompasses (at a
minimum) -2147483648 to 2147483647.</p>
+
<p>Within the SVG DOM, an <integer> is represented as a
<span class="DOMInterfaceName">long</span> or an
<a>SVGAnimatedInteger</a>.</p>
@@ -387,76 +417,69 @@
<dt id='DataTypeIRI'><IRI></dt>
<dd>
- <p>
- An Internationalized Resource Identifier (see <a>IRI</a>).
- For the specification of <a>IRI</a> references in SVG, see
- <a href="linking.html#IRIReference">IRI references</a>.
- </p>
+ <p>An Internationalized Resource Identifier (see <a>IRI</a>).
+ For the specification of <a>IRI</a> references in SVG, see
+ <a href="linking.html#IRIReference">IRI references</a>.</p>
</dd>
-
<dt id="DataTypeLength"><length></dt>
<dd>
-
<p>A length is a distance measurement, given as a number along with a unit
which may be optional. Lengths are specified in one of two ways depending
upon whether they are used in CSS <a>property</a> syntax or SVG
<a>presentation attribute</a> syntax:</p>
- <ul>
- <li>
- <p>When a <length> is used in a style sheet or with a
- <a>property</a> in a <a>'style attribute'</a> attribute, the
- syntax must match the following pattern:</p>
- <pre class='grammar'><span id='Length'>length</span> ::= <a href='#DataTypeNumber'>number</a> (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?</pre>
- <p><a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units'>See
- the CSS2 specification</a> for the meanings of the unit
- identifiers. The unit identifier may be in lower (recommended)
- or upper case.</p>
- <p>For properties defined in CSS2
- [<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">CSS2</a>],
- a length unit identifier must be provided (for non-zero values).
- For SVG-specific <a>properties</a>, the length unit identifier
- is optional. If a unit is not provided, the length value
- represents a distance in the current user coordinate system.</p>
- </li>
- <li>
- <p>When a <length> is used in an SVG <a>presentation attribute</a>,
- the syntax must match the following pattern:</p>
- <pre class='grammar'>length ::= <a href='#DataTypeNumber'>number</a> ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?</pre>
- <p>The unit identifier, if present, must be in lower case; if
- not present, the length value represents a distance in the
- current user coordinate system.</p>
+ <ul>
+ <li>
+ <p>When a <length> is used in a style sheet or with a
+ <a>property</a> in a <a>'style attribute'</a> attribute, the
+ syntax must match the following pattern:</p>
- <p>Note that the non-property <length> definition also
- allows a percentage unit identifier. The meaning of a
- percentage length value depends on the attribute for which the
- percentage length value has been specified. Two common cases
- are: (a) when a percentage length value represents a percentage
- of the viewport width or height (refer to <a
- href='coords.html#Units'>the section that discusses units in
- general</a>), and (b) when a percentage length value represents
- a percentage of the bounding box width or height on a given
- object (refer to <a href='coords.html#ObjectBoundingBox'>the
- section that describes object bounding box units</a>).</p>
+ <pre class='grammar'><span id='Length'>length</span> ::= <a href='#DataTypeNumber'>number</a> (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?</pre>
- </li>
+ <p><a href='http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units'>See
+ the CSS2 specification</a> for the meanings of the unit
+ identifiers. The unit identifier may be in lower (recommended)
+ or upper case.</p>
+
+ <p>For properties defined in CSS2
+ [<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">CSS2</a>],
+ a length unit identifier must be provided (for non-zero values).
+ For SVG-specific <a>properties</a>, the length unit identifier
+ is optional. If a unit is not provided, the length value
+ represents a distance in the current user coordinate system.</p>
+ </li>
+ <li>
+ <p>When a <length> is used in an SVG <a>presentation attribute</a>,
+ the syntax must match the following pattern:</p>
+ <pre class='grammar'>length ::= <a href='#DataTypeNumber'>number</a> ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?</pre>
+ <p>The unit identifier, if present, must be in lower case; if
+ not present, the length value represents a distance in the
+ current user coordinate system.</p>
+
+ <p>Note that the non-property <length> definition also
+ allows a percentage unit identifier. The meaning of a
+ percentage length value depends on the attribute for which the
+ percentage length value has been specified. Two common cases
+ are: (a) when a percentage length value represents a percentage
+ of the viewport width or height (refer to <a
+ href='coords.html#Units'>the section that discusses units in
+ general</a>), and (b) when a percentage length value represents
+ a percentage of the bounding box width or height on a given
+ object (refer to <a href='coords.html#ObjectBoundingBox'>the
+ section that describes object bounding box units</a>).</p>
+ </li>
</ul>
<p>In the SVG DOM, <length> values are represented using
- <a>SVGLength</a> or <a>SVGAnimatedLength</a> objects.</p>
+ <a>SVGLength</a> or <a>SVGAnimatedLength</a> objects.</p>
</dd>
-
<dt id="DataTypeListOfFamilyNames"><list-of-family-names></dt>
- <dd>
- <p>
- A <list-of-family-names> is a list of font family names using the same syntax
- as the <a href='text.html#FontFamilyProperty'><span class='property'>'font-family'</span></a>
- property, excluding the <generic-family> and <span class='attr-value'>'inherit'</span>
- values.
- </p>
- </dd>
+ <dd>A <list-of-family-names> is a list of font family names using the same syntax
+ as the <a href='text.html#FontFamilyProperty'><span class='property'>'font-family'</span></a>
+ property, excluding the <generic-family> and <span class='attr-value'>'inherit'</span>
+ values.</dd>
<!--
<dt id="DataTypeListOfLanguageIDs"><list-of-language-ids></dt>
@@ -471,16 +494,13 @@
<dt id="DataTypeListOfStrings"><list-of-strings></dt>
<dd>
- <p>
- A <list-of-strings> consists of a separated sequence of <string>s.
- String lists are white space-separated, where white space is defined as one or more of the
- following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A) and
- "carriage return" (U+000D).
- </p>
- <p>
- The following is an EBNF grammar describing the <list-of-strings>
- syntax:
- </p>
+ <p>A <list-of-strings> consists of a separated sequence of <string>s.
+ String lists are white space-separated, where white space is defined as one or more of the
+ following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A) and
+ "carriage return" (U+000D).</p>
+
+ <p>The following is an EBNF grammar describing the <list-of-strings> syntax:</p>
+
<pre>
list-of-strings ::= string
| string wsp list-of-strings
@@ -502,24 +522,27 @@
</dt>
<dd>
<p>(Where <var>T</var> is a type other than
- <string><!--,
- <a href='#DataTypeLanguageID'><language-id></a>--> and
- <family-name>.)
- A list consists of a
- separated sequence of values. Unless explicitly described
+ <string><!--,
+ <a href='#DataTypeLanguageID'><language-id></a>--> and
+ <family-name>.)
+ A list consists of a separated sequence of values. Unless explicitly described
differently, lists within SVG's XML attributes can be either
comma-separated, with optional white space before or after the comma,
or white space-separated.</p>
+
<p>White space in lists is defined as one or more of the
following consecutive characters: "space" (U+0020), "tab" (U+0009),
"line feed" (U+000A), "carriage return" (U+000D)
and "form-feed" (U+000C).</p>
+
<p>The following is a template for an EBNF grammar describing the
<list-of-<var>T</var>s> syntax:</p>
+
<pre class='grammar'><span id='ListOfTs'>list-of-<var>T</var>s</span> ::= <var>T</var>
| <var>T</var> <a href='#CommaWSP'>comma-wsp</a> <a href='#ListOfTs'>list-of-<var>T</var>s</a>
<span id='CommaWSP'>comma-wsp</span> ::= (<a href='#WSP'>wsp</a>+ ","? <a href='#WSP'>wsp</a>*) | ("," <a href='#WSP'>wsp</a>*)
<span id='WSP'>wsp</span> ::= (#x20 | #x9 | #xD | #xA)</pre>
+
<p>Within the SVG DOM, values of a <list-of-<var>T</var>s>
type are represented by an interface specific for the
particular type <var>T</var>. For example, a <list-of-lengths>
@@ -530,33 +553,42 @@
<dt id="DataTypeName"><name></dt>
<dd>
<p>A name, which is a string where a few characters of syntactic significance are disallowed.</p>
- <pre class="grammar"><span id="Name">name</span> ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */</pre></dd>
+
+ <pre class="grammar"><span id="Name">name</span> ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */</pre>
+ </dd>
<dt id='DataTypeNumber'><number></dt>
<dd>
<p>Real numbers are specified in one of two ways. When used in a style sheet,
a <number> is defined as follows:</p>
+
<pre class='grammar'><span id='Number'>number</span> ::= <a href='#Integer'>integer</a>
| [+-]? [0-9]* "." [0-9]+</pre>
+
<p>This syntax is the same as the definition in CSS
- ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 4.3.1).</p>
+ ([<a href='refs.html#ref-CSS2'>CSS2</a>], section 4.3.1).</p>
+
<p>When used in an SVG attribute,
a <number> is defined differently, to allow numbers with large magnitudes
to be specified more concisely:</p>
+
<pre class='grammar'>number ::= <a href='#Integer'>integer</a> ([Ee] <a href='#DataTypeInteger'>integer</a>)?
| [+-]? [0-9]* "." [0-9]+ ([Ee] <a href='#DataTypeInteger'>integer</a>)?</pre>
+
<p>Within the SVG DOM, a <number> is represented as a
- <span class="DOMInterfaceName">float</span>, <a>SVGNumber</a> or a
- <a>SVGAnimatedNumber</a>.</p>
+ <span class="DOMInterfaceName">float</span>, <a>SVGNumber</a> or a
+ <a>SVGAnimatedNumber</a>.</p>
</dd>
<dt id='DataTypeNumberOptionalNumber'><number-optional-number></dt>
<dd>
<p>A pair of <a><number></a>s, where the second
<a><number></a> is optional.</p>
+
<pre class='grammar'>
number-optional-number ::= <a href='#DataTypeNumber'>number</a>
| <a href='#DataTypeNumber'>number</a> <a href='#CommaWSP'>comma-wsp</a> <a href='#DataTypeNumber'>number</a></pre>
+
<p>In the SVG DOM, a <number-optional-number> is represented
using a pair of <a>SVGAnimatedInteger</a> or <a>SVGAnimatedNumber</a>
objects.</p>
@@ -569,6 +601,7 @@
a given graphics element. The available options and syntax for
<paint> are described in
<a href="painting.html#SpecifyingPaint">Specifying paint</a>.</p>
+
<p>Within the SVG DOM, <paint> values are represented using
<a>SVGPaint</a> objects.</p>
</dd>
@@ -576,14 +609,18 @@
<dt id="DataTypePercentage"><percentage></dt>
<dd>
<p>Percentages are specified as a number followed by a "%" character:</p>
+
<pre class='grammar'><span id='Percentage'>percentage</span> ::= <a href='#Number'>number</a> "%"</pre>
+
<p>Note that the definition of <a href='#Number'><number></a> depends
on whether the percentage is specified in a style sheet or in an
attribute that is not also a <a>presentation attribute</a>.</p>
+
<p>Percentage values are always relative to another value, for example a
length. Each attribute or <a>property</a> that allows percentages also
defines the reference distance measurement to which the percentage
refers.</p>
+
<p>Within the SVG DOM, a <percentage> is
represented using an <a>SVGNumber</a> or <a>SVGAnimatedNumber</a>
object.</p>
@@ -592,15 +629,17 @@
<dt id='DataTypeTime'><time></dt>
<dd>
<p>A time value is a <number> immediately followed by a time unit
- identifier. The time unit identifiers are: </p>
+ identifier. The time unit identifiers are: </p>
+
<ul>
<li><span class="attr-value">ms</span>: milliseconds</li>
<li><span class="attr-value">s</span>: seconds</li>
</ul>
+
<p>In the SVG DOM, <time> values are represented
- using the <a>CSSPrimitiveValue</a>
- interface defined in <a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html'>Document Object Model CSS</a>
- ([<a href='refs.html#ref-DOM2STYLE'>DOM2STYLE</a>], section 2.2).</p>
+ using the <a>CSSPrimitiveValue</a>
+ interface defined in <a href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html'>Document Object Model CSS</a>
+ ([<a href='refs.html#ref-DOM2STYLE'>DOM2STYLE</a>], section 2.2).</p>
</dd>
<dt id="DataTypeTransformList"><transform-list></dt>
@@ -609,7 +648,8 @@
transformations. A detailed description of the possible values for a
<transform-list> is given in
<a href="coords.html#TransformAttribute">Modifying the User Coordinate
- System: the transform attribute</a>.</p>
+ System: the transform attribute</a>.</p>
+
<p>Within the SVG DOM, a <transform-list> value is represented using
an <a>SVGTransformList</a> or <a>SVGAnimatedTransformList</a>
object.</p>
@@ -630,12 +670,10 @@
<dt id="DataTypeXML-Name"><XML-Name></dt>
<dd>
- <p>
- An XML name, as defined by the
- <a href="http://www.w3.org/TR/2006/REC-xml-20060816/#NT-Name">Name</a>
- production in
- <a href="http://www.w3.org/TR/2006/REC-xml-20060816/"><cite>Extensible Markup Language (XML) 1.0</cite></a> ([<a href="refs.html#ref-XML10">XML10</a>], section 2.3).
- </p>
+ <p>An XML name, as defined by the
+ <a href="http://www.w3.org/TR/2006/REC-xml-20060816/#NT-Name">Name</a>
+ production in
+ <a href="http://www.w3.org/TR/2006/REC-xml-20060816/"><cite>Extensible Markup Language (XML) 1.0</cite></a> ([<a href="refs.html#ref-XML10">XML10</a>], section 2.3).</p>
</dd>
</dl>
@@ -656,769 +694,771 @@
High-Quality SVG Viewers</a> are required to use at least double-precision
floating point for intermediate calculations on certain numerical operations.</p>
- <h2 id="ColorKeywords">Recognized color keyword names</h2>
- <p>The following is the list of recognized color keywords that
- can be used as a keyword value for data type <a
- href="types.html#DataTypeColor"><color></a>:</p>
- <table class="color-keywords" summary="color keywords">
- <tr>
- <td>
- <table summary="color keywords part 1">
- <tr>
- <td><div class="colorpatch aliceblue"></div></td>
- <td><span class="prop-value">aliceblue</span></td>
- <td><span class="color-keyword-value">rgb(240, 248, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch antiquewhite"></div></td>
- <td><span class="prop-value">antiquewhite</span></td>
- <td><span class="color-keyword-value">rgb(250, 235, 215)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch aqua"></div></td>
- <td><span class="prop-value">aqua</span></td>
- <td><span class="color-keyword-value">rgb( 0, 255, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch aquamarine"></div></td>
- <td><span class="prop-value">aquamarine</span></td>
- <td><span class="color-keyword-value">rgb(127, 255, 212)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch azure"></div></td>
- <td><span class="prop-value">azure</span></td>
- <td><span class="color-keyword-value">rgb(240, 255, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch beige"></div></td>
- <td><span class="prop-value">beige</span></td>
- <td><span class="color-keyword-value">rgb(245, 245, 220)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch bisque"></div></td>
- <td><span class="prop-value">bisque</span></td>
- <td><span class="color-keyword-value">rgb(255, 228, 196)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch black"></div></td>
- <td><span class="prop-value">black</span></td>
- <td><span class="color-keyword-value">rgb( 0, 0, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch blanchedalmond"></div></td>
- <td><span class="prop-value">blanchedalmond</span></td>
- <td><span class="color-keyword-value">rgb(255, 235, 205)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch blue"></div></td>
- <td><span class="prop-value">blue</span></td>
- <td><span class="color-keyword-value">rgb( 0, 0, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch blueviolet"></div></td>
- <td><span class="prop-value">blueviolet</span></td>
- <td><span class="color-keyword-value">rgb(138, 43, 226)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch brown"></div></td>
- <td><span class="prop-value">brown</span></td>
- <td><span class="color-keyword-value">rgb(165, 42, 42)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch burlywood"></div></td>
- <td><span class="prop-value">burlywood</span></td>
- <td><span class="color-keyword-value">rgb(222, 184, 135)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch cadetblue"></div></td>
- <td><span class="prop-value">cadetblue</span></td>
- <td><span class="color-keyword-value">rgb( 95, 158, 160)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch chartreuse"></div></td>
- <td><span class="prop-value">chartreuse</span></td>
- <td><span class="color-keyword-value">rgb(127, 255, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch chocolate"></div></td>
- <td><span class="prop-value">chocolate</span></td>
- <td><span class="color-keyword-value">rgb(210, 105, 30)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch coral"></div></td>
- <td><span class="prop-value">coral</span></td>
- <td><span class="color-keyword-value">rgb(255, 127, 80)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch cornflowerblue"></div></td>
- <td><span class="prop-value">cornflowerblue</span></td>
- <td><span class="color-keyword-value">rgb(100, 149, 237)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch cornsilk"></div></td>
- <td><span class="prop-value">cornsilk</span></td>
- <td><span class="color-keyword-value">rgb(255, 248, 220)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch crimson"></div></td>
- <td><span class="prop-value">crimson</span></td>
- <td><span class="color-keyword-value">rgb(220, 20, 60)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch cyan"></div></td>
- <td><span class="prop-value">cyan</span></td>
- <td><span class="color-keyword-value">rgb( 0, 255, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkblue"></div></td>
- <td><span class="prop-value">darkblue</span></td>
- <td><span class="color-keyword-value">rgb( 0, 0, 139)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkcyan"></div></td>
- <td><span class="prop-value">darkcyan</span></td>
- <td><span class="color-keyword-value">rgb( 0, 139, 139)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkgoldenrod"></div></td>
- <td><span class="prop-value">darkgoldenrod</span></td>
- <td><span class="color-keyword-value">rgb(184, 134, 11)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkgray"></div></td>
- <td><span class="prop-value">darkgray</span></td>
- <td><span class="color-keyword-value">rgb(169, 169, 169)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkgreen"></div></td>
- <td><span class="prop-value">darkgreen</span></td>
- <td><span class="color-keyword-value">rgb( 0, 100, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkgrey"></div></td>
- <td><span class="prop-value">darkgrey</span></td>
- <td><span class="color-keyword-value">rgb(169, 169, 169)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkkhaki"></div></td>
- <td><span class="prop-value">darkkhaki</span></td>
- <td><span class="color-keyword-value">rgb(189, 183, 107)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkmagenta"></div></td>
- <td><span class="prop-value">darkmagenta</span></td>
- <td><span class="color-keyword-value">rgb(139, 0, 139)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkolivegreen"></div></td>
- <td><span class="prop-value">darkolivegreen</span></td>
- <td><span class="color-keyword-value">rgb( 85, 107, 47)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkorange"></div></td>
- <td><span class="prop-value">darkorange</span></td>
- <td><span class="color-keyword-value">rgb(255, 140, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkorchid"></div></td>
- <td><span class="prop-value">darkorchid</span></td>
- <td><span class="color-keyword-value">rgb(153, 50, 204)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkred"></div></td>
- <td><span class="prop-value">darkred</span></td>
- <td><span class="color-keyword-value">rgb(139, 0, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darksalmon"></div></td>
- <td><span class="prop-value">darksalmon</span></td>
- <td><span class="color-keyword-value">rgb(233, 150, 122)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkseagreen"></div></td>
- <td><span class="prop-value">darkseagreen</span></td>
- <td><span class="color-keyword-value">rgb(143, 188, 143)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkslateblue"></div></td>
- <td><span class="prop-value">darkslateblue</span></td>
- <td><span class="color-keyword-value">rgb( 72, 61, 139)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkslategray"></div></td>
- <td><span class="prop-value">darkslategray</span></td>
- <td><span class="color-keyword-value">rgb( 47, 79, 79)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkslategrey"></div></td>
- <td><span class="prop-value">darkslategrey</span></td>
- <td><span class="color-keyword-value">rgb( 47, 79, 79)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkturquoise"></div></td>
- <td><span class="prop-value">darkturquoise</span></td>
- <td><span class="color-keyword-value">rgb( 0, 206, 209)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch darkviolet"></div></td>
- <td><span class="prop-value">darkviolet</span></td>
- <td><span class="color-keyword-value">rgb(148, 0, 211)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch deeppink"></div></td>
- <td><span class="prop-value">deeppink</span></td>
- <td><span class="color-keyword-value">rgb(255, 20, 147)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch deepskyblue"></div></td>
- <td><span class="prop-value">deepskyblue</span></td>
- <td><span class="color-keyword-value">rgb( 0, 191, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch dimgray"></div></td>
- <td><span class="prop-value">dimgray</span></td>
- <td><span class="color-keyword-value">rgb(105, 105, 105)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch dimgrey"></div></td>
- <td><span class="prop-value">dimgrey</span></td>
- <td><span class="color-keyword-value">rgb(105, 105, 105)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch dodgerblue"></div></td>
- <td><span class="prop-value">dodgerblue</span></td>
- <td><span class="color-keyword-value">rgb( 30, 144, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch firebrick"></div></td>
- <td><span class="prop-value">firebrick</span></td>
- <td><span class="color-keyword-value">rgb(178, 34, 34)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch floralwhite"></div></td>
- <td><span class="prop-value">floralwhite</span></td>
- <td><span class="color-keyword-value">rgb(255, 250, 240)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch forestgreen"></div></td>
- <td><span class="prop-value">forestgreen</span></td>
- <td><span class="color-keyword-value">rgb( 34, 139, 34)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch fuchsia"></div></td>
- <td><span class="prop-value">fuchsia</span></td>
- <td><span class="color-keyword-value">rgb(255, 0, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch gainsboro"></div></td>
- <td><span class="prop-value">gainsboro</span></td>
- <td><span class="color-keyword-value">rgb(220, 220, 220)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch ghostwhite"></div></td>
- <td><span class="prop-value">ghostwhite</span></td>
- <td><span class="color-keyword-value">rgb(248, 248, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch gold"></div></td>
- <td><span class="prop-value">gold</span></td>
- <td><span class="color-keyword-value">rgb(255, 215, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch goldenrod"></div></td>
- <td><span class="prop-value">goldenrod</span></td>
- <td><span class="color-keyword-value">rgb(218, 165, 32)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch gray"></div></td>
- <td><span class="prop-value">gray</span></td>
- <td><span class="color-keyword-value">rgb(128, 128, 128)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch grey"></div></td>
- <td><span class="prop-value">grey</span></td>
- <td><span class="color-keyword-value">rgb(128, 128, 128)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch green"></div></td>
- <td><span class="prop-value">green</span></td>
- <td><span class="color-keyword-value">rgb( 0, 128, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch greenyellow"></div></td>
- <td><span class="prop-value">greenyellow</span></td>
- <td><span class="color-keyword-value">rgb(173, 255, 47)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch honeydew"></div></td>
- <td><span class="prop-value">honeydew</span></td>
- <td><span class="color-keyword-value">rgb(240, 255, 240)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch hotpink"></div></td>
- <td><span class="prop-value">hotpink</span></td>
- <td><span class="color-keyword-value">rgb(255, 105, 180)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch indianred"></div></td>
- <td><span class="prop-value">indianred</span></td>
- <td><span class="color-keyword-value">rgb(205, 92, 92)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch indigo"></div></td>
- <td><span class="prop-value">indigo</span></td>
- <td><span class="color-keyword-value">rgb( 75, 0, 130)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch ivory"></div></td>
- <td><span class="prop-value">ivory</span></td>
- <td><span class="color-keyword-value">rgb(255, 255, 240)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch khaki"></div></td>
- <td><span class="prop-value">khaki</span></td>
- <td><span class="color-keyword-value">rgb(240, 230, 140)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lavender"></div></td>
- <td><span class="prop-value">lavender</span></td>
- <td><span class="color-keyword-value">rgb(230, 230, 250)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lavenderblush"></div></td>
- <td><span class="prop-value">lavenderblush</span></td>
- <td><span class="color-keyword-value">rgb(255, 240, 245)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lawngreen"></div></td>
- <td><span class="prop-value">lawngreen</span></td>
- <td><span class="color-keyword-value">rgb(124, 252, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lemonchiffon"></div></td>
- <td><span class="prop-value">lemonchiffon</span></td>
- <td><span class="color-keyword-value">rgb(255, 250, 205)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightblue"></div></td>
- <td><span class="prop-value">lightblue</span></td>
- <td><span class="color-keyword-value">rgb(173, 216, 230)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightcoral"></div></td>
- <td><span class="prop-value">lightcoral</span></td>
- <td><span class="color-keyword-value">rgb(240, 128, 128)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightcyan"></div></td>
- <td><span class="prop-value">lightcyan</span></td>
- <td><span class="color-keyword-value">rgb(224, 255, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightgoldenrodyellow"></div></td>
- <td><span class="prop-value">lightgoldenrodyellow</span></td>
- <td><span class="color-keyword-value">rgb(250, 250, 210)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightgray"></div></td>
- <td><span class="prop-value">lightgray</span></td>
- <td><span class="color-keyword-value">rgb(211, 211, 211)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightgreen"></div></td>
- <td><span class="prop-value">lightgreen</span></td>
- <td><span class="color-keyword-value">rgb(144, 238, 144)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightgrey"></div></td>
- <td><span class="prop-value">lightgrey</span></td>
- <td><span class="color-keyword-value">rgb(211, 211, 211)</span></td>
- </tr>
- </table>
- </td>
- <td> </td>
- <td>
- <table summary="color keywords part 2">
- <tr>
- <td><div class="colorpatch lightpink"></div></td>
- <td><span class="prop-value">lightpink</span></td>
- <td><span class="color-keyword-value">rgb(255, 182, 193)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightsalmon"></div></td>
- <td><span class="prop-value">lightsalmon</span></td>
- <td><span class="color-keyword-value">rgb(255, 160, 122)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightseagreen"></div></td>
- <td><span class="prop-value">lightseagreen</span></td>
- <td><span class="color-keyword-value">rgb( 32, 178, 170)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightskyblue"></div></td>
- <td><span class="prop-value">lightskyblue</span></td>
- <td><span class="color-keyword-value">rgb(135, 206, 250)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightslategray"></div></td>
- <td><span class="prop-value">lightslategray</span></td>
- <td><span class="color-keyword-value">rgb(119, 136, 153)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightslategrey"></div></td>
- <td><span class="prop-value">lightslategrey</span></td>
- <td><span class="color-keyword-value">rgb(119, 136, 153)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightsteelblue"></div></td>
- <td><span class="prop-value">lightsteelblue</span></td>
- <td><span class="color-keyword-value">rgb(176, 196, 222)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lightyellow"></div></td>
- <td><span class="prop-value">lightyellow</span></td>
- <td><span class="color-keyword-value">rgb(255, 255, 224)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch lime"></div></td>
- <td><span class="prop-value">lime</span></td>
- <td><span class="color-keyword-value">rgb( 0, 255, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch limegreen"></div></td>
- <td><span class="prop-value">limegreen</span></td>
- <td><span class="color-keyword-value">rgb( 50, 205, 50)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch linen"></div></td>
- <td><span class="prop-value">linen</span></td>
- <td><span class="color-keyword-value">rgb(250, 240, 230)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch magenta"></div></td>
- <td><span class="prop-value">magenta</span></td>
- <td><span class="color-keyword-value">rgb(255, 0, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch maroon"></div></td>
- <td><span class="prop-value">maroon</span></td>
- <td><span class="color-keyword-value">rgb(128, 0, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch mediumaquamarine"></div></td>
- <td><span class="prop-value">mediumaquamarine</span></td>
- <td><span class="color-keyword-value">rgb(102, 205, 170)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch mediumblue"></div></td>
- <td><span class="prop-value">mediumblue</span></td>
- <td><span class="color-keyword-value">rgb( 0, 0, 205)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch mediumorchid"></div></td>
- <td><span class="prop-value">mediumorchid</span></td>
- <td><span class="color-keyword-value">rgb(186, 85, 211)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch mediumpurple"></div></td>
- <td><span class="prop-value">mediumpurple</span></td>
- <td><span class="color-keyword-value">rgb(147, 112, 219)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch mediumseagreen"></div></td>
- <td><span
- class="prop-value">mediumseagreen</span></td>
- <td><span class="color-keyword-value">rgb( 60, 179, 113)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch mediumslateblue"></div></td>
- <td><span
- class="prop-value">mediumslateblue</span></td>
- <td><span class="color-keyword-value">rgb(123, 104, 238)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch mediumspringgreen"></div></td>
- <td><span class="prop-value">mediumspringgreen</span></td>
- <td><span class="color-keyword-value">rgb( 0, 250, 154)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch mediumturquoise"></div></td>
- <td><span class="prop-value">mediumturquoise</span></td>
- <td><span class="color-keyword-value">rgb( 72, 209, 204)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch mediumvioletred"></div></td>
- <td><span class="prop-value">mediumvioletred</span></td>
- <td><span class="color-keyword-value">rgb(199, 21, 133)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch midnightblue"></div></td>
- <td><span class="prop-value">midnightblue</span></td>
- <td><span class="color-keyword-value">rgb( 25, 25, 112)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch mintcream"></div></td>
- <td><span class="prop-value">mintcream</span></td>
- <td><span class="color-keyword-value">rgb(245, 255, 250)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch mistyrose"></div></td>
- <td><span class="prop-value">mistyrose</span></td>
- <td><span class="color-keyword-value">rgb(255, 228, 225)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch moccasin"></div></td>
- <td><span class="prop-value">moccasin</span></td>
- <td><span class="color-keyword-value">rgb(255, 228, 181)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch navajowhite"></div></td>
- <td><span class="prop-value">navajowhite</span></td>
- <td><span class="color-keyword-value">rgb(255, 222, 173)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch navy"></div></td>
- <td><span class="prop-value">navy</span></td>
- <td><span class="color-keyword-value">rgb( 0, 0, 128)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch oldlace"></div></td>
- <td><span class="prop-value">oldlace</span></td>
- <td><span class="color-keyword-value">rgb(253, 245, 230)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch olive"></div></td>
- <td><span class="prop-value">olive</span></td>
- <td><span class="color-keyword-value">rgb(128, 128, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch olivedrab"></div></td>
- <td><span class="prop-value">olivedrab</span></td>
- <td><span class="color-keyword-value">rgb(107, 142, 35)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch orange"></div></td>
- <td><span class="prop-value">orange</span></td>
- <td><span class="color-keyword-value">rgb(255, 165, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch orangered"></div></td>
- <td><span class="prop-value">orangered</span></td>
- <td><span class="color-keyword-value">rgb(255, 69, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch orchid"></div></td>
- <td><span class="prop-value">orchid</span></td>
- <td><span class="color-keyword-value">rgb(218, 112, 214)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch palegoldenrod"></div></td>
- <td><span class="prop-value">palegoldenrod</span></td>
- <td><span class="color-keyword-value">rgb(238, 232, 170)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch palegreen"></div></td>
- <td><span class="prop-value">palegreen</span></td>
- <td><span class="color-keyword-value">rgb(152, 251, 152)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch paleturquoise"></div></td>
- <td><span class="prop-value">paleturquoise</span></td>
- <td><span class="color-keyword-value">rgb(175, 238, 238)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch palevioletred"></div></td>
- <td><span class="prop-value">palevioletred</span></td>
- <td><span class="color-keyword-value">rgb(219, 112, 147)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch papayawhip"></div></td>
- <td><span class="prop-value">papayawhip</span></td>
- <td><span class="color-keyword-value">rgb(255, 239, 213)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch peachpuff"></div></td>
- <td><span class="prop-value">peachpuff</span></td>
- <td><span class="color-keyword-value">rgb(255, 218, 185)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch peru"></div></td>
- <td><span class="prop-value">peru</span></td>
- <td><span class="color-keyword-value">rgb(205, 133, 63)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch pink"></div></td>
- <td><span class="prop-value">pink</span></td>
- <td><span class="color-keyword-value">rgb(255, 192, 203)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch plum"></div></td>
- <td><span class="prop-value">plum</span></td>
- <td><span class="color-keyword-value">rgb(221, 160, 221)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch powderblue"></div></td>
- <td><span class="prop-value">powderblue</span></td>
- <td><span class="color-keyword-value">rgb(176, 224, 230)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch purple"></div></td>
- <td><span class="prop-value">purple</span></td>
- <td><span class="color-keyword-value">rgb(128, 0, 128)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch red"></div></td>
- <td><span class="prop-value">red</span></td>
- <td><span class="color-keyword-value">rgb(255, 0, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch rosybrown"></div></td>
- <td><span class="prop-value">rosybrown</span></td>
- <td><span class="color-keyword-value">rgb(188, 143, 143)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch royalblue"></div></td>
- <td><span class="prop-value">royalblue</span></td>
- <td><span class="color-keyword-value">rgb( 65, 105, 225)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch saddlebrown"></div></td>
- <td><span class="prop-value">saddlebrown</span></td>
- <td><span class="color-keyword-value">rgb(139, 69, 19)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch salmon"></div></td>
- <td><span class="prop-value">salmon</span></td>
- <td><span class="color-keyword-value">rgb(250, 128, 114)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch sandybrown"></div></td>
- <td><span class="prop-value">sandybrown</span></td>
- <td><span class="color-keyword-value">rgb(244, 164, 96)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch seagreen"></div></td>
- <td><span class="prop-value">seagreen</span></td>
- <td><span class="color-keyword-value">rgb( 46, 139, 87)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch seashell"></div></td>
- <td><span class="prop-value">seashell</span></td>
- <td><span class="color-keyword-value">rgb(255, 245, 238)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch sienna"></div></td>
- <td><span class="prop-value">sienna</span></td>
- <td><span class="color-keyword-value">rgb(160, 82, 45)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch silver"></div></td>
- <td><span class="prop-value">silver</span></td>
- <td><span class="color-keyword-value">rgb(192, 192, 192)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch skyblue"></div></td>
- <td><span class="prop-value">skyblue</span></td>
- <td><span class="color-keyword-value">rgb(135, 206, 235)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch slateblue"></div></td>
- <td><span class="prop-value">slateblue</span></td>
- <td><span class="color-keyword-value">rgb(106, 90, 205)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch slategray"></div></td>
- <td><span class="prop-value">slategray</span></td>
- <td><span class="color-keyword-value">rgb(112, 128, 144)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch slategrey"></div></td>
- <td><span class="prop-value">slategrey</span></td>
- <td><span class="color-keyword-value">rgb(112, 128, 144)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch snow"></div></td>
- <td><span class="prop-value">snow</span></td>
- <td><span class="color-keyword-value">rgb(255, 250, 250)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch springgreen"></div></td>
- <td><span class="prop-value">springgreen</span></td>
- <td><span class="color-keyword-value">rgb( 0, 255, 127)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch steelblue"></div></td>
- <td><span class="prop-value">steelblue</span></td>
- <td><span class="color-keyword-value">rgb( 70, 130, 180)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch tan"></div>
- </td>
- <td><span class="prop-value">tan</span></td>
- <td><span class="color-keyword-value">rgb(210, 180, 140)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch teal"></div></td>
- <td><span class="prop-value">teal</span></td>
- <td><span class="color-keyword-value">rgb( 0, 128, 128)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch thistle"></div></td>
- <td><span class="prop-value">thistle</span></td>
- <td><span class="color-keyword-value">rgb(216, 191, 216)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch tomato"></div></td>
- <td><span class="prop-value">tomato</span></td>
- <td><span class="color-keyword-value">rgb(255, 99, 71)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch turquoise"></div></td>
- <td><span class="prop-value">turquoise</span></td>
- <td><span class="color-keyword-value">rgb( 64, 224, 208)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch violet"></div></td>
- <td><span class="prop-value">violet</span></td>
- <td><span class="color-keyword-value">rgb(238, 130, 238)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch wheat"></div></td>
- <td><span class="prop-value">wheat</span></td>
- <td><span class="color-keyword-value">rgb(245, 222, 179)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch white"></div></td>
- <td><span class="prop-value">white</span></td>
- <td><span class="color-keyword-value">rgb(255, 255, 255)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch whitesmoke"></div>
- </td>
- <td><span class="prop-value">whitesmoke</span></td>
- <td><span class="color-keyword-value">rgb(245, 245, 245)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch yellow"></div>
- </td>
- <td><span class="prop-value">yellow</span></td>
- <td><span class="color-keyword-value">rgb(255, 255, 0)</span></td>
- </tr>
- <tr>
- <td><div class="colorpatch yellowgreen"></div>
- </td>
- <td><span class="prop-value">yellowgreen</span></td>
- <td><span class="color-keyword-value">rgb(154, 205, 50)</span></td>
- </tr>
- <tr>
- <td></td>
- <td><span class="prop-value"> </span></td>
- <td> </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
+<h2 id="ColorKeywords">Recognized color keyword names</h2>
+
+<p>The following is the list of recognized color keywords that
+can be used as a keyword value for data type <a
+href="types.html#DataTypeColor"><color></a>:</p>
+
+<table class="color-keywords" summary="color keywords">
+ <tr>
+ <td>
+ <table summary="color keywords part 1">
+ <tr>
+ <td><div class="colorpatch aliceblue"></div></td>
+ <td><span class="prop-value">aliceblue</span></td>
+ <td><span class="color-keyword-value">rgb(240, 248, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch antiquewhite"></div></td>
+ <td><span class="prop-value">antiquewhite</span></td>
+ <td><span class="color-keyword-value">rgb(250, 235, 215)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch aqua"></div></td>
+ <td><span class="prop-value">aqua</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 255, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch aquamarine"></div></td>
+ <td><span class="prop-value">aquamarine</span></td>
+ <td><span class="color-keyword-value">rgb(127, 255, 212)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch azure"></div></td>
+ <td><span class="prop-value">azure</span></td>
+ <td><span class="color-keyword-value">rgb(240, 255, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch beige"></div></td>
+ <td><span class="prop-value">beige</span></td>
+ <td><span class="color-keyword-value">rgb(245, 245, 220)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch bisque"></div></td>
+ <td><span class="prop-value">bisque</span></td>
+ <td><span class="color-keyword-value">rgb(255, 228, 196)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch black"></div></td>
+ <td><span class="prop-value">black</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 0, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch blanchedalmond"></div></td>
+ <td><span class="prop-value">blanchedalmond</span></td>
+ <td><span class="color-keyword-value">rgb(255, 235, 205)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch blue"></div></td>
+ <td><span class="prop-value">blue</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 0, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch blueviolet"></div></td>
+ <td><span class="prop-value">blueviolet</span></td>
+ <td><span class="color-keyword-value">rgb(138, 43, 226)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch brown"></div></td>
+ <td><span class="prop-value">brown</span></td>
+ <td><span class="color-keyword-value">rgb(165, 42, 42)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch burlywood"></div></td>
+ <td><span class="prop-value">burlywood</span></td>
+ <td><span class="color-keyword-value">rgb(222, 184, 135)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch cadetblue"></div></td>
+ <td><span class="prop-value">cadetblue</span></td>
+ <td><span class="color-keyword-value">rgb( 95, 158, 160)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch chartreuse"></div></td>
+ <td><span class="prop-value">chartreuse</span></td>
+ <td><span class="color-keyword-value">rgb(127, 255, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch chocolate"></div></td>
+ <td><span class="prop-value">chocolate</span></td>
+ <td><span class="color-keyword-value">rgb(210, 105, 30)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch coral"></div></td>
+ <td><span class="prop-value">coral</span></td>
+ <td><span class="color-keyword-value">rgb(255, 127, 80)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch cornflowerblue"></div></td>
+ <td><span class="prop-value">cornflowerblue</span></td>
+ <td><span class="color-keyword-value">rgb(100, 149, 237)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch cornsilk"></div></td>
+ <td><span class="prop-value">cornsilk</span></td>
+ <td><span class="color-keyword-value">rgb(255, 248, 220)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch crimson"></div></td>
+ <td><span class="prop-value">crimson</span></td>
+ <td><span class="color-keyword-value">rgb(220, 20, 60)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch cyan"></div></td>
+ <td><span class="prop-value">cyan</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 255, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkblue"></div></td>
+ <td><span class="prop-value">darkblue</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 0, 139)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkcyan"></div></td>
+ <td><span class="prop-value">darkcyan</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 139, 139)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkgoldenrod"></div></td>
+ <td><span class="prop-value">darkgoldenrod</span></td>
+ <td><span class="color-keyword-value">rgb(184, 134, 11)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkgray"></div></td>
+ <td><span class="prop-value">darkgray</span></td>
+ <td><span class="color-keyword-value">rgb(169, 169, 169)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkgreen"></div></td>
+ <td><span class="prop-value">darkgreen</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 100, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkgrey"></div></td>
+ <td><span class="prop-value">darkgrey</span></td>
+ <td><span class="color-keyword-value">rgb(169, 169, 169)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkkhaki"></div></td>
+ <td><span class="prop-value">darkkhaki</span></td>
+ <td><span class="color-keyword-value">rgb(189, 183, 107)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkmagenta"></div></td>
+ <td><span class="prop-value">darkmagenta</span></td>
+ <td><span class="color-keyword-value">rgb(139, 0, 139)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkolivegreen"></div></td>
+ <td><span class="prop-value">darkolivegreen</span></td>
+ <td><span class="color-keyword-value">rgb( 85, 107, 47)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkorange"></div></td>
+ <td><span class="prop-value">darkorange</span></td>
+ <td><span class="color-keyword-value">rgb(255, 140, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkorchid"></div></td>
+ <td><span class="prop-value">darkorchid</span></td>
+ <td><span class="color-keyword-value">rgb(153, 50, 204)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkred"></div></td>
+ <td><span class="prop-value">darkred</span></td>
+ <td><span class="color-keyword-value">rgb(139, 0, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darksalmon"></div></td>
+ <td><span class="prop-value">darksalmon</span></td>
+ <td><span class="color-keyword-value">rgb(233, 150, 122)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkseagreen"></div></td>
+ <td><span class="prop-value">darkseagreen</span></td>
+ <td><span class="color-keyword-value">rgb(143, 188, 143)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkslateblue"></div></td>
+ <td><span class="prop-value">darkslateblue</span></td>
+ <td><span class="color-keyword-value">rgb( 72, 61, 139)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkslategray"></div></td>
+ <td><span class="prop-value">darkslategray</span></td>
+ <td><span class="color-keyword-value">rgb( 47, 79, 79)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkslategrey"></div></td>
+ <td><span class="prop-value">darkslategrey</span></td>
+ <td><span class="color-keyword-value">rgb( 47, 79, 79)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkturquoise"></div></td>
+ <td><span class="prop-value">darkturquoise</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 206, 209)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch darkviolet"></div></td>
+ <td><span class="prop-value">darkviolet</span></td>
+ <td><span class="color-keyword-value">rgb(148, 0, 211)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch deeppink"></div></td>
+ <td><span class="prop-value">deeppink</span></td>
+ <td><span class="color-keyword-value">rgb(255, 20, 147)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch deepskyblue"></div></td>
+ <td><span class="prop-value">deepskyblue</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 191, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch dimgray"></div></td>
+ <td><span class="prop-value">dimgray</span></td>
+ <td><span class="color-keyword-value">rgb(105, 105, 105)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch dimgrey"></div></td>
+ <td><span class="prop-value">dimgrey</span></td>
+ <td><span class="color-keyword-value">rgb(105, 105, 105)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch dodgerblue"></div></td>
+ <td><span class="prop-value">dodgerblue</span></td>
+ <td><span class="color-keyword-value">rgb( 30, 144, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch firebrick"></div></td>
+ <td><span class="prop-value">firebrick</span></td>
+ <td><span class="color-keyword-value">rgb(178, 34, 34)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch floralwhite"></div></td>
+ <td><span class="prop-value">floralwhite</span></td>
+ <td><span class="color-keyword-value">rgb(255, 250, 240)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch forestgreen"></div></td>
+ <td><span class="prop-value">forestgreen</span></td>
+ <td><span class="color-keyword-value">rgb( 34, 139, 34)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch fuchsia"></div></td>
+ <td><span class="prop-value">fuchsia</span></td>
+ <td><span class="color-keyword-value">rgb(255, 0, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch gainsboro"></div></td>
+ <td><span class="prop-value">gainsboro</span></td>
+ <td><span class="color-keyword-value">rgb(220, 220, 220)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch ghostwhite"></div></td>
+ <td><span class="prop-value">ghostwhite</span></td>
+ <td><span class="color-keyword-value">rgb(248, 248, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch gold"></div></td>
+ <td><span class="prop-value">gold</span></td>
+ <td><span class="color-keyword-value">rgb(255, 215, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch goldenrod"></div></td>
+ <td><span class="prop-value">goldenrod</span></td>
+ <td><span class="color-keyword-value">rgb(218, 165, 32)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch gray"></div></td>
+ <td><span class="prop-value">gray</span></td>
+ <td><span class="color-keyword-value">rgb(128, 128, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch grey"></div></td>
+ <td><span class="prop-value">grey</span></td>
+ <td><span class="color-keyword-value">rgb(128, 128, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch green"></div></td>
+ <td><span class="prop-value">green</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 128, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch greenyellow"></div></td>
+ <td><span class="prop-value">greenyellow</span></td>
+ <td><span class="color-keyword-value">rgb(173, 255, 47)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch honeydew"></div></td>
+ <td><span class="prop-value">honeydew</span></td>
+ <td><span class="color-keyword-value">rgb(240, 255, 240)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch hotpink"></div></td>
+ <td><span class="prop-value">hotpink</span></td>
+ <td><span class="color-keyword-value">rgb(255, 105, 180)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch indianred"></div></td>
+ <td><span class="prop-value">indianred</span></td>
+ <td><span class="color-keyword-value">rgb(205, 92, 92)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch indigo"></div></td>
+ <td><span class="prop-value">indigo</span></td>
+ <td><span class="color-keyword-value">rgb( 75, 0, 130)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch ivory"></div></td>
+ <td><span class="prop-value">ivory</span></td>
+ <td><span class="color-keyword-value">rgb(255, 255, 240)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch khaki"></div></td>
+ <td><span class="prop-value">khaki</span></td>
+ <td><span class="color-keyword-value">rgb(240, 230, 140)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lavender"></div></td>
+ <td><span class="prop-value">lavender</span></td>
+ <td><span class="color-keyword-value">rgb(230, 230, 250)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lavenderblush"></div></td>
+ <td><span class="prop-value">lavenderblush</span></td>
+ <td><span class="color-keyword-value">rgb(255, 240, 245)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lawngreen"></div></td>
+ <td><span class="prop-value">lawngreen</span></td>
+ <td><span class="color-keyword-value">rgb(124, 252, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lemonchiffon"></div></td>
+ <td><span class="prop-value">lemonchiffon</span></td>
+ <td><span class="color-keyword-value">rgb(255, 250, 205)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightblue"></div></td>
+ <td><span class="prop-value">lightblue</span></td>
+ <td><span class="color-keyword-value">rgb(173, 216, 230)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightcoral"></div></td>
+ <td><span class="prop-value">lightcoral</span></td>
+ <td><span class="color-keyword-value">rgb(240, 128, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightcyan"></div></td>
+ <td><span class="prop-value">lightcyan</span></td>
+ <td><span class="color-keyword-value">rgb(224, 255, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightgoldenrodyellow"></div></td>
+ <td><span class="prop-value">lightgoldenrodyellow</span></td>
+ <td><span class="color-keyword-value">rgb(250, 250, 210)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightgray"></div></td>
+ <td><span class="prop-value">lightgray</span></td>
+ <td><span class="color-keyword-value">rgb(211, 211, 211)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightgreen"></div></td>
+ <td><span class="prop-value">lightgreen</span></td>
+ <td><span class="color-keyword-value">rgb(144, 238, 144)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightgrey"></div></td>
+ <td><span class="prop-value">lightgrey</span></td>
+ <td><span class="color-keyword-value">rgb(211, 211, 211)</span></td>
+ </tr>
+ </table>
+ </td>
+ <td> </td>
+ <td>
+ <table summary="color keywords part 2">
+ <tr>
+ <td><div class="colorpatch lightpink"></div></td>
+ <td><span class="prop-value">lightpink</span></td>
+ <td><span class="color-keyword-value">rgb(255, 182, 193)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightsalmon"></div></td>
+ <td><span class="prop-value">lightsalmon</span></td>
+ <td><span class="color-keyword-value">rgb(255, 160, 122)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightseagreen"></div></td>
+ <td><span class="prop-value">lightseagreen</span></td>
+ <td><span class="color-keyword-value">rgb( 32, 178, 170)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightskyblue"></div></td>
+ <td><span class="prop-value">lightskyblue</span></td>
+ <td><span class="color-keyword-value">rgb(135, 206, 250)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightslategray"></div></td>
+ <td><span class="prop-value">lightslategray</span></td>
+ <td><span class="color-keyword-value">rgb(119, 136, 153)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightslategrey"></div></td>
+ <td><span class="prop-value">lightslategrey</span></td>
+ <td><span class="color-keyword-value">rgb(119, 136, 153)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightsteelblue"></div></td>
+ <td><span class="prop-value">lightsteelblue</span></td>
+ <td><span class="color-keyword-value">rgb(176, 196, 222)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lightyellow"></div></td>
+ <td><span class="prop-value">lightyellow</span></td>
+ <td><span class="color-keyword-value">rgb(255, 255, 224)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch lime"></div></td>
+ <td><span class="prop-value">lime</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 255, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch limegreen"></div></td>
+ <td><span class="prop-value">limegreen</span></td>
+ <td><span class="color-keyword-value">rgb( 50, 205, 50)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch linen"></div></td>
+ <td><span class="prop-value">linen</span></td>
+ <td><span class="color-keyword-value">rgb(250, 240, 230)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch magenta"></div></td>
+ <td><span class="prop-value">magenta</span></td>
+ <td><span class="color-keyword-value">rgb(255, 0, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch maroon"></div></td>
+ <td><span class="prop-value">maroon</span></td>
+ <td><span class="color-keyword-value">rgb(128, 0, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumaquamarine"></div></td>
+ <td><span class="prop-value">mediumaquamarine</span></td>
+ <td><span class="color-keyword-value">rgb(102, 205, 170)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumblue"></div></td>
+ <td><span class="prop-value">mediumblue</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 0, 205)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumorchid"></div></td>
+ <td><span class="prop-value">mediumorchid</span></td>
+ <td><span class="color-keyword-value">rgb(186, 85, 211)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumpurple"></div></td>
+ <td><span class="prop-value">mediumpurple</span></td>
+ <td><span class="color-keyword-value">rgb(147, 112, 219)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumseagreen"></div></td>
+ <td><span
+ class="prop-value">mediumseagreen</span></td>
+ <td><span class="color-keyword-value">rgb( 60, 179, 113)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumslateblue"></div></td>
+ <td><span
+ class="prop-value">mediumslateblue</span></td>
+ <td><span class="color-keyword-value">rgb(123, 104, 238)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumspringgreen"></div></td>
+ <td><span class="prop-value">mediumspringgreen</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 250, 154)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumturquoise"></div></td>
+ <td><span class="prop-value">mediumturquoise</span></td>
+ <td><span class="color-keyword-value">rgb( 72, 209, 204)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mediumvioletred"></div></td>
+ <td><span class="prop-value">mediumvioletred</span></td>
+ <td><span class="color-keyword-value">rgb(199, 21, 133)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch midnightblue"></div></td>
+ <td><span class="prop-value">midnightblue</span></td>
+ <td><span class="color-keyword-value">rgb( 25, 25, 112)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mintcream"></div></td>
+ <td><span class="prop-value">mintcream</span></td>
+ <td><span class="color-keyword-value">rgb(245, 255, 250)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch mistyrose"></div></td>
+ <td><span class="prop-value">mistyrose</span></td>
+ <td><span class="color-keyword-value">rgb(255, 228, 225)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch moccasin"></div></td>
+ <td><span class="prop-value">moccasin</span></td>
+ <td><span class="color-keyword-value">rgb(255, 228, 181)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch navajowhite"></div></td>
+ <td><span class="prop-value">navajowhite</span></td>
+ <td><span class="color-keyword-value">rgb(255, 222, 173)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch navy"></div></td>
+ <td><span class="prop-value">navy</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 0, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch oldlace"></div></td>
+ <td><span class="prop-value">oldlace</span></td>
+ <td><span class="color-keyword-value">rgb(253, 245, 230)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch olive"></div></td>
+ <td><span class="prop-value">olive</span></td>
+ <td><span class="color-keyword-value">rgb(128, 128, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch olivedrab"></div></td>
+ <td><span class="prop-value">olivedrab</span></td>
+ <td><span class="color-keyword-value">rgb(107, 142, 35)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch orange"></div></td>
+ <td><span class="prop-value">orange</span></td>
+ <td><span class="color-keyword-value">rgb(255, 165, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch orangered"></div></td>
+ <td><span class="prop-value">orangered</span></td>
+ <td><span class="color-keyword-value">rgb(255, 69, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch orchid"></div></td>
+ <td><span class="prop-value">orchid</span></td>
+ <td><span class="color-keyword-value">rgb(218, 112, 214)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch palegoldenrod"></div></td>
+ <td><span class="prop-value">palegoldenrod</span></td>
+ <td><span class="color-keyword-value">rgb(238, 232, 170)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch palegreen"></div></td>
+ <td><span class="prop-value">palegreen</span></td>
+ <td><span class="color-keyword-value">rgb(152, 251, 152)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch paleturquoise"></div></td>
+ <td><span class="prop-value">paleturquoise</span></td>
+ <td><span class="color-keyword-value">rgb(175, 238, 238)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch palevioletred"></div></td>
+ <td><span class="prop-value">palevioletred</span></td>
+ <td><span class="color-keyword-value">rgb(219, 112, 147)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch papayawhip"></div></td>
+ <td><span class="prop-value">papayawhip</span></td>
+ <td><span class="color-keyword-value">rgb(255, 239, 213)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch peachpuff"></div></td>
+ <td><span class="prop-value">peachpuff</span></td>
+ <td><span class="color-keyword-value">rgb(255, 218, 185)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch peru"></div></td>
+ <td><span class="prop-value">peru</span></td>
+ <td><span class="color-keyword-value">rgb(205, 133, 63)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch pink"></div></td>
+ <td><span class="prop-value">pink</span></td>
+ <td><span class="color-keyword-value">rgb(255, 192, 203)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch plum"></div></td>
+ <td><span class="prop-value">plum</span></td>
+ <td><span class="color-keyword-value">rgb(221, 160, 221)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch powderblue"></div></td>
+ <td><span class="prop-value">powderblue</span></td>
+ <td><span class="color-keyword-value">rgb(176, 224, 230)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch purple"></div></td>
+ <td><span class="prop-value">purple</span></td>
+ <td><span class="color-keyword-value">rgb(128, 0, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch red"></div></td>
+ <td><span class="prop-value">red</span></td>
+ <td><span class="color-keyword-value">rgb(255, 0, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch rosybrown"></div></td>
+ <td><span class="prop-value">rosybrown</span></td>
+ <td><span class="color-keyword-value">rgb(188, 143, 143)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch royalblue"></div></td>
+ <td><span class="prop-value">royalblue</span></td>
+ <td><span class="color-keyword-value">rgb( 65, 105, 225)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch saddlebrown"></div></td>
+ <td><span class="prop-value">saddlebrown</span></td>
+ <td><span class="color-keyword-value">rgb(139, 69, 19)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch salmon"></div></td>
+ <td><span class="prop-value">salmon</span></td>
+ <td><span class="color-keyword-value">rgb(250, 128, 114)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch sandybrown"></div></td>
+ <td><span class="prop-value">sandybrown</span></td>
+ <td><span class="color-keyword-value">rgb(244, 164, 96)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch seagreen"></div></td>
+ <td><span class="prop-value">seagreen</span></td>
+ <td><span class="color-keyword-value">rgb( 46, 139, 87)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch seashell"></div></td>
+ <td><span class="prop-value">seashell</span></td>
+ <td><span class="color-keyword-value">rgb(255, 245, 238)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch sienna"></div></td>
+ <td><span class="prop-value">sienna</span></td>
+ <td><span class="color-keyword-value">rgb(160, 82, 45)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch silver"></div></td>
+ <td><span class="prop-value">silver</span></td>
+ <td><span class="color-keyword-value">rgb(192, 192, 192)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch skyblue"></div></td>
+ <td><span class="prop-value">skyblue</span></td>
+ <td><span class="color-keyword-value">rgb(135, 206, 235)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch slateblue"></div></td>
+ <td><span class="prop-value">slateblue</span></td>
+ <td><span class="color-keyword-value">rgb(106, 90, 205)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch slategray"></div></td>
+ <td><span class="prop-value">slategray</span></td>
+ <td><span class="color-keyword-value">rgb(112, 128, 144)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch slategrey"></div></td>
+ <td><span class="prop-value">slategrey</span></td>
+ <td><span class="color-keyword-value">rgb(112, 128, 144)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch snow"></div></td>
+ <td><span class="prop-value">snow</span></td>
+ <td><span class="color-keyword-value">rgb(255, 250, 250)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch springgreen"></div></td>
+ <td><span class="prop-value">springgreen</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 255, 127)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch steelblue"></div></td>
+ <td><span class="prop-value">steelblue</span></td>
+ <td><span class="color-keyword-value">rgb( 70, 130, 180)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch tan"></div>
+ </td>
+ <td><span class="prop-value">tan</span></td>
+ <td><span class="color-keyword-value">rgb(210, 180, 140)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch teal"></div></td>
+ <td><span class="prop-value">teal</span></td>
+ <td><span class="color-keyword-value">rgb( 0, 128, 128)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch thistle"></div></td>
+ <td><span class="prop-value">thistle</span></td>
+ <td><span class="color-keyword-value">rgb(216, 191, 216)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch tomato"></div></td>
+ <td><span class="prop-value">tomato</span></td>
+ <td><span class="color-keyword-value">rgb(255, 99, 71)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch turquoise"></div></td>
+ <td><span class="prop-value">turquoise</span></td>
+ <td><span class="color-keyword-value">rgb( 64, 224, 208)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch violet"></div></td>
+ <td><span class="prop-value">violet</span></td>
+ <td><span class="color-keyword-value">rgb(238, 130, 238)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch wheat"></div></td>
+ <td><span class="prop-value">wheat</span></td>
+ <td><span class="color-keyword-value">rgb(245, 222, 179)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch white"></div></td>
+ <td><span class="prop-value">white</span></td>
+ <td><span class="color-keyword-value">rgb(255, 255, 255)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch whitesmoke"></div>
+ </td>
+ <td><span class="prop-value">whitesmoke</span></td>
+ <td><span class="color-keyword-value">rgb(245, 245, 245)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch yellow"></div>
+ </td>
+ <td><span class="prop-value">yellow</span></td>
+ <td><span class="color-keyword-value">rgb(255, 255, 0)</span></td>
+ </tr>
+ <tr>
+ <td><div class="colorpatch yellowgreen"></div>
+ </td>
+ <td><span class="prop-value">yellowgreen</span></td>
+ <td><span class="color-keyword-value">rgb(154, 205, 50)</span></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td><span class="prop-value"> </span></td>
+ <td> </td>
+ </tr>
+ </table>
+ </td>
+ </tr>
+</table>
<h2 id="BasicDOMInterfaces">Basic DOM interfaces</h2>