<div class="box"></div>
<div class="box built-in"></div>

.box {
  $color: royalblue;
  width: 200px;
  height:100px;
  margin: 20px;
  border-radius:10px;
  background-color:$color;
  &.built-in {
    background-color: lighten($color, 10%);
 // background-color: darken($color, 10%);
  }
}

.box {
  $color: royalblue;
  width: 200px;
  height:100px;
  margin: 20px;
  border-radius:10px;
  background-color:$color;
  &.built-in {
    background-color: saturate($color, 10%); // 채도가 올라간다.
//   background-color: desaturate($color, 10%); // 채도를 낮춰준다.
  }
}

.box {
  $color: royalblue;
  width: 200px;
  height:100px;
  margin: 20px;
  border-radius:10px;
  background-color:$color;
  &.built-in {
    background-color: grayscale($color); // 회색으로 출력
//	background-color: invert($color); // 반전
//	background-color: rgba($color, .5); // 투명도
  }
}