paleta - Conversión de color RGBA a código de color HTML

tabla de codigo de colores

Question

Tengo un selector de color en mi aplicación que los usuarios pueden usar para seleccionar colores de ciertos objetos que la aplicación genera. El selector de color está emitiendo el color elegido en formato RGBA. Sin embargo, necesito el código de color HTML. Necesito ser capaz de convertir RGBA, sin saber el color antes de tiempo, a HTML y usarlo como una cadena más tarde. ¿Cómo voy a hacer esto?

Answer 1

Si está buscando una conversión real (que literalmente solicita el texto de su pregunta) de rgb (a) a hexadecimal en JavaScript:

red = green = blue = 255;
hex = ''#'' + 
    ("0" + (red).toString(16)).slice(-2) + 
    ("0" + (green).toString(16)).slice(-2) +
    ("0" + (blue).toString(16)).slice(-2);

Por supuesto, no hay un equivalente alfa, pero puede establecer la opacidad (y / o los valores de -opacity específicos del navegador para el soporte del navegador anterior).

Answer 2

RGBA es originalmente compatible con CSS3 :

div {
   background: rgba(200, 54, 54, 0.5); 
}

Los navegadores Firefox, Safari, Chrome, IE9 y Opera son compatibles con RGBA. Los IE antiguos no son compatibles.

Afortunadamente, puede especificar colores RGBA para buscadores que lo admitan y una alternativa para navegadores que no lo hacen. Consulte este enlace para obtener un excelente howto.

Estas son las dos opciones: - desde el enlace -

1. VOLVER A COLOR SÓLIDO: permite que el navegador vuelva a usar un color sólido cuando la opacidad no esté disponible. los

h1 {
     color: rgb(127, 127, 127); 
     color: rgba(0, 0, 0, 0.5); //for modern browsers only
}

2. VOLVER A UN PNG: En los casos en los que se usa transparencia en un color de fondo (aunque no en bordes o texto) es posible recurrir a un PNG con canal alfa para obtener el mismo efecto. Esto es menos flexible que usar CSS, ya que deberá crear un PNG nuevo para cada nivel de transparencia requerido, pero puede ser una solución útil.

h1 {
     background: transparent url(imageName.png);
     background: rgba(0, 0, 0, 0.5) none; //for modern browsers only
}

Lo que intento decir es que no necesitas el código de color HTML, solo necesitas agregar la propiedad css rgba - con javascript o jquery - después de que rgba el color y creo que ya terminaste.

Espero eso ayude.