A Pen by Chris Nager.

index.html

<section class="swatches  swatches--app-icons">
    <div class="swatch  swatch--app-icon  swatch--gradient-red"></div>
    <div class="swatch  swatch--app-icon  swatch--gradient-orange"></div>
    <div class="swatch  swatch--app-icon  swatch--gradient-yellow"></div>
    <div class="swatch  swatch--app-icon  swatch--gradient-green"></div>
    <div class="swatch  swatch--app-icon  swatch--gradient-teal"></div>
    <div class="swatch  swatch--app-icon  swatch--gradient-blue"></div>
    <div class="swatch  swatch--app-icon  swatch--gradient-violet"></div>
    <div class="swatch  swatch--app-icon  swatch--gradient-magenta"></div>
    <div class="swatch  swatch--app-icon  swatch--gradient-black"></div>
    <div class="swatch  swatch--app-icon  swatch--gradient-silver"></div>
</section>
<section class="swatches  swatches--system-colors">
    <div class="swatch  swatch--system-color  swatch--red"></div>
    <div class="swatch  swatch--system-color  swatch--orange"></div>
    <div class="swatch  swatch--system-color  swatch--yellow"></div>
    <div class="swatch  swatch--system-color  swatch--green"></div>
    <div class="swatch  swatch--system-color  swatch--teal"></div>
    <div class="swatch  swatch--system-color  swatch--blue"></div>
    <div class="swatch  swatch--system-color  swatch--violet"></div>
    <div class="swatch  swatch--system-color  swatch--pink"></div>
    <div class="swatch  swatch--system-color  swatch--mid-gray"></div>
    <div class="swatch  swatch--system-color  swatch--gray"></div>
</section>

iOS-7-Color-Swatches.markdown

iOS 7 Color Swatches

Inspired by http://dribbble.com/shots/1186156-iOS-7-Color-Swatches

A Pen by Chris Nager on CodePen.

License.

style.css

body {
    width: 400px;
    margin-right: auto;
    margin-left: auto;
}

.swatches {
    overflow: hidden;
}

.swatches--app-icons {
    padding-top: 12px;
}

.swatches--system-colors {
    padding: 30px 102px 4px 103px;
}

.swatch {
    margin: 10px;
    border-radius: 25%;
    float: left;
}

.swatch--app-icon {
    width: 60px;
    height: 60px;
}

.swatch--system-color {
    width: 29px;
    height: 29px;
    margin: 5px;
}

.swatch--gradient-red { background-image: linear-gradient(#ff5e3a, #ff2a68); }
.swatch--gradient-orange { background-image: linear-gradient(#ff9500, #ff5e3a); }
.swatch--gradient-yellow { background-image: linear-gradient(#ffdb4c, #ffcd02); }
.swatch--gradient-green { background-image: linear-gradient(#87fc70, #0bd318); }
.swatch--gradient-teal { background-image: linear-gradient(#52edc7, #5ac8fb); }
.swatch--gradient-blue { background-image: linear-gradient(#1ad6fd, #1d62f0); }
.swatch--gradient-violet { background-image: linear-gradient(#c644fc, #5856d6); }
.swatch--gradient-magenta { background-image: linear-gradient(#ef4db6, #c643fc); }
.swatch--gradient-black { background-image: linear-gradient(#4a4a4a, #2b2b2b); }
.swatch--gradient-silver { background-image: linear-gradient(#dbddde, #898c90); }

.swatch--red { background-color: #ff3b30; }
.swatch--orange { background-color: #ff9500; }
.swatch--yellow { background-color: #fc0; }
.swatch--green { background-color: #4cd964; }
.swatch--teal { background-color: #34aadc; }
.swatch--blue { background-color: #007aff; }
.swatch--violet { background-color: #5856d6; }
.swatch--pink { background-color: #ff2d55; }
.swatch--mid-gray { background-color: #8e8e93; }
.swatch--gray { background-color: #c7c7cc; }