color palette

color-palette.markdown

color palette

A Pen by Philipp on CodePen.

License.

index.html

<div class="title">
<h1>Color Palettes</h1>
  <p>Click the color code to change the color!</p>
</div>
<div class="container"> 
  <div class="colors">
    <div id="colf1">
      <label for="col1" id="colp1"> </label>
      <input type="color" class="col" id="col1" value="#f8b195">
    </div>
    <div id="colf2">
      <label for="col2" id="colp2"></label>
      <input type="color" class="col" id="col2" value="#f67280">
    </div>
    <div id="colf3">
      <label for="col3" id="colp3"></label>
      <input type="color" class="col" id="col3" value="#c06c84">
    </div>
    <div id="colf4">
      <label for="col4" id="colp4"></label>
      <input type="color" class="col" id="col4" value="#6c5b7b">
    </div>
    <div id="colf5">
      <label for="col5" id="colp5"></label>
       <input type="color" class="col" id="col5" value="#355c7d">
    </div>
  </div>
</div>
<footer>
  <p>Design and color palette by: <a href=" http://www.behance.net/gallery/32154055/Minimalist-palettes-2015">Duminda Perera</a></p>
</footer>

script.js

var isDark = function(color) {
  var rgb = hexToRgb(color);
  return (rgb.r + rgb.g + rgb.b) < 3 * 256 / 1.4;
};
var hexToRgb = function(hex) {
  // Expand shorthand form e.g. "03F" to full form e.g. "0033FF"
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

var changeColors = function() {
  var background = "linear-gradient(to bottom," + $('#col1').val() + "  0%, " + $('#col2').val() + " 25%, " + $('#col3').val() + " 50%, " + $('#col4').val() + " 75%, " + $('#col5').val() + " 100%)";

  $('body').css({
    background: background
  });
  $('.colors').css({
    background: background
  });
  $('#colf1').css({
    background: $('#col1').val()
  });
  $('#colf2').css({
    background: $('#col2').val()
  });
  $('#colf3').css({
    background: $('#col3').val()
  });
  $('#colf4').css({
    background: $('#col4').val()
  });
  $('#colf5').css({
    background: $('#col5').val()
  });
  $('#colp1').html(
    $('#col1').val()
  );
  $('#colp2').html(
    $('#col2').val()
  );
  $('#colp3').html(
    $('#col3').val()
  );
  $('#colp4').html(
    $('#col4').val()
  );
  $('#colp5').html(
    $('#col5').val()
  );
  $('#colp1').css("color", isDark($('#col1').val()) ? '#fff' : '#000');
   $('#colp2').css("color", isDark($('#col2').val()) ? '#fff' : '#000');
   $('#colp3').css("color", isDark($('#col3').val()) ? '#fff' : '#000');
   $('#colp4').css("color", isDark($('#col4').val()) ? '#fff' : '#000');
   $('#colp5').css("color", isDark($('#col5').val()) ? '#fff' : '#000');

};
$(document).ready(function() {
  changeColors();
});
$(function() {
  $(".col").change(function() {
    changeColors();
  })
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(//brick.a.ssl.fastly.net/Roboto:200,300,400,500,700,900);
body {
  height: 100vh;
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Roboto", san-serif;
}

body:after {
  content: "";
  background-color: #8f8f8f;
  background-image: url("http://www.transparenttextures.com/patterns/black-paper.png");
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  position: fixed;
  opacity: 0.4;
  z-index: -1;
}

.title, footer {
  text-align: center;
  color: #fff;
}

.title p {
  font-weight: 200;
}

footer {
  padding: 1rem;
}
footer a {
  color: #fff;
  link-decoration: none;
}

.colors {
  box-shadow: 50px 50px 100px 1px rgba(0, 0, 0, 0.5);
  width: 33%;
  margin: auto;
}

label {
  display: inline-block;
  margin: 0;
  padding: 1em 2em 1em 2em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 300;
  font-size: 0.8em;
  letter-spacing: 0.15em;
}

.colors div {
  position: relative;
}

.colors div:first-child {
  padding-top: 8em;
}

.colors div:last-child {
  padding-bottom: 20em;
}

input[type="color"] {
  border: 1px solid red;

  opacity: 0;
  background: transparent;
  position: relative;
  z-index: 2;
}



input:active {
  outline: 0;
}