A Pen by Jan Reimers.

Flat-UI-Colors.markdown

Flat UI Colors

responsive flat color palette showing some wonderful colors. and it's all done with the beauty of css dreamyvoice haha

A Pen by Jan Reimers on CodePen.

License.

index.html

<div class="turquoise"><p>Turquoise</p></div>
<div class="emerland"><p>Emerland</p></div>
<div class="peterriver"><p>Peter River</p></div>
<div class="amethyst"><p>Amethyst</p></div>
<div class="wetasphalt"><p>Wet Asphalt</p></div>
<div class="greensea"><p>Green Sea</p></div>
<div class="nephritis"><p>Nephritis</p></div>
<div class="belizehole"><p>BelizeHole</p></div>
<div class="wisteria"><p>Wisteria</p></div>
<div class="midnightblue"><p>Midnight Blue</p></div>
<div class="sunflower"><p>Sun Flower</p></div>
<div class="carrot"><p>Carrot</p></div>
<div class="alizarin"><p>Alizarin</p></div>
<div class="clouds"><p>Clouds</p></div>
<div class="concrete"><p>Concrete</p></div>
<div class="orange"><p>Orange</p></div>
<div class="pumpkin"><p>Pumpkin</p></div>
<div class="pomegranate"><p>Pomegranate</p></div>
<div class="silver"><p>Silver</p></div>
<div class="asbestos"><p>Asbestos</p></div>

script.js

// inspired by flatuicolors.com
// they've built that in flash, dunno why
//
// update: okay, so they use flash only to
// copy to clipboard, see comments for discussion

style.css

@import url(http://fonts.googleapis.com/css?family=Carrois+Gothic+SC);
* { box-sizing: border-box }
html, body {
  width: 100%;
  height: 100%;
}
div {
  float: left;
  display: block;
  color: #fff;
  width: 20%;
  height: 25%;
  position: relative;
  transition: opacity 0.5s ease;
}
div:hover {
  opacity: 0.85;
}
p {
  font-family: 'Carrois Gothic SC';
  font-size: 1em;
  position: absolute;
  bottom: 0;
  padding-left: 0.5em;
  margin-bottom: 0.3em;
  text-transform: uppercase;
}
.turquoise { background: #1abc9c; }
.emerland { background: #2ecc71; }
.peterriver { background: #3498db; }
.amethyst { background: #9b59b6; }
.wetasphalt { background: #34495e; }
.greensea { background: #16a085; }
.nephritis { background: #27ae60; }
.belizehole { background: #2980b9; }
.wisteria { background: #8e44ad; }
.midnightblue { background: #2c3e50; }
.sunflower { background: #f1c40f; }
.carrot { background: #e67e22; }
.alizarin { background: #e74c3c; }
.clouds { background: #ecf0f1; color: #999; }
.concrete { background: #95a5a6; }
.orange { background: #f39c12; }
.pumpkin { background: #d35400; }
.pomegranate { background: #c0392b; }
.silver { background: #bdc3c7; }
.asbestos { background: #7f8c8d; }