Farbtastic将HSL转换回RGB或Hex [英] Farbtastic convert HSL back to RGB or Hex

问题描述

发布解决方案

我想根据在Farbtastic中选择的颜色来创建色板.我对HSL值进行了计算，因为它更容易产生更好的结果.

I wanted to create color swatches based on the color chosen in Farbtastic. I did my calculations on the HSL value, because it's easier and produces better results.

从Farbtastic获得HSL值后，我添加了亮度以创建新的颜色.新颜色为HSL格式，我需要将其切换回RGB或Hex，以便显示并保存以供以后使用.有些浏览器显示HSL，但我不相信所有移动浏览器等都会显示HSL.

After getting the HSL value from Farbtastic, I added brightness to create a new color. The new color is in HSL format, and I need to switch it back to RGB or Hex, in order to display it and save it for use later. Some browsers display HSL, but I have no faith that all mobile browsers etc will do so.

问题是一旦完成计算，就将变量'newcolor'转换回RGB或Hex.

The problem was to convert variable 'newcolor' back to RGB or Hex, once the calculation was done.

// 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返回了分数值，因此我进行了较小的编辑，上面已发布.

Note that the script marked as answer works for whole number values. Since Farb returned fractional values, I made minor edits, posted above.

WordPress主题作者: 如果您将 Options Framework Theme 用于Wordpress，并且想要使用Farbtastic，则可以使用HSL值，请参见 Elihorn的叉子，其中包含您的文件需要.在这组文件中，我需要在将脚本放入队列的行中添加"wp_enqueue_style('farbtastic');".因为WP已经拥有，所以不需要包括用于farbastastic的.JS文件.当然，您还需要使Jquery入队，可能在functions.php的顶部.

Wordpress Theme authors: If you are using Options Framework Theme for Wordpress, and want to use Farbtastic so you may use HSL values, see this Fork by Elihorn, which contains the files you need. In this set of files I needed to add "wp_enqueue_style( 'farbtastic' ); " at the line where we enqueued the script. The .JS file for farbtastic does not need to be included because WP already has it. You'll also need to enqueue Jquery, of course, probably at the top of functions.php.

对于此问题的第2部分(一个重复的问题)，请参阅: 从多次使用的函数中返回不同的值

For part2 of this question (an issue with duplicates), see: Return different values from function used multiple times

推荐答案

我决定将这些功能分开并重新编写一下，以便它们正常工作.
结束了:

I decided to seperate the functions and rewrite them a little so they work properly.
Ended up with this :

function hsl2rgb(h, s, l) {
    var m1, m2, hue;
    var r, g, b
    s /=100;
    l /= 100;
    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;
}

它是通过以下方式调用的:

It's called by doing:

//the HSL values to use
var h = 30;
var s = 20;
var l = 70;

//call the function into a variable, returns an object rgb = {r:163, g:174, b:196}
var rgb = hsl2rgb(h, s, l);

//can now be accessed with rgb.r etc, and remember that the last two are percentages

这是 演示

如果变量newcolor是字符串，则必须执行以下操作:

If your variable newcolor is a string, you will have to do:

var colorArray = newcolor.split(','),
    h = colorArray[0],  //  0.10434092941291336
    s = colorArray[1],  //  1
    l = colorArray[2];  //  0.756

将HSL值放入正确的变量中.

to get the HSL values into the right variables.

这篇关于Farbtastic将HSL转换回RGB或Hex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！