<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
This Pen doesn't use any external JavaScript resources.