Midnight Rainbow

HTML

<h1>
<span class="r">R</span>
<span class="o">a</span>
<span class="y">i</span>
<span class="g">n</span>
<span class="b">b</span>
<span class="i">o</span>
<span class="v">w</span>
</h1>
<p>Create a Midnight Rainbow with a little HTML and CSS (eat your heart out, Ritchie Blackmore)</p>

CSS

h1 {
    font-size: 500%;
    font-family: "Palatino Linotype", "Century Gothic", "Baskerville", "Consolas", "Candara", "Lucida Sans", serif;
}
body {
    background-color: black;
    font-family: "Lucida Sans", serif;
    color: white;
}
.r {
   color: hsl(0, 100%, 50%);
}
.o {
   color: hsl(30, 100%, 50%);
}
.y {
   color: hsl(60, 100%, 50%);
}
.g {
   color: hsl(120, 100%, 50%);
}
.b {
   color: hsl(240, 100%, 65%);
}
.i {
   color: hsl(280, 100%, 60%);
}
.v {
   color: hsl(300, 100%, 50%);
}

JavaScript

body {
    background-color: palegoldenrod;
    font-family: "Lucida Sans", serif;
    color: white;
}

.r {
    color: hsl(0, 100%, 50%);
}

.o {
    color: hsl(30, 100%, 50%);
}

.y {
    color: hsl(60, 100%, 50%);
}

.g {
    color: hsl(120, 100%, 50%);
}

.b {
    color: hsl(240, 100%, 65%);
}

.i {
    color: hsl(280, 100%, 60%);
}

.v {
    color: hsl(300, 100%, 50%);
}