<div class="container">
<header>
<h1>
Color Palette
</h1>
</header>
<ul class="swatch-list">
<li class="swatch">
<div class="swatch-color color-ruby"></div>
<div class="swatch-info">
<p>Ruby</p>
<p>#D8334A</p>
<p>rgb(216,51,74)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-grapefruit"></div>
<div class="swatch-info">
<p>Grapefruit</p>
<p>#ED5565</p>
<p>rgb(237,85,101)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-bittersweet"></div>
<div class="swatch-info">
<p>Bittersweet</p>
<p>#FC6E51</p>
<p>rgb(252,110,81)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-sunflower"></div>
<div class="swatch-info">
<p>Sunflower</p>
<p>#FFCE54</p>
<p>rgb(255,206,84)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-straw"></div>
<div class="swatch-info">
<p>Straw</p>
<p>#E8CE4D</p>
<p>rgb(232,206,77)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-grass"></div>
<div class="swatch-info">
<p>Grass</p>
<p>#A0D468</p>
<p>rgb(160,212,104)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-mint"></div>
<div class="swatch-info">
<p>Mint</p>
<p>#48CFAD</p>
<p>rgb(72,207,173)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-teal"></div>
<div class="swatch-info">
<p>Teal</p>
<p>#A0CECB</p>
<p>rgb(160,206,203)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-aqua"></div>
<div class="swatch-info">
<p>Aqua</p>
<p>#4FC1E9</p>
<p>rgb(79,193,233)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-blue-jeans"></div>
<div class="swatch-info">
<p>Blue Jeans</p>
<p>#5D9CEC</p>
<p>rgb(93,156,236)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-plum"></div>
<div class="swatch-info">
<p>Plum</p>
<p>#8067B7</p>
<p>rgb(128,103,183)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-lavender"></div>
<div class="swatch-info">
<p>Lavender</p>
<p>#AC92EC</p>
<p>rgb(172,146,236)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-pink-rose"></div>
<div class="swatch-info">
<p>Pink Rose</p>
<p>#EC87C0</p>
<p>rgb(236,135,192)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-light-gray"></div>
<div class="swatch-info">
<p>Light Gray</p>
<p>#F5F7FA</p>
<p>rgb(245,247,250)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-medium-gray"></div>
<div class="swatch-info">
<p>Medium Gray</p>
<p>#CCD1D9</p>
<p>rgb(204,209,217)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-dark-gray"></div>
<div class="swatch-info">
<p>Dark Gray</p>
<p>#656D78</p>
<p>rgb(101,109,120)</p>
</div>
</li>
<li class="swatch">
<div class="swatch-color color-charcoal"></div>
<div class="swatch-info">
<p>Charcoal</p>
<p>#3C3B3D</p>
<p>rgb(60,59,61)</p>
</div>
</li>
</ul>
</div>@import "https://fonts.googleapis.com/css?family=Lato:300,400,900";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote {
&:before, &:after {
content: "";
content: none;
}
}
q {
&:before, &:after {
content: "";
content: none;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-rendering: optimizeLegibility;
}
body {
font-family: "Lato", sans-serif;
background-color: #1b1b1c;
font-size: 100%;
}
.container {
width: 1120px;
height: auto;
margin: 0 auto;
}
header {
margin: 75px 0;
//padding-bottom: 40px;
h1 {
font-weight: 600;
font-size: 1.4rem;
color: #fff;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.1em;
}
}
.swatch {
width: 18.57%;
background-color: #3c3b3d;
border-radius: 5px;
float: left;
margin: 0 20px 20px 0;
overflow: hidden;
&:nth-child(5n) {
margin-right: 0;
}
.swatch-color {
position: relative;
width: 100%;
padding: 6.5em 1em;
display: block;
&:after {
position: absolute;
content: '';
top: 0;
right: 0;
height: 100%;
width: 50%;
background-color: rgba(0,0,0,.1);
}
&.color-ruby {
background-color: #D8334A;
}
&.color-grapefruit {
background-color: #ED5565;
}
&.color-bittersweet {
background-color: #FC6E51;
}
&.color-sunflower {
background-color: #FFCE54;
}
&.color-straw {
background-color: #E8CE4D;
}
&.color-grass {
background-color: #A0D468;
}
&.color-mint {
background-color: #48CFAD;
}
&.color-teal {
background-color: #A0CECB;
}
&.color-aqua {
background-color: #4FC1E9;
}
&.color-blue-jeans {
background-color: #5D9CEC;
}
&.color-plum {
background-color: #8067B7;
}
&.color-lavender {
background-color: #AC92EC;
}
&.color-pink-rose {
background-color: #EC87C0;
}
&.color-light-gray {
background-color: #F5F7FA;
}
&.color-medium-gray {
background-color: #CCD1D9;
}
&.color-dark-gray {
background-color: #656D78;
}
&.color-charcoal {
background-color: #3C3B3D;
}
}
.swatch-info {
padding: 1em;
color: #808080;
text-align: center;
p {
font-size: 0.85rem;
margin-bottom: .75em;
&:first-child {
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
color: #fff;
}
&:last-child {
margin-bottom: 0;
}
}
}
}
External CSS
This Pen doesn't use any external CSS resources.