Farbtastic将HSL转换回RGB或Hex
编辑：发布解决方案
我想根据Farbtastic中选择的颜色创建颜色样本。 我对HSL值进行了计算，因为它更容易并且产生更好的结果。
从Farbtastic获得HSL值后，我添加了亮度以创建新颜色。 新颜色采用HSL格式，我需要将其切换回RGB或Hex，以便显示并保存以供日后使用。 有些浏览器显示HSL，但我不相信所有移动浏览器都会这样做。
问题是在计算完成后将变量’newcolor’转换回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 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主题作者：如果您正在使用WordPress的选项框架主题 ，并且想要使用Farbtastic以便您可以使用HSL值，请参阅此Elihorn的Fork ，其中包含您需要的文件。 在这组文件中，我需要添加“wp_enqueue_style（’farbtastic’）;”在我们排队脚本的行。 因为WP已经拥有它，所以不需要包含farbtastic的.JS文件。 当然，您还需要将Jquery排队，可能位于functions.php的顶部。
对于此问题的第2部分（重复问题），请参阅： 从多次使用的函数中返回不同的值
我决定分离这些function并重新编写它们以便它们正常工作。
结束了这个：
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; }
通过这样做来实现：
//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是一个字符串，你将不得不这样做：
var colorArray = newcolor.split(','), h = colorArray[0], // 0.10434092941291336 s = colorArray[1], // 1 l = colorArray[2]; // 0.756
将HSL值转换为正确的变量。
迈克尔jackson在他的网站上使用JavaScript进行了这种转换以及其他颜色转换。
function hslToRgb(h, s, l) { var r, g, b; if (s == 0) { r = g = b = l; // achromatic } else { function hue2rgb(p, q, t) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return p + (q - p) * 6 * t; if (t < 1 / 2) return q; if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; return p; } var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1 / 3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1 / 3); } return [r * 255, g * 255, b * 255]; }