Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
78 lines (76 sloc) 3.95 KB
<!DOCTYPE html>
<html>
<head>
<title>HSL Color Picker - by Brandon Mathis</title>
<link href="stylesheets/site.css" media="screen" rel="stylesheet" type="text/css">
<link href="favicon.png" rel="shortcut icon">
</head>
<body>
<header>
<p>A Most Excellent</p>
<h1>HSL Color Picker</h1>
<p>Created for your enjoyment, by <a href="http://brandonmathis.com/">Brandon Mathis</a></p>
</header>
<div id="hslpicker">
<div class="frame">
<div id='tiles' class='color-tiles'>
<div class='foreground tile selected' data-name='foreground' title='Adjust foreground tile'>
<div class='foreground-color tile'></div>
</div>
<div class='background tile' data-name='background' title='Adjust background tile'>
<div class='background-color tile'></div>
</div>
<div class='bgs'>
<div class='bg none' title='Transparent' data-color='[360,100,100,0]'></div>
<div class='bg light' title='White' data-color='[360,100,100,1]'></div>
<div class='bg dark' title='Black' data-color='[0,0,0,1]'></div>
<div class='bg random' title='Random' data-color='random'></div>
</div>
<div class='expose' title='show/hide background tile'></div>
</div>
<div id='picker' class='sliders'>
<div class="slider"><div id='h-slider'><div class='handle'></div></div></div> <input id='h'>
<div class="slider"><div id='s-slider'><div class='handle'></div></div></div> <input id='s'>
<div class="slider"><div id='l-slider'><div class='handle'></div></div></div> <input id='l'>
<div class="slider"><div id='a-slider'><div class='handle'></div></div></div> <input id='a'>
</div>
</div>
<div class='color-inputs'>
<input id="hex" spellcheck="false" type="text">
<input id="rgba" spellcheck="false" type="text">
<input id="hsla" spellcheck="false" type="text">
</div>
</div>
<footer>
<p>
HSL Color Picker adores modern browsers.
&copy; 2012 <a href="http://brandonmathis.com/">Brandon Mathis</a>
<a class='show-more' href="#">What's HSL?</a>
<a href="http://github.com/imathis/hsl-picker/">Source</a>
</p>
<p>
<input class="url" spellcheck="false" readonly="true">
</p>
</footer>
<section id="more" class="hide">
<h2>What's so great about HSL</h2>
<p>HSL (Hue, Saturation, Luminosity) allows us to describe meaningful relationships between colors. Give this brown color, <code>hsl(36, 73%, 10%)</code>, it's clear that if we desaturate 40 steps and lighten 70 steps we get <code>hsl(36, 33%, 80%)</code>, a cream color.
Look at that in hex, <code>#2C1D07</code> to <code>#DDCFBB</code>, or in rgb, <code>rgb(44, 29, 7)</code> to <code>rgb(221, 207, 187)</code>, and the relationship between colors isn't evident in any meaningful way.
</p>
<h3>HSB &ne; HSL</h3>
<p>In graphics software I pick colors in HSB (Hue, Saturation, Brightness) because it feels more natural to work with than RGB or CMYK.
Now, with CSS3 we can use HSL which is actually quite different than HSB. Without a decent HSL color picker, it's difficult to understand. </p>
<h3>How to think in HSL</h3>
<p>Pick a Hue from 0 to 360 and with saturation at 100 and luminosity at 50 and you'll have the purest form of that color. Reduce the saturation and you move towards gray.
Increasing the luminosity moves you towards white, decreasing it moves you towards black.</p>
</section>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="/javascripts/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="javascripts/hslpicker.js" type="text/javascript"></script>
<script stype="text/javascript">
$(document).ready(function(){
site = require('site')()
});
</script>
</html>