<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro|Dorsa' rel='stylesheet' type='text/css'>  
<h1>  
  <span id="drop">
  <svg viewBox="0 0 24 32">
    <path fill="#555555" d="M23.998,19.797c0-0.021-0.001-0.044-0.001-0.065c-0.001-0.045-0.002-0.089-0.003-0.134 C23.68,9.733,12,0,12,0S0.32,9.733,0.007,19.597c-0.001,0.045-0.003,0.089-0.004,0.134c0,0.022-0.001,0.044-0.001,0.066 C0,19.865,0,19.932,0,20c0,0.074,0.001,0.148,0.002,0.222c0,0.006,0,0.012,0,0.019C0.13,26.757,5.453,32,12,32 s11.87-5.243,11.998-11.76c0-0.007,0-0.013,0-0.019C23.999,20.147,24,20.074,24,20C24,19.932,23.999,19.865,23.998,19.797z
	 M19.999,20.148l0,0.013c-0.041,2.103-0.892,4.073-2.395,5.548C16.099,27.186,14.109,28,12,28c-0.39,0-0.775-0.027-1.154-0.082
	c4.345-2.589,7.257-7.335,7.257-12.76c0-0.608-0.037-1.208-0.108-1.797c1.258,2.311,1.939,4.463,2,6.363v0.005
	c0.001,0.029,0.001,0.059,0.002,0.089l0.001,0.045C20,19.909,20,19.955,20,20C20,20.05,20,20.098,19.999,20.148z"/>
    </svg>
  </span>
Palettes</h1>
<p>A personal selection from 
    <a href="kuler.adobe.com">kuler</a>, <a href="http://www.colourlovers.com/">colourlovers</a> and around the interwebs.</p>
<ul>
  <li swatch="3FB8AF"></li>
  <li swatch="7FC7AF"></li>
  <li swatch="DAD8A7"></li>
  <li swatch="FF9E9D"></li>
  <li swatch="FF3D7F"></li>
  <span>Happy Mom <a href="https://kuler.adobe.com/Happy-Mom-color-theme-2427995/">kuler.adobe.com</a></span>
</ul>
<ul>
  <li swatch="CFF09E"></li>
  <li swatch="A8DBA8"></li>
  <li swatch="79BD9A"></li>
  <li swatch="3B8686"></li>
  <li swatch="0B486B"></li>
  <span>Adrift by Dreams <a href="http://www.colourlovers.com/palette/580974/Adrift_in_Dreams">colourlovers.com</a></span>
</ul>  
<ul>
  <li swatch="69D2E7"></li>
  <li swatch="A7DBD8"></li>
  <li swatch="E0E4CC"></li>
  <li swatch="F38630"></li>
  <li swatch="FA6900"></li>
  <span>Giant Goldfish <a href="http://www.colourlovers.com/palette/92095/Giant_Goldfish">colourlovers.com</a></span>
</ul>  
<ul>
  <li swatch="DC3522"></li>
  <li swatch="D9CB9E"></li>
  <li swatch="374140"></li>
  <li swatch="2A2C2B"></li>
  <li swatch="1E1E20"></li>
  <span>Sea Wolf <a href="https://kuler.adobe.com/Sea-Wolf-color-theme-782171/">kuler.adobe.com</a></span>
</ul>  
<ul class="x2">
  <li swatch="1AC3A6"></li>
  <li swatch="34CF7A"></li>
  <li swatch="41A1E1"></li>
  <li swatch="A667BF"></li>
  <li swatch="F2C500"></li>
  <li swatch="EA8B1D"></li>
  <li swatch="EB5D49"></li>
  <li swatch="475B6F"></li>
  <li swatch="ECF0F1"></li>
  <li swatch="9FAEAF"></li>  
  <li swatch="1AAA91"></li>
  <li swatch="31B76D"></li>
  <li swatch="388CC2"></li>
  <li swatch="9A52B7"></li>
  <li swatch="F6A71A"></li>
  <li swatch="D9651A"></li>
  <li swatch="C84C3A"></li>
  <li swatch="405162"></li>
  <li swatch="C3C9CC"></li>
  <li swatch="8C9798"></li>
  <span>Flat UI <a href="https://designmodo.com/flat/">designmodo.com/flat</a></span>
</ul>  
<ul>
  <li swatch="8BA987"></li>
  <li swatch="6C7767"></li>
  <li swatch="4A6266"></li>
  <li swatch="F46B63"></li>
  <li swatch="BE6263"></li>
  <span>Sun <a href="https://kuler.adobe.com/Happy-Mom-color-theme-2427995/">pattern.dk/sun</a></span>
</ul>  
<ul>
  <li swatch="DC0809"></li>
  <li swatch="E4CD00"></li>
  <li swatch="050505"></li>
  <li swatch="2AACCF"></li>
  <li swatch="7FCDDF"></li>
  <span>Jacky Winter <a href="http://jackywinter.com/">jackywinter.com</a></span>
</ul>
<ul>
  <li swatch="7BE0D0"></li>
  <li swatch="FF6F18"></li>
  <li swatch="A84B05"></li>
  <li swatch="BED891"></li>
  <li swatch="203428"></li>
  <span>Studie Eins Zwei Drei <a href="http://www.defringe.com/studie-eins-zwei-drei/">defringe.com/studie-eins-zwei-dre</a></span>
</ul>  
<ul>
  <li swatch="64A1A5"></li>
  <li swatch="E3D9BB"></li>
  <li swatch="F7BD80"></li>
  <li swatch="ED767A"></li>
  <li swatch="B54A71"></li>
  <span>mosne <a href="http://www.mosne.it/">mosne.it</a></span>
</ul>  
<ul>
  <li swatch="565656"></li>
  <li swatch="050505"></li>
  <li swatch="d6d6d6"></li>
  <li swatch="f0f0f0"></li>
  <li swatch="00e7b4"></li>
  <span>rezo zero <a href="http://www.rezo-zero.com">rezo-zero.com</a></span>
</ul>
  
<ul>
  <li swatch="EAE7E2"></li>
  <li swatch="CF2B58"></li>
  <li swatch="B22A50"></li>
  <li swatch="332520"></li>
  <li swatch="42342F"></li>
  <span>wiemto <a href="http://wiemto.pl/">wiemto.pl</a></span>
</ul>  
  
<ul>
  <li swatch="16C4C7"></li>
  <li swatch="9ADBD9"></li>
  <li swatch="B5CEB9"></li>
  <li swatch="E0E9D0"></li>
  <li swatch="D641C7"></li>
  <span>prophets <a href="http://www.prophets.be/">prophets.be</a></span>
</ul> 
  
<ul>
  <li swatch="F2F4F5"></li>
  <li swatch="40505B"></li>
  <li swatch="00BFFF"></li>
  <li swatch="203340"></li>
  <li swatch="0AD1B3"></li>
  <span>desktimeapp <a href="https://www.desktimeapp.com/">desktimeapp.com</a></span>
</ul> 
  
<ul>
  <li swatch="FF003E"></li>
  <li swatch="E2AF56"></li>
  <li swatch="00B9D7"></li>
  <li swatch="00A06E"></li>
  <li swatch="D0D7D8"></li>
  <span>keizo <a href="https://www.keizo.co.uk/">keizo.co.uk</a></span>
</ul> 
  
<ul>
  <li swatch="FFF533"></li>
  <li swatch="F14F06"></li>
  <li swatch="3D342B"></li>
  <li swatch="41A1BF"></li>
  <li swatch="419A13"></li>
  <span>samcreate <a href="http://www.samcreate.com/">samcreate.com</a></span>
</ul>
  
<ul>
  <li swatch="E57263"></li>
  <li swatch="42BDBD"></li>
  <li swatch="D66D93"></li>
  <li swatch="7D4B82"></li>
  <li swatch="EACB5F"></li>
  <span>Squirrel Settings <a href="http://dribbble.com/shots/1021883-Squirrel-Settings">Fabio Basile - dribbble</a></span>
</ul> 
  
<ul>
  <li swatch="FFE88A"></li>
  <li swatch="132729"></li>
  <li swatch="00DFD6"></li>
  <li swatch="FF581F"></li>
  <li swatch="5A5133"></li>
  <span>Lion <a href="http://dribbble.com/shots/222404-Lion-album-artwork">Jacqui Oakley - dribbble</a></span>
</ul> 
  
<ul>
  <li swatch="C2FF01"></li>
  <li swatch="00FF41"></li>
  <li swatch="07AA67"></li>
  <li swatch="1D7C80"></li>
  <li swatch="2D294C"></li>
  <span>Creative Drop <a href="http://dribbble.com/shots/142167-creative-drop">Alexander Haase - dribbble</a></span>
</ul> 
  
<ul>
  <li swatch="DE6141"></li>
  <li swatch="AC3E27"></li>
  <li swatch="771D1C"></li>
  <li swatch="11111D"></li>
  <li swatch="99B2B6"></li>
  <span>Art Deco <a href="http://dribbble.com/shots/728786-Art-Deco-Playing-Cards">Rachel Groves - dribbble</a></span>
</ul> 

  

body, html{margin:0px; padding:0px;}
body{font-family: 'Source Code Pro', sans-serif;background:#222 url(https://dl.dropboxusercontent.com/u/2964526/hosting/cartographer.png); padding:2%; color:#eee;}
*, *:after, *:before {  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
h1{
  font-family: 'Dorsa', sans-serif;
  font-weight:100;
  letter-spacing:1px;
  font-size:120px;
  text-align:center;
  margin:0px;
}
#drop{
  height: 34px;
  width: 34px;
  margin: 0 auto;
}
p{
  text-align: center;
  margin:0px 0px 2.2em;
  font-size: 12px;
  color: #999;
  line-height: 30px;
}
a{color:#28D9E8;text-decoration:none;}
a:hover{text-decoration:underline;}
ul {
  float:left;
  width:48%;
  list-style-type: none;
  margin: 0 1% 1.5%;
  padding: 0;
  display: block;
  padding:15px 15px 7px 15px;
  background:rgba(0,0,0,0.1);
}
li {
  display: block;
  float: left;
  width: 20%;
}
ul.x2{
  width:98%;
}
ul.x2 li{
  width:10%;
}
input {
  font-family: 'Dorsa', sans-serif;
  display: block;
  width: 100%;
  border: 0;
  height: 100px;
  outline:0px;
  text-align: center;
  color:#fff;
  font-size:50px;
  border-radius:0px;
  cursor:pointer;
  position: relative;
  top:0px;
}
input:hover{
  position: relative;
  top:-5px;
}
span{
  clear:both;
  color:#888;
  font-size:12px;
  padding-top:5px;
  display:block;
}
span a{
  font-size:10px;
}

/* Media Queries */
@media screen and (min-width: 0px) and (max-width: 700px) {
  ul{width:100%;float:none;margin-left:0px;}
}

//document ready
$(document).ready(function () {
    $('li').each(function () {
        $(this).html('<input type="text" style="background: #' + $(this).attr('swatch') + ';" />' );
    });
    $('ul').click(function (e) {
        var elem = e.target;
        if ($(elem).is('input')) {
            $(elem).val($(elem).parent().attr('swatch'));
            elem.focus();
            elem.select();
            setTimeout(function () { resetElem(elem) }, 3000);            
        }
    });
});

//functions
function resetElem(elem) {
    $(elem).val('');
    elem.blur();
}