Color Palettes

color-palettes.markdown

Color Palettes

Color swatches with hex values on click and rgb values on double-click...actively selected and available to copy.

A Pen by ‌‌ on CodePen.

License.

index.html

<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Dorsa' rel='stylesheet' type='text/css'>  
<h1>Palettes</h1>
<p class="squeeze">A selection from 
    <a href="kuler.adobe.com">kuler</a>, <a href="http://www.colourlovers.com/">colourlovers</a> and around the interwebs.
  <br>Forked from <a href="http://codepen.io/dropside/pen/KkLaH">http://codepen.io/dropside/pen/KkLaH</a> - Usage: Click color for HEX, double-click for RGB
  <br>Also check out the <a href="http://www.google.com/design/spec/style/color.html#color-color-palette">Material Design</a> color palette!
  </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="1abc9c"></li>
  <li swatch="2ecc71"></li>
  <li swatch="3498db"></li>
  <li swatch="9b59b6"></li>
  <li swatch="34495e"></li>
  <li swatch="f1c40f"></li>
  <li swatch="e67e22"></li>
  <li swatch="e74c3c"></li>
  <li swatch="ecf0f1"></li>
  <li swatch="95a5a6"></li>  
  <li swatch="16a085"></li><!-- row 2 -->
  <li swatch="27ae60"></li>
  <li swatch="2980b9"></li>
  <li swatch="8e44ad"></li>
  <li swatch="2c3e50"></li>
  <li swatch="f39c12"></li>
  <li swatch="d35400"></li>
  <li swatch="c0392b"></li>
  <li swatch="bdc3c7"></li>
  <li swatch="7f8c8d"></li>
  <span>Flat UI <a href="http://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="http://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> 

  

script.js

  function hexToRgb(h) {
    var i = parseInt(h, 16);
    return "rgb("+((i >> 16) & 255) + "," +
           ((i >> 8) & 255) + "," + 
           (i & 255) + ")";
  };

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

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

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body, html{margin:0px; padding:0px;}
body{font-family: 'Source Code Pro', sans-serif;background:#222; 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:110px;
  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: 'Arial', sans-serif;
  display: block;
  width: 100%;
  border: 0;
  height: 100px;
  outline:0px;
  text-align: center;
  color:#fff;
  font-size:13px;
  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;}
}

.squeeze{line-height:18px;}