Microsoft Colour Swatches

A selection of the new metro colour schemes taken from Microsoft sites.

by jamessouth

HTML

<h1>Metro Colour Swatches</h1>
<p>A collection of colour swatches that make up the standard Microsoft palette.</p>

<p><label for="toggler">Toggle font colour.</label> <input id="toggler" name="toggler" type="checkbox"/></p>


<div class="clearfix">
    <div class="tile yellow">
        <h2>Yellow</h2>
    </div>
    <div class="tile light-blue">
        <h2>Light Blue</h2>
    </div>
    <div class="tile blue">
        <h2>Blue</h2>
    </div>
    <div class="tile dark-blue">
        <h2>Dark Blue</h2>
    </div>
    <div class="tile red">
        <h2>Red</h2>
    </div>
    <div class="tile pink">
        <h2>Pink</h2>
    </div>
    <div class="tile magenta">
        <h2>Magenta</h2>
    </div>
    <div class="tile purple">
        <h2>Purple</h2>
    </div>
    <div class="tile green">
        <h2>Green</h2>
    </div>
    <div class="tile mango">
        <h2>Mango</h2>
    </div>
    <div class="tile light-grey">
        <h2>Light Grey</h2>
    </div>
    <div class="tile grey">
        <h2>Grey</h2>
    </div>
    <div class="tile dark-grey">
        <h2>Dark Grey</h2>
    </div>
    <div class="tile not-black">
        <h2>Not Black</h2>
    </div>
    <div class="tile purple">
        <h2>Violet</h2>
    </div>
    <div class="tile dark-violet">
        <h2>Dark Violet</h2>
    </div>
    <div class="tile turquoise">
        <h2>Turquoise</h2>
    </div>
    <div class="tile lime">
        <h2>Lime</h2>
    </div>
    <div class="tile orange">
        <h2>Orange</h2>
    </div>
</div>

CSS

body{
    font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
    padding:0;
    margin:0;
    color:#454545;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

label{
    cursor:pointer;
}

.tile{
    height:150px;
    padding:30px;
    color:#ffffff;
    float:left;
    width:45%;
}

.tile.alt{
    color:inherit;
}

.tile h2{
    margin:0;
    font-size:4em;
    line-height:1em;
    font-weight:400;
}

.yellow{
    background-color: #FFD800;
}
.light-blue{
    background-color: #00CCFF;
}
.blue{
    background-color: #00A1F1;
}
.dark-blue{
    background-color: #0058cc;
}
.red{
    background-color: #ED1C24;
}
.pink{
    background-color: #EA005A;
} 
.pink{
    background-color: #EA005A;
} 
.magenta{
    background-color: #EC008C;
} 
.purple{
    background-color: #A700AF;
} 
.green{
    background-color: #7CBB00;
}
.mango{
    background-color: #FFBB00;
}
.light-grey{
    background-color: #D5D3D0;
}
.grey{
    background-color: #848484;
}
.dark-grey{
    background-color: #1D1D1D;
}
.not-black{
    background-color: #1A1A1A;
}
.violet{
    background-color: #5d3ab8;
}
.dark-violet{
    background-color: #211054;
}
.turquoise{
    background-color: #009FB2;
}
.lime{
    background-color: #BAD80A;
}
.orange{
    background-color: #DC582E;
}

JavaScript

$("#toggler").on("click",function(){

    if($(this).is(":checked")){
        $("div.tile").addClass("alt");
    }else{
        $("div.tile").removeClass("alt");
    }
});