A little script for getting shades on color lovers, and displaying. Probably not useful for you

c-lovers-manip.js

(function(){

function CManip(){
   $=jQuery;
    var script=$.getScript('//cdnjs.cloudflare.com/ajax/libs/tinycolor/1.3.0/tinycolor.js');
    var $dro=$('.detail-row-overlay');
    $dro.each(function(){$(this).css('display','block').css('box-shadow','none').css('-webkit-box-shadow','none').css('box-sizing','border-box').show().find('.color').show()});

    var obj={
    
        splitup:function(k){
            k.each(function(i,el){
            var pw=$(this).parent('div').width();
            var mywidth=pw/5;
            var elem=$(this).find('.color').first();
            elem.addClass('shades');
            elem.width(mywidth);
            for(i=0;i<4;i++){
               var cl=elem.clone();
                cl.insertAfter(k.find('.shades').last());
            }
            });
            return k;
                
    },
    darken:function(k){
        k.each(function(){
        var shades=$(this).find('.shades');
              var startC;
              if( typeof shades.first().data('original')==='undfined' ){
              startC=shades.first().css('background-color');
              shades.first().data('original',startC);
              } else {
                  startC=shades.first().data('original');
              }
            var color=new tinycolor(startC);
            var iv=(100-(100*color.toHsl().l))/2
            color.lighten(iv);
            var num=((color.toHsl().l)*100);

            console.log(num);
            var min=Math.asinh(num)*1.25;
            if(min<0){
                min=num;
               return;
            }
        var inc=(num-min)/10;
        shades.each(function(el,i,a){
        color.darken(inc);
        $(this).css('background-color',color.toHexString());
        $(this).prop('style').backgroudColor=color.toHexString();
        $(this).prop('style').background=color.toHexString();
        });
        });
        $('.color:not(".shades")').hide();
        $('.meta').hide();
        $('.detail-row').css('margin','5px').css('height','50px');
        return k;
    },
    d:function(){
               var y=this.el.eq(0).find('.shades').length;
        if(y<=1){
        this.splitup(this.el);
        }
    this.darken(this.el);
    },
    l:function(){
        var y=this.el.first().find('.shades').length;
        if(y<=1){
        this.splitup(this.el);
        }
        return this.lighten(this.el);  
    },
    lighten:function(k){
                k.each(function(){
        var shades=$(this).find('.shades');
              var startC;
              if( typeof shades.first().data('original')==='undfined' ){
              startC=shades.first().css('background-color');
              shades.first().data('original',startC);
              } else {
                  startC=shades.first().data('original');
              }
            var color=new tinycolor(startC);
            var iv=(100*(color.toHsl().l))/2;
            var num=((color.toHsl().l)*100);
            console.log(num);
                       var min=(Math.asinh(num))*1.25;
             var inc=(num-min)/10;
        shades.each(function(el,i,a){
        color.lighten(inc);
        $(this).css('background-color',color.toHexString());
        $(this).prop('style').backgroudColor=color.toHexString();
        $(this).prop('style').background=color.toHexString();
        });
        });
    $('.color:not(".shades")').hide();
        $('.meta').hide();
        $('.detail-row').css('margin','5px').css('height','50px');
        return k;
    },
    el:$dro
    }
return obj;

}

window.manip=new CManip();
}());