将Hsl转换为rgb和hex
我需要一个颜色转换器从hsl转换为rgb和hex值。 我会像这样做类似的。 我正在使用jquery和jquery ui range slider。 这是我的代码：
$(function() { $( "#hsl_hue_range" ).slider({ min: 0, max: 100, value: 0, range: false, animate:"slow", orientation: "horizontal", slide: function( event, ui ) { var hsl_hue = ui.value; } }); }); $(function() { $( "#hsl_saturation_range" ).slider({ min: 0, max: 100, value: 0, range: false, animate:"slow", orientation: "horizontal", slide: function( event, ui ) { var hsl_saturation = ui.value; } }); }); $(function() { $( "#hsl_light_range" ).slider({ min: 0, max: 100, value: 0, range: false, animate:"slow", orientation: "horizontal", slide: function( event, ui ) { var hsl_light = ui.value; } }); }); 我想要这样的解决方案：
转换器的输入可以由变量给出。 比如hsl_hue hsl_saturation hsl_light 。
有没有办法做到这一点？
如果没办法，我该怎么办？
HSL到RGB：
/** * Converts an HSL color value to RGB. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSL_color_space. * Assumes h, s, and l are contained in the set [0, 1] and * returns r, g, and b in the set [0, 255]. * * @param {number} h The hue * @param {number} s The saturation * @param {number} l The lightness * @return {Array} The RGB representation */ function hslToRgb(h, s, l){ var r, g, b; if(s == 0){ r = g = b = l; // achromatic }else{ var hue2rgb = 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 [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; }
您可以在此处找到更多信息 - HSL到RGB颜色转换
取得degree, percentage, percentage并返回css hex颜色：
function hslToHex(h, s, l) { h /= 360; s /= 100; l /= 100; let r, g, b; if (s === 0) { r = g = b = l; // achromatic } else { const 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; }; const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; r = hue2rgb(p, q, h + 1 / 3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1 / 3); } const toHex = x => { const hex = Math.round(x * 255).toString(16); return hex.length === 1 ? '0' + hex : hex; }; return `#${toHex(r)}${toHex(g)}${toHex(b)}`; }
例：
hslToHex(360, 100, 50) // "#ff0000" -> red
我最近有理由解决这个问题，并想出了一个基于canvas的解决方案。 我只是为了后代而在这里登录。
在我的情况下，我还需要考虑一系列背景颜色和半透明alpha通道对转换的累积影响……
var HSL2COLOR = function () { return function (hsl, bg) { function checkHex(v) { return 1 === v.length ? '0'+v : v; } var data, r, g, b, a, cnv = document.createElement('canvas'), ctx = cnv.getContext('2d'), alpha = /a\(/.test(hsl), output = {}; return cnv.width = cnv.height = 1, bg && (ctx.fillStyle = bg, ctx.fillRect(0, 0, 1, 1)), ctx.fillStyle = hsl, ctx.fillRect(0, 0, 1, 1), data = ctx.getImageData(0, 0, 1, 1).data, r = data[0], g = data[1], b = data[2], a = (data[3] / 255).toFixed(2), alpha ? (output.hsla = hsl, bg ? output.rgb = 'rgb('+r+','+g+','+b+')' : output.rgba = 'rgb('+r+','+g+','+b+','+a+')') : (output.hsl = hsl, output.rgb = 'rgb('+r+','+g+','+b+')'), output.hex = '#'+checkHex(r.toString(16))+checkHex(g.toString(16))+checkHex(b.toString(16)), output; }; }(); // hsl: no alpha-channel + no background color console.log(HSL2COLOR('hsl(170, 60%, 45%)')); /*=> { hsl: "hsl(170, 60%, 45%)", rgb: "rgb(45,183,160)", hex: "#2db7a0" } */ // hsla: alpha-channel + no background color console.log(HSL2COLOR('hsla(170, 60%, 45%, 0.35)')); /*=> { hsla: "hsla(170, 60%, 45%, 0.35)", rgba: "rgb(42,183,160,0.35)", hex: "#2ab7a0" } */ // hsla: alpha-channel + background color console.log(HSL2COLOR('hsla(170, 60%, 45%, 0.35)','#f00')); /*=> { hsla: "hsla(170, 60%, 45%, 0.35)", rgb: "rgb(181,64,56)", hex: "#b54038" } */
从上面的结果可以看出，当输入中存在alpha通道但未指定背景颜色时，HEX值不是特别具有代表性 – 因为canvas基本上将透明背景视为黑色。 尽管如此， rgba值仍然保持一致。
无论如何，我实现了我所需要的东西，也许这对某人来说可能会有所帮助。
BP
我做了一个可以轻松转换颜色的小型库 。
这是我的HSL到RGB方法，它使用了库中的一些其他实用程序方法：
Color.hslToRgb = function(hsl, formatted) { var a, b, g, h, l, p, q, r, ref, s; if (isString(hsl)) { if (!hsl.match(Color.HSL_REGEX)) { return; } ref = hsl.match(/hsla?\((.+?)\)/)[1].split(',').map(function(value) { value.trim(); return parseFloat(value); }), h = ref[0], s = ref[1], l = ref[2], a = ref[3]; } else if ((isObject(hsl)) && (hasKeys(hsl, ['h', 's', 'l']))) { h = hsl.h, s = hsl.s, l = hsl.l, a = hsl.a; } else { return; } h /= 360; s /= 100; l /= 100; if (s === 0) { r = g = b = l; } else { q = l < 0.5 ? l * (1 + s) : l + s - l * s; p = 2 * l - q; r = Color.hueToRgb(p, q, h + 1 / 3); g = Color.hueToRgb(p, q, h); b = Color.hueToRgb(p, q, h - 1 / 3); } return getRgb(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), a, formatted); };
如果你不想使用npm，也可以在GitHub上找到lib。