<p>Background : Yellow Green</p>
<p>Yellow Green : 15% Lighter</p>
<p>Yellow Green : 15% Darker</p>
<p>Yellow Green : 15% Saturated</p>
<p>Yellow Green : 15% Desaturated</p>
<p>Added Red + Green</p>
body {
  font-family: 'Lato';
  padding: 0;
  margin:0;
}

$color: yellowgreen;

p {
  padding: 20px 10px;
  color: white;
  font-size: 1.3em;
  margin:0;
}

p:nth-child(1) {
  background: $color;
}

p:nth-child(2) {
  background: lighten($color, 15%);
}

p:nth-child(3) {
  background: darken($color, 15%);
}

p:nth-child(4) {
  background: saturate($color, 15%);
}

p:nth-child(5) {
  background: desaturate($color, 15%);
}

p:nth-child(6) {
  background: (green + red);
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.