<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Fine tuning the color</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="ch07.html" title="Chapter 7. Color handling"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Fine tuning the color</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 7. Color handling</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Fine tuning the color"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2496338"></a>Fine tuning the color</h2></div></div></div>
<div class="sect2" title="Specifying the alpha channel (color transparency)"><div class="titlepage"><div><div><h3 class="title"><a name="sec2.alpha-channel"></a>Specifying the alpha channel (color transparency)</h3></div></div></div>
<p>Colors can also be made semi-transparent by specifying a transparency value
(or as it is also known an <span class="italic">alpha channel value</span>). This will instruct the
library to mix the foreground color with a certain amount of the background
colors creating a "shine-through" effect.</p>
<p>The alpha channel is specified as a real number in the range [0.0, 1.0] where
0.0 means no transparency and 1.0 means full transparency (i.e. only the
background color is shown). The transparency is added as a postfix to the color
specification separated by a '@' (at) character. It is often most used with area
fills (i.e. when using <code class="code">SetFillColor()</code>)</p>
<p>For example the following are valid alpha channel modifiers</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">SetFillColor('red@0.2')</code>, A slightly transparent red
color</p>
</li><li class="listitem">
<p><code class="code">SetFillColor('red@0.8')</code>, An almost completely
transparent color</p>
</li></ul></div><p>
</p>
<p>The result of using different alpha modifiers are shown in <a class="xref" href="ch07s04.html#fig.alpha-channel" title="Figure 7.1. Using alpha channel modifiers">Figure 7.1. Using alpha channel modifiers</a> where the blue color is made more and more
transparent to allow the red bar in the background to become more and more
visible.</p>
<p>
</p><div class="figure"><a name="fig.alpha-channel"></a><p class="title"><b>Figure 7.1. Using alpha channel modifiers</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/alpha-channel.png" alt="Using alpha channel modifiers"></div>
</div></div><p><br class="figure-break">
</p>
<p>As a final example of how to use transparency we show a graph in <a class="xref" href="ch07s04.html#fig.barlinealphaex1" title="Figure 7.2. Making use of transparency to combine two plots (barlinealphaex1.php)">Figure 7.2. Making use of transparency to combine two plots <code class="uri"><a class="uri" href="example_src/barlinealphaex1.html" target="_top">(<code class="filename">barlinealphaex1.php</code>)</a></code> </a> that uses transparency to allow an area
plot to be mixed with a bar graph.</p>
<p>
</p><div class="figure"><a name="fig.barlinealphaex1"></a><p class="title"><b>Figure 7.2. Making use of transparency to combine two plots <code class="uri"><a class="uri" href="example_src/barlinealphaex1.html" target="_top">(<code class="filename">barlinealphaex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/barlinealphaex1.png" alt="Making use of transparency to combine two plots (barlinealphaex1.php)"></span> </div></div><p><br class="figure-break">
</p>
<div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
<p>For all graph examples shown in this manual you can always click on the
file name in the title of the graph to view the actual source that created
the graph.</p>
</div>
</div>
<div class="sect2" title="Adjusting the brightness"><div class="titlepage"><div><div><h3 class="title"><a name="id2496356"></a>Adjusting the brightness</h3></div></div></div>
<p>Since all colors that can be displayed on a computer can be modeled with the
appropriate RGB triple the above ways will allow you to specify any colors you
might need. However, conceptually it might be easier to think of colors in terms
of "a light blue" instead of a modified RGB triple so the library allows you to
take a basic color and apply a brightness correction factor.</p>
<p>The brightness factor is a postfix to the color string separated from the core
color with a ':' (colon) character. The brightness factor is a real number in
the range of [0.0, 2.0]. Using a brightness factor of 0.0 means that the color
will be black (no brightness at all) and a factor of 2.0 means that the color is
white (maximum brightness). Using a factor of 1 will leave the original color
untouched.</p>
<p>The brightness factor can be specified for named and HTML colors, see <a class="xref" href="ch07s04.html#fig.orange-scale" title="Figure 7.3. Adjusting brightness of named color specifier">Figure 7.3. Adjusting brightness of named color specifier</a> and <a class="xref" href="ch07s04.html#fig.blueish-scale" title="Figure 7.4. Adjusting brightness of a HTML color specifier">Figure 7.4. Adjusting brightness of a HTML color specifier</a> for more examples how the factor adjusts
the color.</p>
<p>For example, the following code snippets show valid color brightness
modifiers</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">SetColor('red:0.8');</code>, A slightly darker red
color</p>
</li><li class="listitem">
<p><code class="code">SetColor('red:1.5');</code>, A brighter red color</p>
</li><li class="listitem">
<p><code class="code">SetColor('#3485a9:1.8);</code>, A bright blue-greenish
color</p>
</li></ul></div><p>
</p>
<div class="figure"><a name="fig.orange-scale"></a><p class="title"><b>Figure 7.3. Adjusting brightness of named color specifier</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/orange-scale.png" alt="Adjusting brightness of named color specifier"></div>
</div></div><br class="figure-break">
<div class="figure"><a name="fig.blueish-scale"></a><p class="title"><b>Figure 7.4. Adjusting brightness of a HTML color specifier</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/blueish-scale.png" alt="Adjusting brightness of a HTML color specifier"></div>
</div></div><br class="figure-break">
<div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
<p>The brightness factor is a purely linear factor but due to the human eyes
non-linear sensitivity for colors the perceived difference between (for
example) "<code class="code">red:1.1</code>" and "<code class="code">red:1.2</code>" than between
"<code class="code">red:0.2</code>" and "<code class="code">red:0.3</code>" even though the
relative difference is the same.</p>
</div>
</div>
<div class="sect2" title="Combining brightness and transparency adjustment"><div class="titlepage"><div><div><h3 class="title"><a name="id2496665"></a>Combining brightness and transparency adjustment</h3></div></div></div>
<p>It is also possible to combine the two previous discussed modifiers. This is
done by first adding the transparency specifier and then the brightness
adjustment as the following examples demonstrates.</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">SetColor('red@0.7:1.2')</code>, A highly transparent
slightly bright red color</p>
</li><li class="listitem">
<p><code class="code">SetFillColor('#4545aa@0.3:1.5')</code>, A bright blueish
semi transparent color</p>
</li></ul></div><p>
</p>
</div>
</div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="ch07.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>