valid CSS colors codepen import

README

"A CodePen by Bennett Feely. Valid CSS color names - I for one was not aware I could've been using 'color:papayawhip' on my projects. Until now..." - source http://codepen.io/bfeelyweb/pen/ozfvm

index.html

<li class="tomato"></li>
<li class="peachpuff"></li>
<li class="coral"></li>
<li class="cornflowerblue"></li>
<li class="peru"></li>
<li class="snow"></li>
<li class="chocolate"></li>
<li class="papayawhip"></li>
<li class="salmon"></li>
<li class="khaki"></li>
<li class="thistle"></li>
<li class="firebrick"></li>
<li class="dodgerblue"></li>
<li class="cadetblue"></li>

style.css

@import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);

* { box-sizing:border-box; }

body {
  display:flex;
  background:#000;
  flex-wrap:wrap;
  margin:20px;

}

body:hover li { opacity:.5; -webkit-filter:grayscale(.8); }
body:hover li:hover { opacity:1.5; -webkit-filter:grayscale(0); }

li {
  flex:1 0 auto;
  position:relative;
  transition:.3s;
  padding:0 30px;
  list-style:none;
  font-size:4.5em;
  font:700 5.5vw/1.5 'Amatic SC', cursive;
  text-align:center;
  margin:5px;
  border-radius:10px;
}

li:before { content:attr(class); color:#000; }

.cadetblue { background:cadetblue; }
.chocolate { background:chocolate; }
.coral { background:coral; }
.cornflowerblue { background:cornflowerblue; }
.dodgerblue { background:dodgerblue; }
.firebrick { background:firebrick; }
.khaki { background:khaki; }
.lawngreen { background:lawngreen; }
.papayawhip { background:papayawhip; }
.peachpuff { background:peachpuff; }
.peru { background:peru; }
.peru { background:peru; }
.salmon { background:salmon; }
.snow { background:snow; }
.thistle { background:thistle; }
.tomato { background:tomato; }