CodePen Embed - Color Operation Functions

<div class="colors">
		<div class="circle"></div>
    <div class="circle negative"></div>
</div>
<script src="https://use.fontawesome.com/749e954855.js"></script>

@color-base: hsl(186, 100%, 46%);
@color-change: spin(hsl(@color-base), 70);
@color-change-negative: spin(hsl(@color-base), -70);
.colors {
  display: flex;
  justify-content: center;
  height: 150px;
  
  .circle {
    width: 150px;
    height: 150px;
    border-radius: 100px;
    background: @color-base;  
    transition: all .6s;
    margin: 0 20px;
    
    &:hover {
      background: @color-change;
    }
    &.negative:hover {
      background: @color-change-negative;
    }
  }
}

View Compiled

This Pen is owned by YuliyaVoloboy on CodePen. It is a fork of this Pen.

See more by @yuliyavoloboy on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.