javascript - hexadecimal - rgba html

Convertir Hexágono a RGBA

Question

Mi violín - http://jsbin.com/pitu/1/edit

Quería probar una conversión fácil de hexadecimal a rgba. El navegador que he utilizado renderiza colores usando rgb como predeterminado, así que cuando uso el selector de colores farbtastic estoy convirtiendo el valor hexadecimal en rgb al tomar el color de fondo que genera el valor hexadecimal (como rgb por defecto = conversión simple)

Intenté reemplazar el símbolo ) por , 1) , pero eso no funcionó, así que fui a ver cómo funcionaría convertir rgb a rgba, y todavía tengo problemas.

El jquery

$(''.torgb'').val($(''#color'').css(''background-color''));
$(''.torgba'').val().replace(/rgb/g,"rgba");

La meta

EDITAR :

TinyColor es una gran biblioteca de manipulación de color js que hace todo lo que quiero aquí y más. ¡Me imagino que quizás quieran intentarlo! - TinyColor

Answer 1

@ ElDoRado1239 tiene la idea correcta, pero también hay una manera más limpia:

function hexToRGB(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}
hexToRGB(''#FF0000'', 0.5);

Answer 2

Aquí hay una función que devuelve rgb o rgba si proporciona un alfa. La función también convierte códigos cortos de color hexadecimal.

función:

function hexToRgb(hex, alpha) {
hex = hex.replace(''#'', '''');
var r = parseInt(hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2), 16);
var g = parseInt(hex.length == 3 ? hex.slice(1, 2).repeat(2) : hex.slice(2, 4), 16);
var b = parseInt(hex.length == 3 ? hex.slice(2, 3).repeat(2) : hex.slice(4, 6), 16);
if ( alpha ) {
return ''rgba('' + r + '', '' + g + '', '' + b + '', '' + alpha + '')'';
}
else {
return ''rgb('' + r + '', '' + g + '', '' + b + '')'';
}
}

ejemplos:

hexToRgb(''FF0000'');// rgb(255, 0, 0)
hexToRgb(''#FF0000'');// rgb(255, 0, 0)
hexToRgb(''#FF0000'', 1);// rgba(255, 0, 0, 1)
hexToRgb(''F00'');// rgb(255, 0, 0)
hexToRgb(''#F00'');// rgb(255, 0, 0)
hexToRgb(''#F00'', 1);// rgba(255, 0, 0, 1)

Answer 3

Aquí hay una versión ES2015 + que es un poco más defensiva y maneja la sintaxis abreviada de 3 dígitos.

/*
* Takes a 3 or 6-digit hex color code, and an optional 0-255 numeric alpha value
*/
function hexToRGB(hex, alpha) {
if (typeof hex !== ''string'' || hex[0] !== ''#'') return null; // or return ''transparent''
const stringValues = (hex.length === 4)
? [hex.slice(1, 2), hex.slice(2, 3), hex.slice(3, 4)].map(n => `${n}${n}`)
: [hex.slice(1, 3), hex.slice(3, 5), hex.slice(5, 7)];
const intValues = stringValues.map(n => parseInt(n, 16));
return (typeof alpha === ''number'')
? `rgba(${intValues.join('', '')}, ${alpha})`
: `rgb(${intValues.join('', '')})`;
}

Answer 4

Función ES6 para solo manejar 6 caracteres hexadecimales con o sin el ''#'':

const hex2rgba = (hex, alpha = 1) => {
const [r, g, b] = hex.match(//w/w/g).map(x => parseInt(x, 16));
return `rgba(${r},${g},${b},${alpha})`;
};

Uso:

hex2rgba(''#af087b'', .5) // returns: rgba(175,8,123,0.5)
hex2rgba(''af087b'', .5) // returns: rgba(175,8,123,0.5)
hex2rgba(''af087b'') // returns: rgba(175,8,123,1)

Answer 5

Limpie la versión de TypeScript:

hexToRGB(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
} else {
return `rgba(${r}, ${g}, ${b})`;
}
}

Basado en la respuesta de @ AJFarkas.

Answer 6

Me gustó la respuesta @AJFarkas y agregué el soporte para el atajo hexadecimal (#fff) a ella

function hexToRGB(hex, alpha) {
if (!hex || [4, 7].indexOf(hex.length) === -1) {
return; // throw new Error(''Bad Hex'');
}
hex = hex.substr(1);
// if shortcuts (#F00) -> set to normal (#FF0000)
if (hex.length === 3) {
hex = hex.split('''').map(function(el){
return el + el + '''';
}).join('''');
}
var r = parseInt(hex.slice(0, 2), 16),
g = parseInt(hex.slice(2, 4), 16),
b = parseInt(hex.slice(4, 6), 16);
if (alpha !== undefined) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}
document.write(hexToRGB(''#FF0000'', 0.5));
document.write(''<br>'');
document.write(hexToRGB(''#F00'', 0.4));

Answer 7

Prueba esto

<div class="torgb" onclick="rgba();" style="background-color:#000; width:20px; height:20px;"></div>
<script>
function rgba(){
$(''.torgb'').attr(''background-color'',''rgba(0,0,0,1)'');
$(''.torgb'').attr(''onclick'',''hex();'');
}
function hex(){
$(''.torgb'').attr(''background-color'',''#000'');
$(''.torgb'').attr(''onclick'',''rgba();'');
}
</script>

Answer 8

Si quiere convertir hex a rgba, puede usar esta función,

function hex2rgba_convert(hex,opacity){
hex = hex.replace(''#'','''');
r = parseInt(hex.substring(0, hex.length/3), 16);
g = parseInt(hex.substring(hex.length/3, 2*hex.length/3), 16);
b = parseInt(hex.substring(2*hex.length/3, 3*hex.length/3), 16);
result = ''rgba(''+r+'',''+g+'',''+b+'',''+opacity/100+'')'';
return result;
}

Aquí hay detalles es hex a rgba

Answer 9

Solución Pure JS si ayuda:

function hexToRGB(hex,alphaYes){
var h = "0123456789ABCDEF";
var r = h.indexOf(hex[1])*16+h.indexOf(hex[2]);
var g = h.indexOf(hex[3])*16+h.indexOf(hex[4]);
var b = h.indexOf(hex[5])*16+h.indexOf(hex[6]);
if(alphaYes) return "rgba("+r+", "+g+", "+b+", 1)";
else return "rgb("+r+", "+g+", "+b+")";
}

"alphaYes" es "verdadero" o "falso" dependiendo de si quiere el alfa o no.

Answer 10

ES6 es una solución moderna, sin RegEx, con comprobación de errores y función de flecha constante, que devuelve nulos para los errores. Si no se da alfa, entonces se usa el valor predeterminado de uno:

const hexToRGB = (hex, alpha = 1) => {
let parseString = hex;
if (hex.startsWith(''#'')) {parseString = hex.slice(1, 7);}
if (parseString.length !== 6) {return null;}
const r = parseInt(parseString.slice(0, 2), 16);
const g = parseInt(parseString.slice(2, 4), 16);
const b = parseInt(parseString.slice(4, 6), 16);
if (isNaN(r) || isNaN(g) || isNaN(b)) {return null;}
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};

Nota: Devuelve null para los errores. Puedes reemplazar {return null;} con una sentencia throw: {throw "Not a valid hex color!";} , Pero luego debes llamarlo desde try-catch :

hexToRGB("#3454r5") => null
hexToRGB("#345465") => rgba(52, 84, 101, 1)
hexToRGB("#345465", 0.5) => rgba(52, 84, 101, 0.5)

Answer 11

//If you write your own code, remember hex color shortcuts (eg., #fff, #000)
function hexToRgbA(hex){
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
c= hex.substring(1).split('''');
if(c.length== 3){
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= ''0x''+c.join('''');
return ''rgba(''+[(c>>16)&255, (c>>8)&255, c&255].join('','')+'',1)'';
}
throw new Error(''Bad Hex'');
}
hexToRgbA(''#fbafff'')
/* returned value: (String)
rgba(251,175,255,1)
*/