Javascript convierte el color HSB / HSV a RGB con precisión
Necesito convertir con precisión HSB a RGB, pero no estoy seguro de cómo evitar el problema de convertir decimales en números enteros sin redondear. Esta es la función actual que tengo de una biblioteca de colorpicker:
HSBToRGB = function (hsb) {
var rgb = { };
var h = Math.round(hsb.h);
var s = Math.round(hsb.s * 255 / 100);
var v = Math.round(hsb.b * 255 / 100);
if (s == 0) {
rgb.r = rgb.g = rgb.b = v;
} else {
var t1 = v;
var t2 = (255 - s) * v / 255;
var t3 = (t1 - t2) * (h % 60) / 60;
if (h == 360) h = 0;
if (h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3 }
else if (h < 120) { rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3 }
else if (h < 180) { rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3 }
else if (h < 240) { rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3 }
else if (h < 300) { rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3 }
else if (h < 360) { rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3 }
else { rgb.r = 0; rgb.g = 0; rgb.b = 0 }
}
return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
Como puede ver, la inexactitud en esta función proviene de las matemáticas.ronda
5 answers
From Parthik Gosar 's link in this comment with slight modification to let you enter each value independently or all at once as an object{[18]]}
/* accepts parameters
* h Object = {h:x, s:y, v:z}
* OR
* h, s, v
*/
function HSVtoRGB(h, s, v) {
var r, g, b, i, f, p, q, t;
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255)
};
}
Este código espera 0 <= h, s, v <= 1
, si estás usando grados o radianes, recuerda dividirlos.
Los 0 <= r, g, b <= 255
devueltos se redondean al Entero más cercano. Si no desea este comportamiento, elimine las Math.round
s del objeto devuelto.
Y al revés (con menos division)
/* accepts parameters
* r Object = {r:x, g:y, b:z}
* OR
* r, g, b
*/
function RGBtoHSV(r, g, b) {
if (arguments.length === 1) {
g = r.g, b = r.b, r = r.r;
}
var max = Math.max(r, g, b), min = Math.min(r, g, b),
d = max - min,
h,
s = (max === 0 ? 0 : d / max),
v = max / 255;
switch (max) {
case min: h = 0; break;
case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;
case g: h = (b - r) + d * 2; h /= 6 * d; break;
case b: h = (r - g) + d * 4; h /= 6 * d; break;
}
return {
h: h,
s: s,
v: v
};
}
Este código producirá 0 <= h, s, v <= 1
, pero esta vez toma cualquier 0 <= r, g, b <= 255
(no necesita ser un entero)
Para completar,
function HSVtoHSL(h, s, v) {
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
var _h = h,
_s = s * v,
_l = (2 - s) * v;
_s /= (_l <= 1) ? _l : 2 - _l;
_l /= 2;
return {
h: _h,
s: _s,
l: _l
};
}
function HSLtoHSV(h, s, l) {
if (arguments.length === 1) {
s = h.s, l = h.l, h = h.h;
}
var _h = h,
_s,
_v;
l *= 2;
s *= (l <= 1) ? l : 2 - l;
_v = (l + s) / 2;
_s = (2 * s) / (l + s);
return {
h: _h,
s: _s,
v: _v
};
}
Todos estos valores deben estar en el rango 0
a 1
. Para HSL<->RGB
ir a través de VHS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-13 23:49:41
Dada la creciente popularidad de npm Creo que vale la pena mencionar un paquete que contiene todas estas funciones a través de una simple API:
Npm install colorsys
var colorsys = require('colorsys')
colorsys.rgb_to_hsv({ r: 255, g: 255, b: 255 })
// { h: 0 , s: 0 , v: 100 }
Para el navegador:
<script src="http://netbeast.github.io/colorsys/browser.js"></script>
colorsys.rgb_to_hex(h, s, v)
// #hexcolor
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-12 12:46:10
Una vez escribí esta función:
function mix(a, b, v)
{
return (1-v)*a + v*b;
}
function HSVtoRGB(H, S, V)
{
var V2 = V * (1 - S);
var r = ((H>=0 && H<=60) || (H>=300 && H<=360)) ? V : ((H>=120 && H<=240) ? V2 : ((H>=60 && H<=120) ? mix(V,V2,(H-60)/60) : ((H>=240 && H<=300) ? mix(V2,V,(H-240)/60) : 0)));
var g = (H>=60 && H<=180) ? V : ((H>=240 && H<=360) ? V2 : ((H>=0 && H<=60) ? mix(V2,V,H/60) : ((H>=180 && H<=240) ? mix(V,V2,(H-180)/60) : 0)));
var b = (H>=0 && H<=120) ? V2 : ((H>=180 && H<=300) ? V : ((H>=120 && H<=180) ? mix(V2,V,(H-120)/60) : ((H>=300 && H<=360) ? mix(V,V2,(H-300)/60) : 0)));
return {
r : Math.round(r * 255),
g : Math.round(g * 255),
b : Math.round(b * 255)
};
}
Espera 0 esta imagen para crear el código.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-18 11:34:37
Hay un error en la función HSVtoHSL
de Paul S: cuando la entrada v
es 0 obtenemos un problema de división por cero y la salida s
se convierte en NaN. Aquí hay una solución:
function HSVtoHSL(h, s, v) {
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
var _h = h,
_s = s * v,
_l = (2 - s) * v;
_s /= (_l <= 1) ? (_l === 0 ? 1 : _l) : 2 - _l;
_l /= 2;
return {
h: _h,
s: _s,
l: _l;
};
}
P.D. Habría agregado esto como un comentario en el post de Paul S., pero soy nuevo y el sistema me dijo que no tengo suficiente rep.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-15 12:46:02
Aquí está el algoritmo en unitycript, tendrás que reescribir el float, mathf.funciones de piso y la salida es un vector3 de 3 flotadores.
EDITAR Esta fue la primera respuesta en esta página y parecía útil proporcionar tanta ayuda cuando no había otras respuestas, con la pequeña reserva de que tiene que convertir a una versión casi idéntica en JS.
function HSVToRGB(h : float, s : float, v : float) {
h=h%1;
s=s%1;
v=v%1;
var r : float;
var g : float;
var b : float;
var i : float;
var f : float;
var p : float;
var q : float;
var t : float;
i = Mathf.Floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v; g = t; b = p; break;
case 1: r = q; g = v; b = p; break;
case 2: r = p; g = v; b = t; break;
case 3: r = p; g = q; b = v; break;
case 4: r = t; g = p; b = v; break;
case 5: r = v; g = p; b = q; break;
}
return Color(r,g,b);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-17 15:35:37