<ul class="color_palette">
  <li class="color_item color_item-red"></li>
  <li class="color_item color_item-blue"></li>
  <li class="color_item color_item-green"></li>
  <li class="color_item color_item-orange"></li>
</ul>

$colors : (
  red : #c50000,
  blue : #005dc5,
  green : #009c1a,
  orange : #e57400
);

@each $key, $color in $colors {
  .color_item-#{$key} {
    color: #ffffff;
    background-color:$color;
    &:before {
      content:'#{$key}';
      display:block;
      text-transform:capitalize;
      margin-top:25px;
    }
    &:after {
      content:'#{$color}';
      display:block;
    }
  }
}

.color_palette {
  list-style:none;
}

.color_item {
  display:inline-block;
  padding:15px;
  border-radius:50%;
  height:90px;
  width:90px;
  text-align:center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.