convertir Lgv à rvb et hexadécimal

J'ai besoin d'une couleur de convertisseur pour convertir de la lgv à rvb et valeur hex. Je vais faire comme cette. Je suis à l'aide de jquery et jquery ui curseur de plage pour cela. Voici mon code:

$(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;
        }
    });
});

Je veux la solution à ceci:

l'entrée de convertisseur peut être donné par les variables. comme hsl_hue hsl_saturation hsl_light.

Est-il possible de faire cela?
si non, que puis-je faire?

OriginalL'auteur Shohidul Alam | 2016-04-19

LGV 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)];
}

Vous pouvez trouver plus d'informations ici - LGV à la conversion des couleurs RVB

OriginalL'auteur luke mclean

Prend degree, percentage, percentage et retourne css hex couleur:

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)}`;
}

Exemple:

hslToHex(360, 100, 50)  //"#ff0000" -> red

OriginalL'auteur icl7126

J'ai récemment eu l'occasion de résoudre ce problème et est venu avec une toile à base de solution. Je suis journalisation ici pour la postérité.

Dans mon cas, j'ai aussi nécessaire pour prendre en compte les effets cumulatifs sur la conversion donné une gamme de couleurs de fond et d'une semi-transparent canal 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" 
}
*/

Comme vous pouvez le voir à partir des résultats ci-dessus, les valeurs hexadécimales sont pas particulièrement représentatif lorsqu'il y a un canal alpha dans l'entrée, mais pas de couleur d'arrière-plan spécifié - comme la toile fondamentalement voit un fond transparent en noir. Néanmoins, la rgba valeur est restée cohérente.

De toute façon, j'ai obtenu ce dont j'avais besoin, et peut-être que ce sera utile à quelqu'un, à un moment donné.

OriginalL'auteur Brian Peacock

J'ai fait un petite bibliothèque qui peut facilement convertir les couleurs.

C'est mon LGV à RVB méthode, qui utilise quelques autres méthodes d'utilitaire à partir de la bibliothèque:

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

Si vous ne voulez pas utiliser npm, la lib peuvent également être trouvés sur GitHub.

Si vous voulez donner aux gens une autre option en plus de la NGP, puisque cela semble être isomorphe, vous pouvez le publier sur bower.

OriginalL'auteur GMchris

0

Une autre façon de résoudre ce problème est de tirer parti de la window.getComputedStyle capacité des navigateurs modernes:
1. Créer un élément de la page (il peut être caché, par exemple, avec display:none, mais qui semble supprimer la sortie de l'opacité /la "Une" de la valeur)
2. Définir une couleur de la valeur de la propriété de cet élément à l'aide de la représentation de votre choix, par exemple e.style.color = 'hsla(100, 50%, 75%, 0.8)'; (ou même les couleurs nommées comme 'rebeccapurple')
3. Lire la valeur de retour à l'aide de window.getComputedStyle(e).color. Ce sera une chaîne de la forme rgb(r,g,b) ou rgba(r,g,b,a).
Démonstration en direct sur CodePen

OriginalL'auteur iX3

Vous devez vous connecter pour publier un commentaire.