صنع محول أكواد للالوان بنظام Hexa داخل مدونتك

سنضيف اضافة جميلة لمدونتك لتجعل مدونتك مميزة دوماً وهي محرر الألوان للحصول على أكود اﻷلوان بنظام Hexa بدون الحاجة لتضمين موقع داخل مدونتك !!

لاضافة المحول داخل مدونتك
1-البحث(CTRL+F) عن الوسم </head> ونلصق الكود التالي فوقه مباشرة

 /**
 * http://www.sweup.com
 */
function colorLuminance(hex, lum) {
    // Validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, "");
    if (hex.length < 6) {
        hex = hex.replace(/(.)/g, '$1$1');
    }
    lum = lum || 0;
    // Convert to decimal and change luminosity
    var rgb = "#",
        c;
    for (var i = 0; i < 3; ++i) {
        c = parseInt(hex.substr(i * 2, 2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00" + c).substr(c.length);
    }
    return rgb;
}
function rangeSlider(e,d){var k=document.documentElement,l=document.createElement("div"),a=document.createElement("span"),p=false,q,j,c,h;var f={value:0,vertical:false,rangeClass:"",draggerClass:"",drag:function(i){}};for(var g in f){if(typeof d[g]=="undefined"){d[g]=f[g]}}function m(r,s,i){if(r.addEventListener){r.addEventListener(s,i,false)}else{if(r.attachEvent){r.attachEvent("on"+s,i)}else{r["on"+s]=i}}}var o=d.vertical;e.className=(e.className+" range-slider "+(o?"range-slider-vertical":"range-slider-horizontal")).replace(/^ +/,"");l.className=("range-slider-track "+d.rangeClass).replace(/ +$/,"");a.className=("dragger "+d.draggerClass).replace(/ +$/,"");m(l,"mousedown",function(i){k.className=(k.className+" no-select").replace(/^ +/,"");q=l[!o?"offsetWidth":"offsetHeight"];j=l[!o?"offsetLeft":"offsetTop"];c=a[!o?"offsetWidth":"offsetHeight"];p=true;n(i);return false});m(document,"mousemove",function(i){n(i)});m(document,"mouseup",function(i){k.className=k.className.replace(/(^| )no-select( |$)/g,"");p=false});m(window,"resize",function(r){var i=a[!o?"offsetWidth":"offsetHeight"];a.style[!o?"left":"top"]=(((h/100)*l[!o?"offsetWidth":"offsetHeight"])-(i/2))+"px";p=false});function n(i){i=i||window.event;var r=!o?i.pageX:i.pageY;if(!r){r=!o?i.clientX+document.body.scrollLeft+document.documentElement.scrollLeft:i.clientY+document.body.scrollTop+document.documentElement.scrollTop}if(p&&r>=j&&r<=(j+q)){a.style[!o?"left":"top"]=(r-j-(c/2))+"px";h=Math.round(((r-j)/q)*100);d.drag(h)}}function b(){var i=a[!o?"offsetWidth":"offsetHeight"];h=((d.value/100)*l[!o?"offsetWidth":"offsetHeight"]);a.style[!o?"left":"top"]=(h-(i/2))+"px";d.drag(d.value)}l.appendChild(a);e.appendChild(l);b()};

var slider = document.getElementById('range-slider'),
    color = document.getElementById('hex-color-input'),
    preview = document.getElementById('preview-area');
rangeSlider(slider, {
    drag: function (v) {
        var lighter = colorLuminance(color.value, (v * 0.01)),
            darker = colorLuminance(color.value, -(v * 0.01));
        // Lighter...
        preview.children[0].style.backgroundColor = lighter;
        // Darker...
        preview.children[1].style.backgroundColor = darker;
        // Preview...
        preview.children[0].innerHTML = '<span>&uarr; ' + v + '% = ' + lighter + '</span>';
        preview.children[1].innerHTML = '<span>&darr; ' + v + '% = ' + darker + '<span>';
    }
});