CodePen Embed - Color Operation Functions

<div class="colors">
	<div class="rect a">
    <p class="a">#000000</p>
  </div>
  <div class="rect b">
    <p class="b">#ffffff</p>
  </div>
  <div class="rect c">
    <p class="c">#dddddd</p>
  </div>
  <div class="rect d">
    <p class="d">#dddddd</p>
  </div>
  <div class="rect e">
    <p class="e">#dddddd</p>
  </div>
</div>

@a: contrast(#bbbbbb);
@b: contrast(#222222, #101010); 
@c: contrast(#222222, #101010, #dddddd); 
@d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%); 
@e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);

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

  .rect {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 50px;
    border-radius: 5px;
    margin: 5px;

    &.a {
      background: #bbbbbb;
      & p {
        color: @a;
      }
    }
    &.b {
      background: #222222;
      & p {
        color: @b;
      }
    }   
    &.c {
      background: #222222;
      & p {
        color: @c;
      }
    }
    &.d {
      background: #80ff00;
      & p {
        color: @d;
      }
    }
    &.e {
      background: #80ff00;
      & p {
        color: @e;
      }
    }  
  }
}

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.