Edición: Solución de publicación

Quería crear muestras de color basadas en el color elegido en Farbtastic. Hice mis cálculos en el valor HSL, porque es más fácil y produce mejores resultados.

Después de obtener el valor HSL de Farbtastic, agregué brillo para crear un nuevo color. El nuevo color está en formato HSL, y necesito cambiarlo de nuevo a RGB o Hex, para poder mostrarlo y guardarlo para usarlo más adelante. Algunos navegadores muestran HSL, pero no tengo fe en que todos los navegadores móviles, etc., lo hagan.

El problema fue convertir la variable 'newcolor' de nuevo a RGB o Hex, una vez que se realizó el cálculo.

// collect parent ids for farb
$(".farbtastic").parent().each(writeColorpanel);

function writeColorpanel (i, elem) {
    var picker = $.farbtastic(elem);  //farb object
    picker.linkTo(onColorChange); //a farb function
}  

    function onColorChange(color) {

    // retrieve hsl value, do calculations and place in hidden input.
    var hslcolor = $.farbtastic('#example_colorpicker_picker').hsl;

    // brighten by 40%
    var brightness = 1.4 * (Math.round(hslcolor[2]*10000)/10000);
    if (brightness>1) { brightness = 1 };
    if (brightness<0) { brightness = 0; }

    // create the new brighter color
    var newcolor = hslcolor;
    newcolor[2]=brightness;

    //convert to rgb (safer than trusting all mobile browsers to display HSL)
    var rgb = hsl2rgb(newcolor);

    //apply the color to swatches
    var firstSwatch = $('#section-example_colorpicker').find('.square1');
    firstSwatch.css( {'background-color': color } );
    var secondSwatch = $('#section-example_colorpicker').find('.square2');
    secondSwatch.css('background-color', 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')');

}

function hsl2rgb(hsl) {
    var h = hsl[0], s = hsl[1], l = hsl[2];
    var m1, m2, hue;
    var r, g, b
    h = (Math.round( 360*h )/1);
    if (s == 0)
        r = g = b = (l * 255);
    else {
        if (l <= 0.5)
            m2 = l * (s + 1);
        else
            m2 = l + s - l * s;
        m1 = l * 2 - m2;
        hue = h / 360;
        r = Math.round(HueToRgb(m1, m2, hue + 1/3));
        g = Math.round(HueToRgb(m1, m2, hue));
        b = Math.round(HueToRgb(m1, m2, hue - 1/3));
    }
    return {r: r, g: g, b: b};
}

function HueToRgb(m1, m2, hue) {
    var v;
    if (hue < 0)
        hue += 1;
    else if (hue > 1)
        hue -= 1;

    if (6 * hue < 1)
        v = m1 + (m2 - m1) * hue * 6;
    else if (2 * hue < 1)
        v = m2;
    else if (3 * hue < 2)
        v = m1 + (m2 - m1) * (2/3 - hue) * 6;
    else
        v = m1;

    return 255 * v;
}

Tenga en cuenta que el script marcado como respuesta funciona con valores de números enteros. Desde que Farb devolvió valores fraccionarios, hice ediciones menores, publicadas arriba.

Autores de Wordpress Theme: Si estás usandoMarco de opciones temáticas para Wordpress, y desea usar Farbtastic para que pueda usar valores HSL, vea estoTenedor de Elihorn, que contiene los archivos que necesitas. En este conjunto de archivos necesitaba agregar "wp_enqueue_style ('farbtastic');" en la línea donde colocamos el script en cola. El archivo .JS para farbtastic no necesita ser incluido porque WP ya lo tiene. También necesitarás poner Jquery en la cola, por supuesto, probablemente en la parte superior de functions.php.

Para la parte 2 de esta pregunta (un problema con duplicados), consulte:Devuelve diferentes valores de la función utilizada varias veces