tests/recipes/color/index.html

<!doctype html>
<link rel="stylesheet" href="s.css" />
<h1>Tests for <a href="../">recipes</a>/color</h1>

<ul>
	<li><a href="scheme">scheme</a></li>
</ul>

<p class="doc">
    A series of functions/mixins which assist in dynamic color manipulation.
    Created by <a href="http://www.davidkaneda.com">David Kaneda</a>.
</p>

<p class="doc">
    By default, Sass comes with a <code>lightness()</code> function, which returns the expected value from the HSLa system of colors. To properly judge readability, though, we have to look at perceived brightness. This class adds a <code>brightness()</code> function to Sass, as well as <code>luminosity()</code> so we can easily generate a readable text color from the background.<br><br>

    The sample below shows the lightness value (all are the same), but will show the brightness value as you mouse over the examples.
</p>

<div class="swatch1"></div>

<div class="swatch2"></div>

<div class="swatch3"></div>

<div class="swatch4"></div>

<div class="swatch5"></div>

<h2>Black & White helper</h2>

<div class="black-white">black-white</div>
<div class="black-white-transparente">black-white-transparente</div>