Colors

by JamesKyle

HTML

<div class="row">
    <div class="col-2" style="background: #ffffff"></div>
    <div class="col-2" style="background: #f2f2f2"></div>
    <div class="col-2" style="background: #d9d9d9"></div>
    <div class="col-2" style="background: #808080"></div>
    <div class="col-2" style="background: #262626"></div>
    <div class="col-2" style="background: #000000"></div>
</div>
<div class="row">
    <div class="col-2" style="background: #1fb8eb"></div>
    <div class="col-2" style="background: #eb1fb8"></div>
    <div class="col-2" style="background: #1febb8"></div>
    <div class="col-2" style="background: #b8eb1f"></div>
    <div class="col-2" style="background: #b1f8eb"></div>
    <div class="col-2" style="background: #ebb81f"></div>
</div>
<hr>
<div class="row">
    <div class="col-2" style="background: #1fb8eb"></div>
    <div class="col-2" style="background: #fe192a"></div>
    <div class="col-2" style="background: #ffc819"></div>
    <div class="col-2" style="background: #36bf0c"></div>
    <div class="col-2" style="background: #f2f2f2"></div>
    <div class="col-2" style="background: #262626"></div>
</div>

CSS

.row [class|="col"] {
    height: 2em;
}

*:hover {
  outline: 1px solid #f00;
  outline-offset: -1px;
}
* {
  box-sizing: border-box;
}
.row {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  *zoom: 1;
}
.row::before,
.row::after {
  content: "";
  display: table;
}
.row::after {
  clear: both;
}
.row .row {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 -14px;
}
.row .row.collapse {
  margin: 0;
}
.row.collpase [class|=".col"] {
  padding: 0;
}
[class|="col"] {
  position: relative;
  float: left;
  min-height: 1px;
  padding: 0 14px;
}
[class|="col"].centered {
  float: none;
  margin: 0 auto;
}
[class|="col"] + [class|="col"]:last-child {
  float: right;
}
[class|="col"] + [class|="col"].end {
  float: left;
}
.col-1 {
  width: 8.33333%;
}
.col-2 {
  width: 16.66667%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33333%;
}
.col-5 {
  width: 41.66667%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33333%;
}
.col-8 {
  width: 66.66667;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33333%;
}
.col-11 {
  width: 91.66667%;
}
.col-12 {
  width: 100%;
}
.row .pre-1 {
  margin-left: 8.33333%;
}
.row .suf-1 {
  margin-right: 8.33333%;
}
.row .pre-1 {
  margin-left: 16.66667%;
}
.row .suf-2 {
  margin-right: 16.66667%;
}
.row .pre-3 {
  margin-left: 25%;
}
.row .suf-3 {
  margin-right: 25%;
}
.row .pre-4 {
  margin-left: 33.33333%;
}
.row .suf-4 {
  margin-right: 33.33333%;
}
.row .pre-5 {
  margin-left: 41.66667%;
}
.row .suf-5 {
  margin-right: 41.66667%;
}
.row .pre-6 {
  margin-left: 50%;
}
.row .suf-6 {
  margin-right: 50%;
}
.row .pre-7 {
  margin-left: 58.33333%;
}
.row .suf-7 {
  margin-right: 58.33333%;
}
.row .pre-8 {
  margin-left: 66.66667%;
}
.row .suf-8 {
  margin-right: 66.66667%;
}
.row .pre-9 {
  margin-left: 75%;
}
.row .suf-9 {
  margin-right: 75%;
}
.row .pre-10 {
  margin-left: 83.33333%;
}
.row .suf-10 {
  margin-right: 83.33333%;
}
.row .pre-11 {
  margin-left: 91.66667%;
}
.row .suf-11 {
  margin-right:...