<section>
  <h1>Color palette</h1>
  <h2>Yup! Another LESS color palette</h2>
  <ul>
    <li class="aaa"></li>
    <li class="bbb"></li>
    <li class="ccc"></li>
    <li class="ddd"></li>
    <li class="eee"></li>
    <li class="fff"></li>
  </ul>
</section>

@cor1: #f78056;

@l1: lighten(spin(@cor1, 10), 5%);
@l2: lighten(spin(@cor1, 20), 15%);
@d1:  darken(spin(@cor1, -5), 3%);
@d2:  darken(spin(@cor1, -20), 20%);
@d3:  darken(spin(@cor1, -33), 25%);

.aaa  { background-color: @l2; }
.bbb  { background-color: @l1; }
.ccc  { background-color: @cor1; }
.ddd  { background-color: @d1; }
.eee  { background-color: @d2; opacity: 0.85; }
.fff  { background-color: @d3; }


/* styles */
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");

*         { margin: 0; padding: 0; letter-spacing: 2px; font-family: 'Montserrat', sans-serif; font-weight: 400; }
h1        { text-align: center; margin-bottom: 14px; }
h2        { text-align: center; margin-bottom: 24px; color: #999; font-size: 15px; }
section   { position: relative; width: 80%; max-width: 700px; margin: 100px auto; }
ul        { display: block; margin: 0 0 120px 0; }
li        { display: inline; width: 16.6%; height: 31px; float: left; margin-top: 10px; text-align: center; padding-top: 14px; overflow: hidden; } 
li:hover { color: #fff; }

/* anim */
li{
  -webkit-transition:   all .55s ease-in-out;
  -moz-transition:      all .55s ease-in-out;
  transition:           all .55s ease-in-out;
}

@media handheld, only screen and (max-width: 700px) {
  li {width: 33.3%; }

}