<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
body {
  margin: 0;
}
p {
  margin: 0;
  padding: 20px 10px;
  color: white;
  font-family: 'Lato';
  font-size: 1.3em;
  text-align: center;
}

$hue-list: 130,180,10, 250, 50, 0;
$saturation-list: 75% 30% 80% 65% 75% 90%;
$luminosity-list: 70% 60% 75% 70% 55% 70%; 

@for $i from 1 through 6 {
    $hue: nth($hue-list, $i);
    $sat: nth($saturation-list, $i);
    $lum: nth($luminosity-list, $i);
    p:nth-of-type(#{$i}):after {
        content: 'Hue: '+$hue+' | '+'Saturation: '+$sat+' | '+'Luminosity: '+$lum;
    }
    p:nth-of-type(#{$i}) {
        background: hsl($hue, $sat, $lum);
    }
}

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.