Color Pallete

by budyniowski

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Quicksand" rel="stylesheet">

<div class="container" style="height: 700px;">
    <div id="main_wrapper" class="">
      <div class="row colors" id="colors">
        <div class="col-md-15 color_wrapper">
          <div class="color" style="background-color: #ffffff" data-id="4" data-color="#434049" data-locked="false">
            <div class="swipe"></div>
          </div>
          <div class="color_tools">
            <h3>Site background</h3>
          </div>
        </div>
        <div class="col-md-15 color_wrapper">
          <div class="color" style="background-color: #0068b3;" data-id="0" data-color="#f2f4f2" data-locked="false">
            <div class="swipe"></div>
          </div>
          <div class="color_tools">
            <h3>Primary color</h3>
          </div>
          <div class="color_tools">
          </div>
        </div>
        <div class="col-md-15 color_wrapper">
          <div class="color" style="background-color: #929292;" data-id="1" data-color="#807581" data-locked="false">
            <div class="swipe"></div>
          </div>
          <div class="color_tools">
            <h3>Secondary color</h3>
          </div>
        </div>
      </div>
      <div id="main_wrapper_bg"></div>
      <div id="main_wrapper" class="">
        <div class="row colors" id="colors">
          <div class="col-md-15 color_wrapper">
            <div class="color" style="background-color: #3c3c3c" data-id="2" data-color="#a49c9f" data-locked="false">
              <div class="swipe"></div>
            </div>
            <div class="color_tools">
              <h3>Text color</h3>
            </div>
          </div>
          <div class="col-md-15 color_wrapper">
            <div...

CSS

body, html{
font: normal 16px/1.6 'Open Sans', helvetica, arial, sans-serif;
background-color: #191919!important;
color: #8e8e8e;
border:0;
padding: 0;
border: 0;
}

h1, h2, h3{
font-family: 'Quicksand', helvetica, arial, sans-serif;
font-weight: normal;
}

h2{
margin: 1em 0;
}

p{
margin: 1em 0;
}

a{
color: #eee;
}

a:hover, a:focus{
color: #fff;
}

.navbar{
font: normal 1em 'Quicksand', helvetica, arial, sans-serif;
overflow: visible;
margin-bottom: 0;
}

.navbar-brand{
font-size: 1.3em;
line-height: 3.2em;
}

.navbar-brand img{
display: inline-block;
width: 1.8em;
height: auto;
margin-top: -0.5em;
}

.social{
margin-left: 2em;
}

.social a{
margin: 0 5px;
cursor: pointer;
}

.social img{
width: auto;
height: 1em;
opacity: 0.5;
margin-top: -0.3em;
}

.social a:hover img{
opacity: 1;
}

/* navbar */
.navbar-default {
    background-color: #111;
    border-color: #111;
    height: 6em;
}

.navbar-static-top {
    min-height: 4em;
    position: relative;
    z-index: 2;
}

.navbar-sub{
position: relative;
z-index: 1;
}

.navbar-nav > li > a {
	padding: 0 2em;
    line-height: 6em;
}

.navbar-nav.social > li > a {
padding: 0 0.5em;
}

.navbar-nav > li > a, .navbar-nav.social > li > a {
transition: padding 1s, width 1s;
}

/* Title */
.navbar-default .navbar-brand {
    color: #c3c3c3;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #fff;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #c3c3c3;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #fff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #c3c3c3;
    background-color: #111;
    border-bottom: 1px solid #666;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #c3c3c3;
    background-color: #111;
}
/*...