<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<meta name="generator" content="hevea 2.06">
<META name="Author" content="Luc Maranget"><link rel="stylesheet" type="text/css" href="manual.css">
<title>Pictures and Colours</title>
</head>
<body>
<a href="manual035.html"><img src="previous_motif.gif" alt="Previous"></a>
<a href="manual022.html"><img src="contents_motif.gif" alt="Up"></a>
<a href="manual037.html"><img src="next_motif.gif" alt="Next"></a>
<hr>
<h2 class="section" id="sec161">B.14  Pictures and Colours</h2>
<ul>
<li><a href="manual036.html#sec162">The <span class="c013">picture</span> environment and the <span class="c013">graphics</span>
Package</a>
</li><li><a href="manual036.html#sec163">The <span class="c013">color</span> Package</a>
</li></ul>
<h3 class="subsection" id="sec162">B.14.1  The <span class="c013">picture</span> environment and the <span class="c013">graphics</span>
Package</h3>
<p>It is possible to have pictures and graphics processed by
<span class="c013">imagen</span> (see section <a href="manual008.html#image%3Afile">6.1</a>).
In the case of the <span class="c013">picture</span> environment
it remains users responsibility to explicitly choose
source chunks that will get rendered as images.
In the case of the commands from the <span class="c013">graphics</span> package,
this choice is made by H<span class="c015"><sup>E</sup></span>V<span class="c015"><sup>E</sup></span>A.</p><p>For instance consider the following picture:
</p><pre class="verbatim">\newcounter{cms}
\setlength{\unitlength}{1mm}
\begin{picture}(50,10)
\put(0,7){\makebox(0,0)[b]{cm}}
\multiput(10,7)(10,0){5}{\addtocounter{cms}{1}\makebox(0,0)[b]{\arabic{cms}}}
\multiput(1,0)(1,0){49}{\line(0,1){2.5}}
\multiput(5,0)(10,0){5}{\line(0,1){5}}
\thicklines
\put(0,0){\line(1,0){50}}
\multiput(0,0)(10,0){6}{\line(0,1){5}}
\end{picture}
</pre><p>Users should enclose <em>all</em> picture elements in a <code>toimage</code>
environment (or inside <code>%BEGIN IMAGE</code>… <code>%END IMAGE</code> comments) and insert an <code>\imageflush</code> command, where they want
the image to appear in html output:
</p><pre class="verbatim">%BEGIN IMAGE
\newcounter{cms}
\setlength{\unitlength}{1mm}
\begin{picture}(50,10)
...
\end{picture}
%END IMAGE
%HEVEA\imageflush
</pre><p>This will result in normal processing by L<sup>A</sup>T<sub>E</sub>X and image inclusion
by H<span class="c015"><sup>E</sup></span>V<span class="c015"><sup>E</sup></span>A:</p><p><img src="manual008.png"></p><p><a id="graphics"></a><a id="hevea_default185"></a><a id="hevea_default186"></a><a id="hevea_default187"></a>All commands from the graphics package are implemented using the
automatic image inclusion feature.
More precisely, the outermost invocations of
the <code>\includegraphics</code>, <code>\scalebox</code>,
etc. commands are sent to the image <span class="c018">image</span> file and there will
be one image per outermost invocation of these commands.</p><p>For instance, consider a document <span class="c013">doc.tex</span> that
loads the <span class="c013">graphics</span> package and that includes some (scaled)
images by:
</p><pre class="verbatim">\begin{center}
\scalebox{.5}{\includegraphics{round.ps}}
\scalebox{.75}{\includegraphics{round.ps}}
\includegraphics{round.ps}
\end{center}
</pre><p>Then, issuing the following two commands:
</p><pre class="verbatim"># hevea doc.tex
# imagen doc
</pre><p>yields html that basically consists in three image links,
the images being generated by <span class="c013">imagen</span>.
</p><blockquote class="quote">
<div class="center">
<img src="manual009.png">
<img src="manual010.png">
<img src="manual011.png">
</div>
</blockquote><p>
Since the advent of <span class="c013">pdflatex</span>,
using <code>\includegraphics</code> to insert bitmap images
(<em>e.g.</em> <span class="c013">.gif</span> or <span class="c013">.jpg</span>)
became frequent.
In that case, users are advised <em>not</em> to use H<span class="c015"><sup>E</sup></span>V<span class="c015"><sup>E</sup></span>A default
implementation of the <span class="c013">graphics</span> package.
Instead, they may use a simple variation of
the technique described in Section <a href="manual018.html#imgsrc">8.2</a>.</p>
<h3 class="subsection" id="sec163">B.14.2  The <span class="c013">color</span> Package</h3>
<p><a id="color"></a><a id="hevea_default188"></a><a id="color:package"></a>H<span class="c015"><sup>E</sup></span>V<span class="c015"><sup>E</sup></span>A partly implements the <span class="c013">color</span> package.
Implemented commands are <code>\definecolor</code>, <code>\color</code>,
<code>\colorbox</code> and
<code>\textcolor</code>. Other commands from the <span class="c013">color</span> package do
not exist.
At startup,
colours <span style="font-family:monospace;color:black">black</span>, <span style="font-family:monospace;color:white">white</span>,
<span style="font-family:monospace;color:red">red</span>, <span style="font-family:monospace;color:lime">green</span>, <span style="font-family:monospace;color:blue">blue</span>,
<span style="font-family:monospace;color:aqua">cyan</span>, <span style="font-family:monospace;color:yellow">yellow</span> and <span style="font-family:monospace;color:fuchsia">magenta</span> are
pre-defined.</p><p>Colours are defined by
<code>\definecolor{</code><span class="c018">name</span><code>}{</code><span class="c018">model</span><code>}{</code><span class="c018">spec</span><code>}</code>,
where <span class="c018">name</span> is the color name, <span class="c018">model</span> is the color
model used, and <span class="c018">spec</span> is the color specification according to
the given model.
Defined colours are used by the declaration
<code>\color{</code><span class="c018">name</span><code>}</code> and by the command
<code>\textcolor{</code><span class="c018">name</span><code>}{</code><span class="c018">text</span><code>}</code>, which
change text color.
Please note that, the <code>\color</code> declaration
accepts color specifications directly
when invoked as
<code>\color[</code><span class="c018">model</span><code>]{</code><span class="c018">spec</span><code>}</code>.
The <code>\textcolor</code> command has a similar feature.</p><p>As regards color models, H<span class="c015"><sup>E</sup></span>V<span class="c015"><sup>E</sup></span>A implements the <span class="c013">rgb</span>,
<span class="c013">cmyk</span>, <span class="c013">hsv</span> and <span class="c013">hls</span> color models.
In those models, color specifications are floating point numbers less
than one.
For instance, here is the definition for the <span class="c013">red</span> color:
</p><pre class="verbatim">\definecolor{red}{rgb}{1, 0, 0}
</pre><p>The <span class="c013">named</span> color model is also supported, in this model color
specification are just names…
Named colours are the ones of <span class="c013">dvips</span>.
</p><div class="flushleft">
<span style="color:#D8FF4F">GreenYellow</span>,
<span class="c011">Yellow</span>,
<span style="color:#FFE528">Goldenrod</span>,
<span style="color:#FFB528">Dandelion</span>,
<span style="color:#FFAD7A">Apricot</span>,
<span style="color:#FF7F4C">Peach</span>,
<span style="color:#FF897F">Melon</span>,
<span style="color:#FF9300">YellowOrange</span>,
<span style="color:#FF6321">Orange</span>,
<span style="color:#FF7C00">BurntOrange</span>,
<span style="color:#C13000">Bittersweet</span>,
<span style="color:#FF3A21">RedOrange</span>,
<span style="color:#A51815">Mahogany</span>,
<span style="color:#AD1637">Maroon</span>,
<span class="c007">BrickRed</span>,
<span style="color:red">Red</span>,
<span style="color:#FF007F">OrangeRed</span>,
<span style="color:#FF00DD">RubineRed</span>,
<span style="color:#FF0A9B">WildStrawberry</span>,
<span style="color:#FF779E">Salmon</span>,
<span style="color:#FF5EFF">CarnationPink</span>,
<span class="c008">Magenta</span>,
<span style="color:#FF30FF">VioletRed</span>,
<span style="color:#FF2DFF">Rhodamine</span>,
<span style="color:#A418F9">Mulberry</span>,
<span style="color:#9C10A8">RedViolet</span>,
<span style="color:#7C15EA">Fuchsia</span>,
<span style="color:#FF84FF">Lavender</span>,
<span style="color:#E068FF">Thistle</span>,
<span style="color:#AD5BFF">Orchid</span>,
<span style="color:#9932CC">DarkOrchid</span>,
<span style="color:#8C23FF">Purple</span>,
<span style="color:#7F00FF">Plum</span>,
<span style="color:#351EFF">Violet</span>,
<span style="color:#3F19FF">RoyalPurple</span>,
<span style="color:#2216F4">BlueViolet</span>,
<span style="color:#6D72FF">Periwinkle</span>,
<span style="color:#606DC4">CadetBlue</span>,
<span style="color:#59DDFF">CornflowerBlue</span>,
<span style="color:#027E91">MidnightBlue</span>,
<span style="color:#0F75FF">NavyBlue</span>,
<span style="color:#007FFF">RoyalBlue</span>,
<span style="color:blue">Blue</span>,
<span style="color:#0FE2FF">Cerulean</span>,
<span style="color:aqua">Cyan</span>,
<span style="color:#0AFFFF">ProcessBlue</span>,
<span style="color:#60FFE0">SkyBlue</span>,
<span style="color:#26FFCC">Turquoise</span>,
<span style="color:#22F9A4">TealBlue</span>,
<span style="color:#2DFFB2">Aquamarine</span>,
<span style="color:#26FFAA">BlueGreen</span>,
<span style="color:#00FF7F">Emerald</span>,
<span style="color:#02FF7A">JungleGreen</span>,
<span style="color:#4FFF7F">SeaGreen</span>,
<span style="color:lime">Green</span>,
<span style="color:#14E01A">ForestGreen</span>,
<span style="color:#0FBF4E">PineGreen</span>,
<span style="color:#7FFF00">LimeGreen</span>,
<span style="color:#8EFF42">YellowGreen</span>,
<span style="color:#BCFF3D">SpringGreen</span>,
<span style="color:#379907">OliveGreen</span>,
<span style="color:#8C2700">RawSienna</span>,
<span style="color:#4C0D00">Sepia</span>,
<span style="color:#661300">Brown</span>,
<span style="color:#DB9370">Tan</span>,
<span style="color:#7F7F7F">Gray</span>,
<span style="color:black">Black</span>,
<span style="color:white">White</span>.
</div><p>There are at least three ways to use colours from the <span class="c013">named</span>
model.
</p><ol class="enumerate" type=1><li class="li-enumerate">
Define a color name for them.
</li><li class="li-enumerate">Specify the named color model as an optional argument to
<code>\color</code> and <code>\textcolor</code>.
</li><li class="li-enumerate">Use the names directly
(H<span class="c015"><sup>E</sup></span>V<span class="c015"><sup>E</sup></span>A implements the <span class="c013">color</span> package with
the <span class="c013">usenames</span> option given).
</li></ol><p>
That is:
</p><ol class="enumerate" type=1><li class="li-enumerate">
<code>\definecolor{rouge-brique}{named}{BrickRed}\textcolor{rouge-brique}{Text as a brick}</code>.
</li><li class="li-enumerate"><code>\textcolor[named]{BrickRed}{Text as another brick}</code>.
</li><li class="li-enumerate"><code>\textcolor{BrickRed}{Text as another brick}</code>.
</li></ol><p>
Which yields:
</p><ol class="enumerate" type=1><li class="li-enumerate">
<span class="c007">Text as a brick</span>.
</li><li class="li-enumerate"><span class="c007">Text as another brick</span>.
</li><li class="li-enumerate"><span class="c007">Text as another brick</span>.
</li></ol><p>Colours should be used carefully. Too many colours
hinders clarity and some of the colours may not be readable on the
document background color.</p>
<h4 class="subsubsection" id="sec164">B.14.2.1  The <span class="c013">bgcolor</span> environment</h4>
<p>
<a id="hevea_default189"></a><a id="bgcolor"></a>
With respect to the L<sup>A</sup>T<sub>E</sub>X <span class="c013">color</span> package, H<span class="c015"><sup>E</sup></span>V<span class="c015"><sup>E</sup></span>A features
an additional
<span class="c013">bgcolor</span> environment, for changing the background color of some
subparts of the document.
The <span class="c013">bgcolor</span> environment is a displayed environment and it
normally starts a new line.
Simple usage is <code>\begin{bgcolor}{</code><span class="c018">color</span><code>}</code>…
<code>\end{bgcolor}</code>, where
<span class="c018">color</span> is a color defined with <code>\definecolor</code>.
Hence the following source yield a paragraph with a red background:
</p><pre class="verbatim">\begin{bgcolor}{red}
\color{yellow}Yellow letters on a red backgroud
\end{bgcolor}
</pre><table><tr><td style="padding:1em;background-color:red">
<span class="c011">Yellow letters on a red background
</span></td></tr>
</table><p>The <span class="c013">bgcolor</span> environment is implemented by one-cell
<code>table</code> element, it takes an
optional argument that is used as an attribute for the inner <code>td</code>
element (default value is <code>style="padding:1em"</code>).
Advanced users may change the default, for instance as:
</p><pre class="verbatim">\begin{bgcolor}[style="padding:0"]{yellow}
\color{red}Red letters on a yellow backgroud
\end{bgcolor}
</pre><p>The resulting output will be red letters
on a yellow background and no padding:
</p><table><tr><td style="padding:0;background-color:yellow">
<span style="color:red">Red letters on a yellow background, no padding
</span></td></tr>
</table>
<h4 class="subsubsection" id="sec165">B.14.2.2  From High-Level Colours to Low-Level Colours</h4>
<p><a id="getcolor"></a>
<a id="hevea_default190"></a>
<a id="hevea_default191"></a>
High-level colours are color names
defined with <code>\definecolor</code>.
Low-level colours are html-style colours.
That is, they are either one of the sixteen conventional colours black,
silver etc., or a RGB hexadecimal color specification of the form
<code>"#XXXXXX"</code>.</p><p>One changes the high-level <em>high-color</em> into a low-level color by
<code>\@getcolor{</code><em>high-color</em><code>}</code>.
Low-level colours are appropriate inside html attributes and as
arguments to the <code>\@fontcolor</code> internal macro.
An example of <code>\@getcolor</code> usage can be found at the end of
section <a href="manual018.html#getcolor%3Ausage">8.5</a>.</p><p>There is also <code>\@getstylecolor</code> command that acts
like<code>\@getcolor</code>, except that it does not output the double
quotes around RGB hexadecimal color specifications.
Such low-level colours are appropriate for style definitions in
cascading style sheets [<a href="manual047.html#css">CSS-2</a>]. See
Section <a href="manual019.html#getstylecolor%3Aexample">9.3</a> for an example.</p>
<hr>
<a href="manual035.html"><img src="previous_motif.gif" alt="Previous"></a>
<a href="manual022.html"><img src="contents_motif.gif" alt="Up"></a>
<a href="manual037.html"><img src="next_motif.gif" alt="Next"></a>
</body>
</html>
