A CodePen by Andreas Storm. ios7 icon colors - colors by Louie Mantia opn dribbble

index.html

<!-- Colors by Louie Mantia 
http://dribbble.com/shots/1118715-Colors?list=playoffs -->
<div class="color">
  <div class='red'></div>
  <div class='orange'></div>
  <div class='yellow'></div>
  <div class='green'></div>
  <div class='lightblue'></div>
  <div class='blue'></div>
  <div class='darkblue'></div>
  <div class='violet'></div>
  <div class='black'></div>
  <div class='gray'></div>
  <div class='silver'></div>
  <div class='white'></div>
</div>

style.css

body{
  background: #4D595E;
}

.color{
  width: 640px;
  margin: 0 auto;
  margin-top: 50px;
}

.color > div{
  width: 120px;
  height: 120px;
  border-radius: 26px;
  display: block;
  float: left;
  margin: 20px;
  box-shadow: 0px 1px 4px rgb(62, 74, 79)
}

.red{ 
  background-image: linear-gradient(bottom, rgb(255,28,60) 0%, rgb(255,87,32) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,28,60)),color-stop(1, rgb(255,87,32)));
}

.orange{ 
  background-image: linear-gradient(bottom, rgb(255, 149, 0) 0%, rgb(255, 192, 65) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255, 149, 0)),color-stop(1, rgb(255, 192, 65)));
}

.yellow{ 
  background-image: linear-gradient(bottom, rgb(255,192,1) 0%, rgb(255,239,65) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,192,1)),color-stop(1, rgb(255,239,65)));
}

.green{ 
  background-image: linear-gradient(bottom, rgb(108, 192, 48) 0%, rgb(162, 235, 61) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(108, 192, 48)),color-stop(1, rgb(162, 235, 61)));
}

.lightblue{ 
  background-image: linear-gradient(bottom, rgb(48, 180, 191) 0%, rgb(60, 234, 205) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(48, 180, 191)),color-stop(1, rgb(60, 234, 205)));
}

.blue{ 
  background-image: linear-gradient(bottom, rgb(64, 144, 255) 0%, rgb(65, 192, 255) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(64, 144, 255)),color-stop(1, rgb(65, 192, 255)));
}

.darkblue{ 
  background-image: linear-gradient(bottom, rgb(83, 57, 224) 0%, rgb(59, 132, 234) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(83, 57, 224)),color-stop(1, rgb(59, 132, 234)));
}

.violet{ 
  background-image: linear-gradient(bottom, rgb(148, 59, 235) 0%, rgb(224, 85, 225) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(148, 59, 235)),color-stop(1, rgb(224, 85, 225)));
}

.black{ 
  background-image: linear-gradient(bottom, rgb(16, 16, 16) 0%, rgb(47, 47, 47) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(16, 16, 16)),color-stop(1, rgb(47, 47, 47)));
}

.gray{ 
  background-image: linear-gradient(bottom, rgb(92, 92, 94) 0%, rgb(124, 125, 128) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(92, 92, 94)),color-stop(1, rgb(124, 125, 128)));
}

.silver{ 
  background-image: linear-gradient(bottom, rgb(186, 187, 192) 0%, rgb(229, 231, 235) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(186, 187, 192)),color-stop(1, rgb(229, 231, 235)));
}

.white{ 
  background-image: linear-gradient(bottom, rgb(235, 235, 235) 0%, rgb(255, 255, 255) 100%);
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(235, 235, 235)),color-stop(1, rgb(255, 255, 255)));
}