.color-preview {
  height: 100px;
  color: #fff; }
  .color-preview-default, .color-preview-active {
    height: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .color-preview-default {
    -webkit-border-top-left-radius: 2px;
            border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
            border-top-right-radius: 2px; }
  .color-preview-active {
    -webkit-border-bottom-left-radius: 2px;
            border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
            border-bottom-right-radius: 2px; }

.color-preview-primary .color-preview-default {
  background: #25628F; }

.color-preview-primary .color-preview-active {
  background: #1d4c6f; }

.color-preview-info .color-preview-default {
  background: #42a5f5; }

.color-preview-info .color-preview-active {
  background: #1e88e5; }

.color-preview-success .color-preview-default {
  background: #4caf50; }

.color-preview-success .color-preview-active {
  background: #388e3c; }

.color-preview-warning .color-preview-default {
  background: #ffb300; }

.color-preview-warning .color-preview-active {
  background: #ff8f00; }

.color-preview-danger .color-preview-default {
  background: #ef5350; }

.color-preview-danger .color-preview-active {
  background: #e53935; }

.color-preview-secondary {
  color: #333; }
  .color-preview-secondary .color-preview-default {
    background: #ebebeb; }
  .color-preview-secondary .color-preview-active {
    background: #d7d7d7; }

.color-preview-cinnabar .color-preview-default {
  background: #e74c3c; }

.color-preview-cinnabar .color-preview-active {
  background: #dc3125; }

.color-preview-zest .color-preview-default {
  background: #e67e22; }

.color-preview-zest .color-preview-active {
  background: #da5e13; }

.color-preview-supernova .color-preview-default {
  background: #ffcd02; }

.color-preview-supernova .color-preview-active {
  background: #ffb901; }

.color-preview-pavlova .color-preview-default {
  background: #d5c295; }

.color-preview-pavlova .color-preview-active {
  background: #c3ab76; }

.color-preview-pickled-bluewood .color-preview-default {
  background: #34495e; }

.color-preview-pickled-bluewood .color-preview-active {
  background: #1f2f40; }

.color-preview-mine-shaft .color-preview-default {
  background: #2b2b2b; }

.color-preview-mine-shaft .color-preview-active {
  background: #191919; }

.color-preview-wisteria .color-preview-default {
  background: #9b59b6; }

.color-preview-wisteria .color-preview-active {
  background: #7c3c9c; }

.color-preview-ming .color-preview-default {
  background: #3a6f81; }

.color-preview-ming .color-preview-active {
  background: #1f2f40; }

.color-preview-curious-blue .color-preview-default {
  background: #3498db; }

.color-preview-curious-blue .color-preview-active {
  background: #1f79cb; }

.color-preview-shamrock .color-preview-default {
  background: #2ecc71; }

.color-preview-shamrock .color-preview-active {
  background: #1bb751; }

.color-preview-mountain-meadow .color-preview-default {
  background: #1abc9c; }

.color-preview-mountain-meadow .color-preview-active {
  background: #0ea37d; }

.color-preview-porcelain {
  color: #000; }
  .color-preview-porcelain .color-preview-default {
    background: #ecf0f1; }
  .color-preview-porcelain .color-preview-active {
    background: #e3e9ea; }

.color-preview-cascade .color-preview-default {
  background: #95a5a6; }

.color-preview-cascade .color-preview-active {
  background: #768889; }

.color-preview-killarney .color-preview-default {
  background: #345f41; }

.color-preview-killarney .color-preview-active {
  background: #1f4129; }

.color-preview-blue-marguerite .color-preview-default {
  background: #745ec5; }

.color-preview-blue-marguerite .color-preview-active {
  background: #5440ae; }

.color-preview-millbrook .color-preview-default {
  background: #5e4534; }

.color-preview-millbrook .color-preview-active {
  background: #402c1f; }

.color-preview-cosmic .color-preview-default {
  background: #5e345e; }

.color-preview-cosmic .color-preview-active {
  background: #401f40; }

.color-preview-flory .color-preview-default {
  background: #ef717a; }

.color-preview-flory .color-preview-active {
  background: #e7515a; }

.color-preview-atlantis .color-preview-default {
  background: #a5c63b; }

.color-preview-atlantis .color-preview-active {
  background: #88b024; }

.color-preview-persian-pink .color-preview-default {
  background: #f47cc3; }

.color-preview-persian-pink .color-preview-active {
  background: #ee5cac; }

.color-preview-nutmeg .color-preview-default {
  background: #79302a; }

.color-preview-nutmeg .color-preview-active {
  background: #591c18; }

.color-preview-donkey-brown .color-preview-default {
  background: #a38671; }

.color-preview-donkey-brown .color-preview-active {
  background: #856651; }

.color-preview-perano .color-preview-default {
  background: #b8c9f1; }

.color-preview-perano .color-preview-active {
  background: #9eb3ea; }

.color-preview-kashmir-blue .color-preview-default {
  background: #5065a1; }

.color-preview-kashmir-blue .color-preview-active {
  background: #344683; }

.color-preview-dark-tan .color-preview-default {
  background: #630a10; }

.color-preview-dark-tan .color-preview-active {
  background: #42060f; }

.color-preview-persian-green .color-preview-default {
  background: #02a388; }

.color-preview-persian-green .color-preview-active {
  background: #006758; }

.color-preview-royal-blue .color-preview-default {
  background: #4160de; }

.color-preview-royal-blue .color-preview-active {
  background: #2a4085; }

.color-preview-crusta .color-preview-default {
  background: #e79716; }

.color-preview-crusta .color-preview-active {
  background: #f96800; }

.color-preview-medium-purple .color-preview-default {
  background: #9043d8; }

.color-preview-medium-purple .color-preview-active {
  background: #5b2e81; }

.color-preview-cerise-red .color-preview-default {
  background: #e23e57; }

.color-preview-cerise-red .color-preview-active {
  background: #882535; }
