Skip to content

Instantly share code, notes, and snippets.

@tungsheng

tungsheng/Pantone Fashion Colors - Spring 2016.markdown

Created December 17, 2015 15:40
Show Gist options
  • Save tungsheng/026702e6783d45a146ce to your computer and use it in GitHub Desktop.
Save tungsheng/026702e6783d45a146ce to your computer and use it in GitHub Desktop.
Download ZIP
Pantone Fashion Colors - Spring 2016
Raw
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>
Raw
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.

Raw
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);
})();
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment