Edit: Posting Solution

Я хотел создать образцы цветов на основе цвета, выбранного в Farbtastic. Я провел свои расчеты по значению HSL, потому что это проще и дает лучшие результаты.

После получения значения HSL от Farbtastic я добавил яркость, чтобы создать новый цвет. Новый цвет в формате HSL, и мне нужно переключить его обратно на RGB или Hex, чтобы отобразить его и сохранить для дальнейшего использования. Некоторые браузеры отображают HSL, но я не верю, что все мобильные браузеры и т. Д. Будут это делать.

Проблема состояла в том, чтобы преобразовать переменную «новый цвет» вернемся к RGB или Hex, когда вычисление будет выполнено.

// 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;
}

Обратите внимание, что сценарий, помеченный как ответ, работает для значений целых чисел. Поскольку Farb вернул дробные значения, я внес незначительные правки, опубликованные выше.

Авторы Wordpress Theme: Если вы используетеВарианты Рамочной Темы для Wordpress, и вы хотите использовать Farbtastic, чтобы вы могли использовать значения HSL, см. этоВилка от Elihorn, который содержит файлы, которые вам нужны. В этот набор файлов мне нужно было добавить "wp_enqueue_style (" farbtastic "); & Quot; в строке, где мы поставили в очередь сценарий. Файл .JS для farbtastic не нужно включать, потому что WP уже имеет его. Вам также понадобится поставить Jquery в очередь, конечно, в начале файла functions.php.

Для части 2 этого вопроса (проблема с дубликатами) см .: Вернуть разные значения из функции, использованной несколько раз