A Pen by Tim Pietrusky.

index.haml

%h1 list of <span>hex</span> colors for web<span>crafts</span>people

%ul
  %li #71f4c8
  %li #71eef4
  %li #71bdf4
  %li #718df4
  %li #8771f4
  %li #b871f4
  %li #e971f4
  %li #f471ce
  %li #f4719d
  %li #f47771
  %li #f4a871
  %li #f4d871
  %li #def471
  %li #adf471
  %li #7cf471
  %li #71f497
  %li #666
  %li #808080
  %li #999
  %li #b3b3b3
  
%footer 2013 by <a href="http://twitter.com/TimPietrusky">Tim Pietrusky</a>

list-of-hex-colors-for-WebCraftspeople.markdown

list of hex colors for WebCraftspeople

My list of hex colors for UI experiments. Feel free to use them everywhere :D

A Pen by Tim Pietrusky on CodePen.

License.

script.js

/**
 *
 * list of hex colors for webcraftspeople
 * 
 * My list of hex colors for UI experiments. 
 * Feel free to use them everywhere :D
 *
 *
 * 2013 by Tim Pietrusky
 * timpietrusky.com
 */
var d = document;

/**
 * Helper function for event binding. 
 */ 
function bind(el, eventName, eventHandler) {
  var els = document.getElementsByTagName(el);
 
  for (var i = 0; i < els.length; i++) {
    el = els[i];
    
    if (el.addEventListener) {
      el.addEventListener(eventName, eventHandler, false); 
    } else if (el.attachEvent){
      el.attachEvent('on'+eventName, eventHandler);
    }
  }
}

/**
 *
 * Bind click events for all the 5 demos.
 *
 */ 
bind('li', 'click', function () {
  _select(this);
});

style.scss

@import "compass";
/** 
 * Units 
 */
$emw--unit-alpha: .5em;
$emw--unit-beta: 20; // # of elements
$emw--unit-gamma: 4; // # of last elements (grey)


/** 
 * Colors 
 */
$emw--color-alpha: #666;





@mixin breakpoint($point) {
  @if $point == extralarge {
    @media (min-width: 80em) { @content; }
  }
  @if $point == large {
    @media (min-width: 70em) { @content; }
  }
  @if $point == medium {
    @media (max-width: 70em) { @content; }
  }
  @if $point == small {
    @media (max-width: 40em) { @content; } 
  }
}





* {
  box-sizing: border-box;
}

body {
  font: 1em 'Lato', sans-serif;
  margin: $emw--unit-alpha;
  
  @include breakpoint(large) {
    font-size: 1.15em;
  }
  
  @include breakpoint(small) {
    font-size: .8em;
  }
}

h1 {
  text-align: center;
  font-variant: small-caps;
  
  span {
    color: $emw--color-alpha;
  }
}

a {
  color: $emw--color-alpha;
  text-decoration: none;
  
  &:hover {
    color: #000;
  }
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  width: 25%;
  height: 5.25em;
  margin: 0;
  float: left;
  padding: .9em 0 0 0;
  font-weight: 700;
  font-size: 1.4em;
  text-align: center;
  line-height: 2.615em;
  border: .5em solid #fff;
  
  @include breakpoint(extralarge) {
    width: 20%;
  }
  
  @include breakpoint(medium) {
    width: 33%;
  }
  
  @include breakpoint(small) {
    width: 50%;
  }
  
  @include transition(
    border-color .25s ease-in-out,
    color .25s ease-in-out
  );
  
  @include backface-visibility(hidden);
  
  @for $i from 1 through $emw--unit-beta {
    &:nth-child(#{$i}) {
      background: hsl(160 + (22.5 * ($i - 1)), 85%, 70%);
      color: hsla(160 + (22.5 * ($i - 1)), 85%, 20%, .8);
      
      &:hover,
      &:active {
        border-color: hsl(160 + (22.5 * ($i - 1)), 85%, 70%);
        color: #fff;
      }
      
      @if $i > $emw--unit-beta - $emw--unit-gamma { // last x are gray
        $calculated : 100% - 10% * (($emw--unit-beta + $emw--unit-gamma - $i - 1));

        background: hsl(0, 0, $calculated);
        color: #000;
    
        &:hover,
        &:active {
          border-color: hsl(0, 0, $calculated);
        }
      }
    }
  }
}

footer {
  width: 100%;
  text-align: center;
  padding: 2em;
}