2012-07-07 18 views
7

que tiene un selector de color en mi aplicación que los usuarios pueden utilizar para escoger los colores de ciertos objetos que las salidas de aplicación. El selector de color está emitiendo el color elegido en formato RGBA. Sin embargo, necesito el código de color HTML. Necesito poder 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?Convertir RGBA color al código de color HTML

+0

HTML no admite valores de color semitransparentes: a menos que el alfa esté al máximo o que no le importe el alfa, no podrá obtener un código de color HTML equivalente a un color RGBA. En su lugar, ¿se refería a los valores de color CSS, como lo muestran las etiquetas y la respuesta que aceptó? – BoltClock

+0

@BoltClock El contexto 'canvas' tiene una propiedad' globalAlpha' que puede usar para configurar la transparencia del objeto canvas. –

Respuesta

13

RGBA está soportado nativamente por CSS3:

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

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

Afortunadamente, puede especificar los colores RGBA para los navegadores que lo soportan y una alternativa para los navegadores que no lo hacen. Compruebe esto link para un gran howto.

Estas son las dos opciones: - desde el enlace -

1. retorno al color sólido: permitir al navegador recurrir al uso de un color sólido cuando la opacidad no está disponible. El

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

2. Un retorno al PNG: En los casos en que está utilizando la transparencia en un fondo de color (aunque no en las fronteras o texto) es posible recurrir a la utilización de un PNG con alfa canal 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 estoy tratando de decir es que no es necesario el código de color HTML, sólo tiene que añadir la propiedad css rgba - con javascript o jQuery - después de recoger el color y creo que está hecho.

Espero que ayude.

+0

yo asumiría la respuesta a esto sería que sí, pero RGBA se admite para los estilos en línea correctos? – Nathan

+0

@Natha, tienes razón, la respuesta es sí. Es solo una manera diferente de especificar un color. ** 1. ** un valor HEX - como '" # ff0000 "' ** 2. ** un valor de RGBA - como '" rgb (255,0,0, 0.5) "' ** 3. ** un nombre de color - como '" rojo "' –

+1

Internet Explorer admite RGBA a partir de la versión 9. – BoltClock

2

Si usted está buscando una conversión real (que el texto de su pregunta se refiere literalmente) 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); 

Hay, por supuesto, sin alfa equivalente, pero se podría establecer la opacidad (y/o navegador específico -opacity valores para mayor soporte de los navegadores).

Cuestiones relacionadas