Pantone Fashion Colors - Spring 2016

index.html

<header>
  <h1>Pantone Fashion Colors</h1>
  <p>Spring 2016</p>
</header>

<table>
  <col />
  <col />
  <col />
  <thead>
    <tr>
      <th scope="col">Pantone Color</th>
      <th scope="col">CMYK</th>
      <th scope="col">HEX</th>
    </tr>
  </thead>
  <tbody>

  <tr>
    <th scope="row">13-1520 Rose Quartz</th>
    <td>0.24.15.0</td>
    <td>#f7cac9</td>
  </tr>
  <tr>
    <th scope="row">16-1548 Peach Echo</th>
    <td>0.65.53.0</td>
    <td>#f7786b</td>
  </tr>
  <tr>
    <th scope="row">15-3919 Serenity</th>
    <td>42.24.3.0</td>
    <td>#91A8d0</td>
  </tr>
  <tr>
    <th scope="row">19-4049 Snorkel Blue</th>
    <td>100.49.7.13</td>
    <td>#034f84</td>
  </tr>
  <tr>
    <th scope="row">12-0752 Buttercup</th>
    <td>2.3.91.0</td>
    <td>#fae03c</td>
  </tr>
  <tr>
    <th scope="row">13-4810 Limpet Shell</th>
    <td>34.0.18.0</td>
    <td>#98ddde</td>
  </tr>
  <tr>
    <th scope="row">16-3905 Lilac Gray</th>
    <td>37.31.22.11</td>
    <td>#9896a4</td>
  </tr>
  <tr>
    <th scope="row">17-1564 Fiesta</th>
    <td>2.85.89.0</td>
    <td>#dd4132</td>
  </tr>
  <tr>
    <th scope="row">15-1040 Iced Coffee</th>
    <td>21.36.57.18</td>
    <td>#b18f6a</td>
  </tr>
  <tr>
    <th scope="row">15-0146 Green Flash</th>
    <td>49.0.83.0</td>
    <td>#79c753</td>
  </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><a href="http://codepen.io/atelierbram/pen/RWrNgR">on CodePen</a></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>
<footer>
  <ul>
    <li><a href="http://www.pantone.com/pages/fcr/?season=spring&year=2016">PANTONE® FASHION COLOR REPORT SPRING 2016</a></li>
    <li><a href="http://www.pantone.com/downloads/support/FCR/PANTONE-Fashion-Color-Report-Spring-2016.pdf">Fashion Color Report 2016 (PDF direct link)</a></li>
  </ul>
</footer> 

Pantone Fashion Colors - Spring 2016.markdown

Pantone Fashion Colors - Spring 2016

Table with colors (CMYK and HEX) of the Pantone Fashion Color Report Spring 2016.

A Pen by Bram de Haan on CodePen.

License.

script.js

WebFontConfig = {
    google: { families: [ 'Cuprum::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
 })();

style.css

$RoseQuartz:  #f7cac9;
$PeachEcho:   #f7786b;
$Serenity:    #91A8d0;
$SnorkelBlue: #034f84;
$Buttercup:   #fae03c;
$LimpetShell: #98ddde;
$LilacGray:   #9896a4;
$Fiesta:      #dd4132;
$IcedCoffee:  #b18f6a;
$GreenFlash:  #79c753;


$pink-light:  $RoseQuartz;
$salmon:      $PeachEcho;
$blue-light:  $Serenity;
$blue-dark :  $SnorkelBlue;
$yellow:      $Buttercup;
$cyan-light:  $LimpetShell;
$gray:        $LilacGray;
$red:         $Fiesta;
$tan:         $IcedCoffee;
$green:       $GreenFlash;

// http://codepen.io/MadeByMike/pen/sDpxg/
// Adapted from: https://gist.github.com/voxpelli/6304812
@function luma($color){
  $rgba: red($color), green($color), blue($color);
  $rgba2: ();
  @for $i from 1 through 3 {
    $rgb: nth($rgba, $i);
    $rgb: $rgb / 255;
    $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4));
    $rgba2: append($rgba2, $rgb);
  }
  @return (.2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3))*100;
}
@function contrast_ratio($color1, $color2) {
  $luma1: luma($color1) + 5;
  $luma2: luma($color2) + 5;
  $ratio: $luma1 / $luma2;
  @if $luma1 < $luma2 {
    $ratio: 1 / $ratio;
  }
  @return $ratio;
}

@function text-contrast($color, $bgcolor: $color) {
  $threshold: 4.5; // 4.5 = WCAG AA,7= WCAG AAA
  $list: 20 30 40 50 60 70 80 90 100;
  @each $percent in $list {
    $lighter: lighten($bgcolor, $percent);
    $darker: darken($bgcolor, $percent);
    $darker-ratio: contrast_ratio($color, $darker);
    $lighter-ratio: contrast_ratio($color, $lighter);
    @if($lighter-ratio > $darker-ratio){
      @if ($lighter-ratio > $threshold){
        @return $lighter;
      }
    }
    @if($darker-ratio > $lighter-ratio){
      @if ($darker-ratio > $threshold){
        @return $darker;
      }
    }
  }
  @return if(lightness($color) < 51, #FFF, #000)
}

* {
  // outline: 1px dotted salmon;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  box-sizing: border-box;
}
html {
  background: $gray;
  animation-name: bg-color;
  animation-duration: 90s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
body {
  font: 100%/1.5 AvenirNextCondensed-Regular, Calibri, Corbel, "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Tahoma, Verdana, sans-serif;
  margin: 0 auto;
  padding: 1em;
  padding-bottom: 3em;
  max-width: 35em;
  color: #111;
}
h1,
header p {
  letter-spacing: -1px;
  word-spacing: 1px;
  line-height: 1;
  font-size: 2.2em;
  padding: 0 16px;
  animation-name: color;
  animation-duration: 90s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
h1 {
  color: $red;
  text-transform: capitalize;

}
header {
  padding-bottom: 3em;
}
header p {
  color: $red;
  font-size: 1.75em;
  text-align: right;
  // transform: translateY(-1.03em);
  transform: translateY(-100%);
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-family: Consolas, Menlo, Monaco, monospace;
  background: $gray;
}

col:nth-of-type(1) {
  background: rgba(0,0,0,.125);
  width: 62.5%;
}
col:nth-of-type(2) {
  width: 20%;
}
col:nth-of-type(3) {
  width: 17.5%;
}
thead {
  display: table-header-group;
}
header,
thead th {
 font-family: AvenirNextCondensed-DemiBold, Calibri, Corbel, "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Tahoma, Verdana, sans-serif;
  font-weight: 700;
}
.wf-active header,
.wf-active thead th {
  font-family: Cuprum, AvenirNextCondensed-DemiBold, Calibri, Corbel, "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Tahoma, Verdana, sans-serif;
}

thead th {
  text-align: right;
  font-size: 1.125em;
  text-transform: uppercase;
}

thead th:nth-of-type(1) {
  text-align: left;
}

th[scope="col"] {
  border-bottom: 3px solid $gray;
}
th[scope="row"] {
  text-align: left;
}
th, td {
  padding: .5em 1em;
}
td:nth-of-type(1) {
  text-align: right;
}
td:nth-of-type(2) {
  text-align: right;
}
tr:nth-of-type(1) {
  background: $pink-light;
  color: text-contrast($pink-light);
}
tr:nth-of-type(2) {
  background: $salmon;
  color: text-contrast($salmon);
}
tr:nth-of-type(3) {
  background: $blue-light;
  color: text-contrast($blue-light);
}
tr:nth-of-type(4) {
  background: $blue-dark;
  color: text-contrast($blue-dark);
}
tr:nth-of-type(5) {
  background: $yellow;
  color: text-contrast($yellow);
}
tr:nth-of-type(6) {
  background: $cyan-light;
  color: text-contrast($cyan-light);
}
tr:nth-of-type(7) {
  background: $gray;
  color: text-contrast($gray);
}
tr:nth-of-type(8) {
  background: $red;
  color: text-contrast($red);
}
tr:nth-of-type(9) {
  background: $tan;
  color: text-contrast($tan);
}
tr:nth-of-type(10) {
  background: $green;
  color: text-contrast($green);
}
tr:nth-of-type(11) {
  background: $blue-dark;
  color: text-contrast($blue-dark);
}
tr:nth-of-type(12) {
  background: $green;
  color: text-contrast($green);
}
tr:nth-of-type(13) {
  background: $tan;
  color: text-contrast($tan);
}
tr:nth-of-type(14) {
  background: $yellow;
  color: text-contrast($yellow);
}
 tr:nth-of-type(15) {
  background: $cyan-light;
  color: text-contrast($cyan-light);
}
 tr:nth-of-type(16) {
  background: $red;
  color: text-contrast($red);
}

ul {
  list-style: none;
}
a {
  color: $blue-dark;
  display: inline-block;
  padding: .25em 0;
  text-decoration: none;
}
a:hover {
  color: $cyan-light;
}
footer,
footer ul {
  overflow: auto;
}
footer {
  margin: 0 auto;
  border-top: 3px solid shade($gray,15%);
  padding: 2em 1em 1em;
  background: $gray;
}

thead th,
thead tr:first-of-type,
tfoot tr:first-of-type {
  background: adjust-color($gray, $lightness: -40%);
}

thead th,
thead tr:first-of-type a,
tfoot tr:first-of-type a {
  color: text-contrast(adjust-color($gray, $lightness: -40%));
}

footer li {
  font-size: .875em;
  text-align: center;
}
footer a {
  float: left;
  width: 100%;
}
@keyframes bg-color {
  0% {
    background: #fff;
  }
  6% {
    background: #fff;
  }
  6.6% {
    background: $pink-light;
  }
  12.6% {
    background: $pink-light;
  }
  13.2% {
    background: $salmon;
  }
  19.2% {
    background: $salmon;
  }
  19.8% {
    background: $blue-light;
  }
  25.8% {
    background: $blue-light;
  }
  26.4% {
    background: $blue-dark;
  }
  32.4% {
    background: $blue-dark;
  }
  33% {
    background: $yellow;
  }
  39% {
    background: $yellow;
  }
  39.6% {
    background: $cyan-light;
  }
  45.6% {
    background: $cyan-light;
  }
  46.2% {
    background: $gray;
  }
  52.2% {
    background: $gray;
  }
  52.8% {
    background: $red;
  }
  58.8% {
    background: $red;
  }
  59.4% {
    background: $tan;
  }
  65.4% {
    background: $tan;
  }
  66% {
    background: $green;
  }
  72% {
    background: $green;
  }
  72.6% {
    background: $yellow;
  }
  78.6% {
    background: $yellow;
  }
  79.2% {
    background: $cyan-light;
  }
  85.2% {
    background: $cyan-light;
  }
  85.8% {
    background: $red;
  }
  91.8% {
    background: $red;
  }
  92.4% {
    background: $pink-light;
  }
}

@keyframes color {
  0% {
    color: $green;
  }
  6% {
    color: $green;
  }
  6.6% {
    color: $tan;
  }
  12.6% {
    color: $tan;
  }
  13.2% {
    color: adjust-color($red, $lightness: -10%);
  }
  19.2% {
    color: adjust-color($red, $lightness: -10%);
  }
  19.8% {
    color: $blue-dark;
  }
  25.8% {
    color: $blue-dark;
  }
  26.4% {
    color: $cyan-light;
  }
  32.4% {
    color: $cyan-light;
  }
  33% {
    color: $green;
  }
  39% {
    color: $green;
  }
  39.6% {
    color: $blue-dark;
  }
  45.6% {
    color: $blue-dark;
  }
  46.2% {
    color: white;
  }
  52.2% {
    color: white;
  }
  52.8% {
    color: adjust-color($pink-light, $lightness: 5%);
  }
  58.8% {
    color: adjust-color($pink-light, $lightness: 5%);
  }
  59.4% {
    color: $cyan-light;
  }
  65.4% {
    color: $cyan-light;
  }
  66% {
    color: $yellow;
  }
  72% {
    color: $yellow;
  }
  72.6% {
    color: $red;
  }
  78.6% {
    color: $red;
  }
  79.2% {
    color: $gray;
  }
  85.2% {
    color: $gray;
  }
  85.8% {
    color: $cyan-light;
  }
  91.8% {
    color: $cyan-light;
  }
  92.4% {
    color: $red;
  }
}