Swatch

by kpowz

HTML

<div class="swatch" title="RGBA">
    <div style="background: rgba(255, 0, 0, 0.2);"></div> 
    <div style="background: rgba(255, 0, 0, 0.4);"></div> 
    <div style="background: rgba(255, 0, 0, 0.6);"></div> 
    <div style="background: rgba(255, 0, 0, 0.8);"></div> 
    <div style="background: rgba(255, 0, 0, 1) ;"></div>
</div>

<div class="swatch" title="RGB">
    <div style="background: rgb(243, 191, 189);"></div> 
    <div style="background: rgb(246, 143, 142);"></div> 
    <div style="background: rgb(249, 95 , 94) ;"></div> 
    <div style="background: rgb(252, 47, 47) ;"></div> 
    <div style="background: rgb(255, 0, 0) ;"></div>
</div>

CSS

.swatch div{
    width: 20%;
    float: left;
    margin-bottom: .2em;
    min-height: 5em;
}

.swatch:before,
.swatch:after {
    content:"";
    display:table;
}

.swatch:after {
    clear:both;
}