A CodePen by Bermon Painter. Color functions

index.html

<h1>Color Functions</h1>
<p>Our message boxes were a little boring. Based on Dribbble, gradients and shadows make everything better. We already have rounded corners. We have the trifecta of awesome.</p>

<div class="error">
  <p>Something terrible happened with the system and we can't proceed.</p>
  <div class="close">x</div>
</div>

<div class="caution">
  <p>Are you sure you want to do whatever you just did? It may not be a good idea..</p>
  <div class="close">x</div>
</div>

<div class="success">
  <p>Something great happened. We just wanted to let you know.</p>
  <div class="close">x</div>
</div>

style.scss

@import "compass";
h1 {
  font-size: 20px; 
}

$error-color: #c15858;
$caution-color: #f2cf2f;
$success-color: #89a989;

@mixin rounded-corners($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

// Various color functions
// rgba($color, $alpha)

// hue($color)

// saturation($color)

// lightness($color)

// adjust-hue($color, $degrees)

// lighten($color, $amount)

// darken($color, $amount)

// saturate($color, $amount)

// desaturate($color, $amount)

// grayscale($color)

// complement($color)
invert($color)

@mixin message-box($color) {
  @extend %message;
  background-color: $color;
  background-image: linear-gradient(lighten($color, 10%), darken($color, 10%));
  border-color: darken($color, 30%);
  box-shadow: lighten($color, 30%) 0 1px 0 inset;
  color: darken($color, 40%);
  .close {
    color: darken($color, 30%);
  }
}

%message {
  float: left;
  border-width: 1px;
  border-style: solid;
  @include rounded-corners(8px);
  margin: 0 10px;
  font-size: 14px;
  padding: 20px;
  position: relative;
  width: 200px;
  p {
    margin: 0;
  }
  .close {
    font-weight: bold;
    position: absolute;
      top: 5px;
      right: 8px;
  }
}

.error {
  @include message-box($error-color);
}

.caution {
  @include message-box($caution-color);
}

.success {
  @include message-box($success-color);
}