.set-pen-color
  %span.black
    \<html style="color: 
  %span.color-button
    %input#colorPicker.color-picker{type: 'color', value: '#b262ff'}
    %input#colorValue.color-value{type: 'text'}
  %span.black
    \;">

.example
  .header
    .container
      %h1 
        %span.white The mainstream call-to-action that you have seen everywhere
      %h2.white.translucent
        Don’t forget this subtitle that is super important.

      %a.button.cta.background{ href: '#' } 
        %span.white Woah, a button
         
      %a.button.white-button.background{ href: '#' } 
        %span White button this time
        
  .artwork
    .one
    .two
    .three
    .four
  
  .svg-fill-section
    .container.flex.center
      .third
        <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg viewBox="0 0 115 115" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch --> <title>Artboard 2</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Artboard-2" fill="#000000"> <path d="M57.5936335,113.499182 C35.8790532,113.534118 16.1386964,100.901831 7.07324982,81.1700829 C-1.9921968,61.4383344 1.28268435,38.2320531 15.4544688,21.7795534 C29.6262533,5.32705375 52.0914355,-1.34916737 72.948345,4.69347654 L67.9534388,12.9628212 C48.7887684,8.55801128 28.9342718,16.7534453 18.4565483,33.3938857 C7.97882493,50.034326 9.16919946,71.4807519 21.4241299,86.8594262 C33.6790603,102.2381 54.3185728,108.185932 72.8780501,101.68726 C91.4375275,95.1885877 103.858284,77.6645759 103.842764,58.0002249 C103.843204,52.711651 102.919757,47.4636552 101.114066,42.4928913 L106.987705,32.7435745 C115.801421,49.9428077 115.026593,70.4897955 104.942584,86.976395 C94.8585749,103.462994 76.9196534,113.511584 57.5936335,113.499182 L57.5936335,113.499182 Z M61.8485536,73.5815571 C61.638994,74.1992495 61.2909637,74.7608439 60.8310727,75.2234013 C59.9585035,76.1043789 58.7349523,76.5445174 57.5011353,76.4212538 C55.5199151,76.55952 53.7101227,75.2984412 53.1537169,73.3919357 L35.4865489,55.7340175 C34.0251458,54.087043 34.0992191,51.5868249 35.6555622,50.0292563 C37.2119053,48.4716877 39.7120643,48.3956466 41.3601885,49.8557529 L56.3911561,64.8913454 L90.5692639,14.1375491 C91.1676342,13.0426889 92.1829901,12.2360426 93.3848004,11.900755 C94.5866107,11.5654673 95.8729075,11.7299859 96.951644,12.3569575 C99.1840118,13.7343641 99.9208284,16.6345559 98.6166127,18.9104594 L61.8485536,73.5815571 Z" id="checkmark"></path> </g> </g> </svg>
        %p.black
          Yes, we do that thing.
      .third
        <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg viewBox="0 0 111 111" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch --> <title>stats1 copy</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Artboard-2-Copy" transform="translate(-3.000000, -3.000000)" fill="#101010"> <g id="stats1-copy" transform="translate(3.000000, 3.000000)"> <path d="M106.375,111 L4.625,111 C2.07068303,111 0,108.929317 0,106.375 L0,4.625 C0,2.07068303 2.07068303,0 4.625,0 C7.17931697,0 9.25,2.07068303 9.25,4.625 L9.25,101.75 L106.375,101.75 C108.929317,101.75 111,103.820683 111,106.375 C111,108.929317 108.929317,111 106.375,111 L106.375,111 Z M83.25,92.5 C80.695683,92.5 78.625,90.429317 78.625,87.875 L78.625,37 C78.625,34.445683 80.695683,32.375 83.25,32.375 C85.804317,32.375 87.875,34.445683 87.875,37 L87.875,87.875 C87.875,90.429317 85.804317,92.5 83.25,92.5 L83.25,92.5 Z M64.75,92.5 L64.75,92.5 C62.195683,92.5 60.125,90.429317 60.125,87.875 L60.125,55.5 C60.125,52.945683 62.195683,50.875 64.75,50.875 L64.75,50.875 C67.304317,50.875 69.375,52.945683 69.375,55.5 L69.375,87.875 C69.375,90.429317 67.304317,92.5 64.75,92.5 L64.75,92.5 Z M46.25,92.5 C43.695683,92.5 41.625,90.429317 41.625,87.875 L41.625,13.875 C41.625,11.320683 43.695683,9.25 46.25,9.25 C48.804317,9.25 50.875,11.320683 50.875,13.875 L50.875,87.875 C50.875,90.429317 48.804317,92.5 46.25,92.5 L46.25,92.5 Z M27.75,92.5 C25.195683,92.5 23.125,90.429317 23.125,87.875 L23.125,41.625 C23.125,39.070683 25.195683,37 27.75,37 C30.304317,37 32.375,39.070683 32.375,41.625 L32.375,87.875 C32.375,90.429317 30.304317,92.5 27.75,92.5 L27.75,92.5 Z" id="stats1"></path> </g> </g> </g> </svg>
        %p.black
          Graphs are cool right
      .third
        <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg viewBox="0 0 112 103" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch --> <title>cloud-up copy</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Artboard-2" transform="translate(-1.000000, -5.000000)" fill="#101010"> <g id="cloud-up-copy" transform="translate(1.000000, 5.000000)"> <path d="M93.4594862,77.3622924 L93.4594862,65.8304348 L92.945124,65.8304348 C103.089076,55.9455271 105.65982,40.6026808 99.2943169,27.936853 C92.928814,15.2710251 79.1003885,8.21377801 65.1410337,10.5069468 C51.1816789,12.8001157 40.3223498,23.9129363 38.32079,37.9532609 L28.5849802,37.9532609 C20.2050569,37.928525 12.8574537,43.5605536 10.6833699,51.6750664 C8.50928608,59.7895792 12.0529847,68.3551785 19.3171937,72.5441875 L19.3171937,82.7100636 C6.5525071,78.2093873 -1.11089833,65.1311554 1.18176678,51.7604653 C3.47443189,38.3897753 15.054084,28.6286834 28.5849802,28.6608696 C29.3866438,28.6608696 30.1373345,28.8281326 30.9019269,28.8978255 C36.8480232,11.6783184 53.2309461,0.302244325 71.3989088,0.777283807 C89.5668715,1.25232329 105.336173,13.4690847 110.379078,30.9759223 C115.421983,48.4827599 108.577217,67.2482157 93.4594862,77.3622924 L93.4594862,77.3622924 Z M52.8156082,49.0483761 C52.8758488,48.974037 52.9638928,48.9368674 53.0287673,48.8671745 C53.3593128,48.4623867 53.7614603,48.1221739 54.215044,47.8635962 L54.215044,47.8635962 C54.7410484,47.5578022 55.3317289,47.3810828 55.9388523,47.3478685 L56.0176285,47.3478685 L56.1705469,47.3199913 C56.2446892,47.3199913 56.3095637,47.2735293 56.383706,47.2735293 C56.4580564,47.2791317 56.531314,47.2947598 56.601499,47.3199913 C56.6524718,47.3199913 56.6988108,47.3199913 56.7497836,47.3478685 C56.7965959,47.3620396 56.8447291,47.3713804 56.8934343,47.3757457 C57.3023526,47.3909684 57.706105,47.4725609 58.0889788,47.6173478 C58.2557989,47.6870408 58.3855479,47.7939033 58.5523681,47.8775348 C58.8736716,48.0395629 59.172722,48.2425825 59.4420756,48.4815402 C59.5829746,48.6386245 59.7115614,48.8063865 59.8266887,48.9833293 L77.3984121,60.872944 C79.5605759,62.5272641 80.2385312,65.4924032 79.0110069,67.925869 C78.5551418,69.0641358 77.6131592,69.9366856 76.4454218,70.3023472 C75.2776844,70.6680088 74.0078672,70.4880549 72.9869457,69.8122245 L61.0222332,61.6906745 L61.0222332,98.3538043 C61.0222332,100.919827 58.9475685,103 56.3883399,103 C53.8291113,103 51.7544466,100.919827 51.7544466,98.3538043 L51.7544466,61.6906745 L39.7897342,69.7843473 C38.7683729,70.4584253 37.4992291,70.6373811 36.3320594,70.2718973 C35.1648898,69.9064135 34.2228944,69.0350685 33.7656729,67.8979918 C32.5420579,65.464049 33.2194156,62.5015238 35.3782678,60.8450668 L52.8156082,49.0483761 Z" id="cloud-up"></path> </g> </g> </g> </svg>
        %p.black
          Clouds are just white bushes.
    
  .light-section
    .container
      %h2
        Light Section
      %p.black
        Our Immersive Innovation solution offers industry leaders a suite of long-term offerings. We thrive because of our knowledge transfer bandwidth and next-generation prince2 practitioner culture. Our business impacts action points to virtually and dynamically invest our innovative deliverable. In the market focus space, industry is effectively aligning its mobile enterprises.
      %p.black
        In the future, will you be able to iteratively reuse ballpark figures in your business? In the future, will you be able to reliably leverage standpoints in your business? It's critical that we give 110% when intelligently revolutionizing brands. Change the way you do business - adopt world-class platforms.
  
    
  .dark-section
    .container
      %h2
        Dark Section
      %p.white.translucent
        Our Immersive Innovation solution offers industry leaders a suite of long-term offerings. We thrive because of our knowledge transfer bandwidth and next-generation prince2 practitioner culture. Our business impacts action points to virtually and dynamically invest our innovative deliverable. In the market focus space, industry is effectively aligning its mobile enterprises.
View Compiled
@import 'https://fonts.googleapis.com/css?family=Lato:300,400,500|Oxygen+Mono';

* { box-sizing: border-box; }

body {
  font-weight: 300;
  font-family: 'Lato', sans-serif;
}

.black {
  color: #444;
}

.white {
  color: white;
}

.background {
  background: currentColor;
}

.translucent {
  opacity: 0.7;
}

.center {
  text-align: center;
}

.set-pen-color {
  z-index: 2;
  position: fixed;
  width: 100%;
  box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.15); 
  padding: 1.5em;
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid #ebebeb;
  font-family: 'Oxygen Mono', monospace;
  font-size: .8em;
  text-align: center;
  .color-button {
    position: relative;
    display:inline-block;
    margin-left: -0.5em;
    margin-right: -0.5em;
  }
  input {
    margin-top: -0.1em;
    vertical-align: middle;
    color: currentColor;
    max-width: 5.5em; 
    outline: none;
    border: none;
    background: transparent;
    appearance: none;
    &[type*="text"] {
      border: 1px solid currentColor;
      padding: 0.1em 0.5em;
      border-radius: 3px;
    } 
    &[type*="color"] { 
      cursor: pointer;
      opacity: 1;
      position: absolute;
      display: block;
      width: 6em;
      margin-top: -0.2em;
      opacity: 0;
      margin-left: -0.2em;
    }
  }
}

.container {
  padding: 2em;
  max-width: 40em;
  margin: 0 auto;
}

.pb-0 { padding-bottom: 0;}
.pt-0 { padding-top: 0;}

.header {
  padding: 7em 0 5em 0;
  background: currentColor url('https://images.unsplash.com/photo-1451523217094-c60a00eda8c1?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=15533175633c20d07c05175b0351a22a') center no-repeat;
  background-size: cover;
  background-blend-mode: multiply;

h2, h1 {
  text-shadow: 0px 2px 4px rgba(0,0,0,0.20);
}

h1 {
  font-weight: 300;
  font-size: 2.6em;
  margin: 0.3em 0;
}

h2 {
  margin-top: 0;
  margin-bottom: 2em;
  font-weight: 300;
  font-size: 1.3em;
}
}

p {
  font-size: .9em;
  line-height: 1.7em;
}

a {
  color: inherit;
}

.button {
  display: inline-block;
  text-decoration: none;
  padding: 0.4em 1em 0.5em;
  border-radius: 0.3em;
  transition: all 0.2s ease;
  box-shadow: 0px 7px 12px 0px rgba(0,0,0,0.1);
  background-image: linear-gradient(-180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 100%);
  transform: scale(1);
  &:hover {
    transform: scale(1.05);
    box-shadow: 0px 7px 12px 0px rgba(0,0,0,0.3);
    background-image: linear-gradient(-180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%);  
  }
  &.white-button {
    background: white;  
    &:hover {
      background: currentColor;
      span {
        color: white;   
      }
    }
  }
}

.artwork {
  width: 100%;
  height: 0.5em;
  background: currentColor;
  > * {
    width: 25%;
    height: 100%;
    float: left;
  }
  .one {
    background: rgba(0,0,0,0.2)
  }
  .two {
    background: rgba(0,0,0,0.5)
  }
  .three {
    background: rgba(0,0,0,0.4)
  }
  .four {
    background: rgba(0,0,0,0.6)
  }
}

.light-section {
  padding: 1em 0;
  background: currentColor; 
  background-image: linear-gradient(-180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%);
}


.dark-section {
  padding: 1em 0;
  background: currentColor; 
  background-image: linear-gradient(-180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%);
}

.flex {
  display: flex;
}

.third {
  padding-top: 2em;
  width: 33%;
}

.third svg {
  * {
    fill: currentColor;
  }
  width: 3em;
  height: 3em;
}
var $penColor = $('#colorPicker').val() 

$(document).ready(function(){
  $('#colorValue').val($penColor);
  document.documentElement.style.color = $penColor
  var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
  if (isSafari) {
    $('#colorPicker').css('display', 'none'); 
  }
})

$('#colorPicker').change(function() {
    $penColor = $(this).val()
    $('#colorValue').val($penColor);
    document.documentElement.style.color = $penColor
});

$('#colorValue').change(function() {
    $penColor = $(this).val()
    $('#colorPicker').val($penColor);
    document.documentElement.style.color = $penColor
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js