javascript - bootstrap - rgba color picker

¿Cómo se obtiene el matiz de un color#xxxxxx?

Question

¿Cómo se extrae el componente de tono de un color dado como ''#rrggbb''?

Answer 1

El artículo de wikipedia tiene una fórmula que se ve como algo que se puede implementar fácilmente:

http://en.wikipedia.org/wiki/Hue#Computing_hue_from_RGB

Editar: aquí hay una función que usa esas fórmulas:

function getHue(color) {
var r = parseInt(color.substring(0,2),16)/255;
var g = parseInt(color.substring(2,4),16)/255;
var b = parseInt(color.substring(4,6),16)/255;
var hue;
if ((r >= g) && (g >= b)) {
hue = 60*(g-b)/(r-b);
} else if ((g > r) && (r >= b)) {
hue = 60*(2 - (r-b)/(g-b));
}
//... continue here
return hue;
}
alert(getHue(''FF0000'')); // correctly returns 0
alert(getHue(''408000'')); // correctly returns 90
alert(getHue(''0000FF'')); // not implemented yet

Simplemente continúe usando las fórmulas de la tabla en ese artículo de wikipedia para otros ángulos.

Answer 2

He tropezado con este tema también después de años, así es como he trabajado para solucionarlo.

Créditos: Brandon Mathis de hslpicker.com , el código fue tomado de here

function hexToRgb (color) {
let hex = color[0] === ''#'' ? color.slice(1) : color;
let c;
// expand the short hex by doubling each character, fc0 -> ffcc00
if (hex.length !== 6) {
hex = ((() => {
const result = [];
for (c of Array.from(hex)) {
result.push(`${c}${c}`);
}
return result;
})()).join('''');
}
const colorStr = hex.match(/#?(.{2})(.{2})(.{2})/).slice(1);
const rgb = colorStr.map(col => parseInt(col, 16));
rgb.push(1);
return rgb;
}
function rgbToHsl (rgb) {
const r = rgb[0] / 255;
const g = rgb[1] / 255;
const b = rgb[2] / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const diff = max - min;
const add = max + min;
const hue =
min === max ?
0
: r === max ?
(((60 * (g - b)) / diff) + 360) % 360
: g === max ?
((60 * (b - r)) / diff) + 120
:
((60 * (r - g)) / diff) + 240;
const lum = 0.5 * add;
const sat =
lum === 0 ?
0
: lum === 1 ?
1
: lum <= 0.5 ?
diff / add
:
diff / (2 - add);
const h = Math.round(hue);
const s = Math.round(sat * 100);
const l = Math.round(lum * 100);
const a = rgb[3] || 1;
return [h, s, l, a];
}

He escrito una pequeña envoltura alrededor de esas 2 funciones para convertir una matriz de colores hexadecimales en matrices de cadenas que describen los componentes H / S / L

function hexToHsl (color) {
const rgb = hexToRgb(color);
const hsl = rgbToHsl(rgb);
return `original: ${ color } - H: ${ hsl[0] } S: ${ hsl[1] } L: ${ hsl[2] }`;
}

Uso:

var colors = [''#51bce6'',''#6dcff6'',''#829CBD'',''#565a5c'']
colors.map(color => hexToHsl(color))
=> ["original: #51bce6 - H: 197 S: 75 L: 61", "original: #6dcff6 - H: 197 S: 88 L: 70", "original: #829CBD - H: 214 S: 31 L: 63", "original: #565a5c - H: 200 S: 3 L: 35"]

Answer 3

Si search cómo convertir RGB a HSL, encontrará una serie de algoritmos, incluido el artículo de Wikipedia vinculado por Sergey .

Primero, extrae los componentes RGB de la notación de color hexadecimal.

var color=''#c7d92c''; // A nice shade of green.
var r = parseInt(color.substr(1,2), 16); // Grab the hex representation of red (chars 1-2) and convert to decimal (base 10).
var g = parseInt(color.substr(3,2), 16);
var b = parseInt(color.substr(5,2), 16);

Eso te dará la representación de byte (0-255) de tu color. En este caso, 199, 217, 44.

A continuación, puede utilizar las fórmulas del artículo de Wikipedia para calcular el matiz o robar descaradamente el código de otra persona :

function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
}

(Consulte la página de origen para obtener documentación y una función hslToRgb() ).

Ahora podemos juntar esos dos fragmentos y obtener el tono:

var hue = rgbToHsl(r, g, b)[0] * 360;

El [0] es tomar el tono - la función devuelve una matriz ( [h,s,l] ). Multiplicamos por 360 ya que hue se devuelve como un valor entre 0 y 1; queremos convertirlo a grados.

Con el color de ejemplo de #c7d92c , el hue será ~ 66.24. El selector de color de Photoshop dice que el tono de ese color es de 66 °, ¡así que parece que estamos bien!

Answer 4

hue = Atan2(1.732050808 * (G - B), (2 * R - G - B)) * 57.295779513;

http://en.wikipedia.org/wiki/Hue

hue = Atan2 (sqr (3) * (G - B), 2 * R - G - B)

El resultado será en coordenadas polares. Multiplique por 180 y divida por pi para convertir a ángulo.