<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" style="xslt-template" id="color.blend">
 <info>
  <link type="guide" xref="color" group="templates"/>
  <link type="guide" xref="templates" group="color"/>
  <desc>Blend two colors together at a specified mix level.</desc>
  <revision version="3.28" date="2016-01-03" status="final"/>
 </info>
 <title>color.blend</title>
 <synopsis>
  <title>Parameters</title>
  <terms>
   <item>
    <title><code>$bg</code></title>
    <p>A color specified in hexidecimal, <sys>rgb()</sys>, or <sys>rgba()</sys>.</p>
   </item>
   <item>
    <title><code>$fg</code></title>
    <p>A color specified in hexidecimal, <sys>rgb()</sys>, or <sys>rgba()</sys>.</p>
   </item>
   <item>
    <title><code>$mix</code></title>
    <p>The mix level, between 0.0 and 1.0.</p>
   </item>
  </terms>
 </synopsis>
 <p>This template calculates a color by selecting a midpoint between <code>$bg</code> and
 <code>$fg</code>, where the <code>$mix</code> parameter specifies how far to move from <code>$bg</code> to <code>$fg</code>
 For opaque colors, setting <code>$mix</code> to 0.0 will result in <code>$bg</code>, and setting
 <code>$mix</code> to 1.0 will result in <code>$fg</code>.</p>
 <p>This template takes the alpha values of <code>$bg</code> and <code>$fg</code> into account, so
 that specifying 1.0 for <code>$mix</code> will result in a color that is the result
 of overlaying <code>$fg</code> on top of <code>$bg</code>. In effect, <code>$mix</code> acts as a multiplier
 on the alpha channels of the colors.</p>
 <p>This template calls <code xref="color.r">color.r</code>, <code xref="color.g">color.g</code>, <code xref="color.b">color.b</code>, and <code xref="color.a">color.a</code> to get
 the components of <code>$bg</code> and <code>$fg</code>. It accepts six-digit and three-digit
 hexidecimal color codes, colors specified with <sys>rgb()</sys>, and colors specified
 with <sys>rgba()</sys>. It does not accept HSL or named HTML colors.</p>
 <p>If the return color is fully opaque, this template returns the color using
 the <sys>rgb()</sys> scheme. Otherwise, it uses the <sys>rgba()</sys> scheme.</p>
 <list style="compact">
  <title>Calls Parameters</title>
  <item>
   <p><link xref="color.bg"/></p>
  </item>
  <item>
   <p><link xref="color.bg.blue"/></p>
  </item>
  <item>
   <p><link xref="color.bg.dark"/></p>
  </item>
  <item>
   <p><link xref="color.bg.gray"/></p>
  </item>
  <item>
   <p><link xref="color.bg.red"/></p>
  </item>
  <item>
   <p><link xref="color.bg.yellow"/></p>
  </item>
  <item>
   <p><link xref="color.blue"/></p>
  </item>
  <item>
   <p><link xref="color.fg"/></p>
  </item>
  <item>
   <p><link xref="color.fg.blue"/></p>
  </item>
  <item>
   <p><link xref="color.fg.dark"/></p>
  </item>
  <item>
   <p><link xref="color.fg.purple"/></p>
  </item>
  <item>
   <p><link xref="color.fg.red"/></p>
  </item>
  <item>
   <p><link xref="color.gray"/></p>
  </item>
  <item>
   <p><link xref="color.green"/></p>
  </item>
  <item>
   <p><link xref="color.orange"/></p>
  </item>
  <item>
   <p><link xref="color.purple"/></p>
  </item>
  <item>
   <p><link xref="color.red"/></p>
  </item>
  <item>
   <p><link xref="color.yellow"/></p>
  </item>
 </list>
 <list style="compact">
  <title>Calls Templates</title>
  <item>
   <p><link xref="color.a"/></p>
  </item>
  <item>
   <p><link xref="color.b"/></p>
  </item>
  <item>
   <p><link xref="color.g"/></p>
  </item>
  <item>
   <p><link xref="color.r"/></p>
  </item>
 </list>
</page>
