Skip to content

Instantly share code, notes, and snippets.

@tylshe
Created June 1, 2013 13:49
Show Gist options
  • Save tylshe/5690457 to your computer and use it in GitHub Desktop.
Save tylshe/5690457 to your computer and use it in GitHub Desktop.
A CodePen by Nikita. Colour Palettes - Colour swatches with hex values on click, actively selected and available to copy.
<link href='http://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="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>
<p style="display:block;clear:both;">...updating regularly...</p>
//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();
}
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;
}
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;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment