Flat UI Colors

flatuicolors-input-HTML.html

<h1 class="emerald bg-midnight_blue">Lorem ipsum dolor sit amet</h1>

flatuicolors-input.scss

// ----
// Sass (v3.2.13)
// Compass (v0.12.2)
// ----

/*
flatuicolors.com
*/

$colors: (
  turquoise     #1abc9c,
  emerald       #2ecc71,
  green_sea     #16a085,
  nephritis     #27ae60,
  peter_river   #3498db,
  belize_hole   #2980b9,
  amethyst      #9b59b6,
  wisteria      #8e44ad,
  wet_asphalt   #34495e,
  midnight_blue #2c3e50,
  sun_flower    #f1c40f,
  carrot        #e67e22,
  orange        #f39c12,
  pumpkin       #d35400,
  alizarin      #e74c3c,
  pomegranate   #c0392b,
  clouds        #ecf0f1,
  silver        #bdc3c7,
  concrete      #95a5a6,
  asbestos      #7f8c8d
);

@each $color in $colors {
  .#{nth($color, 1)} {
    color: nth($color, 2);
  }
    .bg-#{nth($color, 1)} {
    background-color: nth($color, 2);
  }
}

body {
  @extend .bg-amethyst;
}

flatuicolors-output.css

/*
flatuicolors.com
*/
.turquoise {
  color: #1abc9c;
}

.bg-turquoise {
  background-color: #1abc9c;
}

.emerald {
  color: #2ecc71;
}

.bg-emerald {
  background-color: #2ecc71;
}

.green_sea {
  color: #16a085;
}

.bg-green_sea {
  background-color: #16a085;
}

.nephritis {
  color: #27ae60;
}

.bg-nephritis {
  background-color: #27ae60;
}

.peter_river {
  color: #3498db;
}

.bg-peter_river {
  background-color: #3498db;
}

.belize_hole {
  color: #2980b9;
}

.bg-belize_hole {
  background-color: #2980b9;
}

.amethyst {
  color: #9b59b6;
}

.bg-amethyst, body {
  background-color: #9b59b6;
}

.wisteria {
  color: #8e44ad;
}

.bg-wisteria {
  background-color: #8e44ad;
}

.wet_asphalt {
  color: #34495e;
}

.bg-wet_asphalt {
  background-color: #34495e;
}

.midnight_blue {
  color: #2c3e50;
}

.bg-midnight_blue {
  background-color: #2c3e50;
}

.sun_flower {
  color: #f1c40f;
}

.bg-sun_flower {
  background-color: #f1c40f;
}

.carrot {
  color: #e67e22;
}

.bg-carrot {
  background-color: #e67e22;
}

.orange {
  color: #f39c12;
}

.bg-orange {
  background-color: #f39c12;
}

.pumpkin {
  color: #d35400;
}

.bg-pumpkin {
  background-color: #d35400;
}

.alizarin {
  color: #e74c3c;
}

.bg-alizarin {
  background-color: #e74c3c;
}

.pomegranate {
  color: #c0392b;
}

.bg-pomegranate {
  background-color: #c0392b;
}

.clouds {
  color: #ecf0f1;
}

.bg-clouds {
  background-color: #ecf0f1;
}

.silver {
  color: #bdc3c7;
}

.bg-silver {
  background-color: #bdc3c7;
}

.concrete {
  color: #95a5a6;
}

.bg-concrete {
  background-color: #95a5a6;
}

.asbestos {
  color: #7f8c8d;
}

.bg-asbestos {
  background-color: #7f8c8d;
}

flatuicolors-rendered.html

<h1 class="emerald bg-midnight_blue">Lorem ipsum dolor sit amet</h1>