<div class="colors">
		<div class="rect color"></div>
     <i class="fa fa-arrow-right" aria-hidden="true"></i>
     <div class="rect no-alpha">no-alpha</div>
</div>
<div class="colors">
		<div class="rect color"></div>
     <i class="fa fa-arrow-right" aria-hidden="true"></i>
     <div class="rect with-alpha">with-alpha</div>
</div>
<script src="https://use.fontawesome.com/749e954855.js"></script>
@color: #3db402;
@no-alpha: tint(@color, 40%);
@with-alpha: tint(rgba(61,180,2, 0.5), 40%); 

.colors {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  margin: 20px;

  i {
    color: #8c8c8c;
  }
  .rect {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 20px;
    margin: 10px;
    
    &.color {
      background: @color;
    }
    
    &.no-alpha {
      background: @no-alpha;
    }
    
    &.with-alpha {
      background: @with-alpha;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.