css - online - rgba to hex
CSS hexadecimal RGBA? (10)
El CSS Color Module Level 4 probablemente admitirá notación RGBA hexadecimal de 4 y 8 dígitos.
Hace tres semanas (18 de diciembre de 2014) el borrador del editor de CSS Color Module Level 4 se envió al Grupo de trabajo de CSS W3C. Aunque en un estado que es muy susceptible al cambio, la versión actual del documento implica que en un futuro próximo, CSS admitirá la notación RGBA hexadecimal de 4 y 8 dígitos.
Nota: la siguiente cita tiene fragmentos irrelevantes recortados y la fuente puede haber sido modificada en gran medida en el momento de leer esto (como se mencionó anteriormente, es un borrador del editor y no un documento final).
Si las cosas han cambiado mucho, por favor deje un comentario haciéndome saber para poder actualizar esta respuesta!
§ 4.2. Las notaciones hexadecimales RGB: #RRGGBB
La sintaxis de un
<hex-color>es un<hash-token>cuyo valor consiste en 3, 4, 6 u 8 dígitos hexadecimales . En otras palabras, un color hexadecimal se escribe como un carácter hash, "#", seguido de un número de dígitos0-9o letrasaf(el caso de las letras no importa -#00ff00es idéntico a#00FF00).8 dígitos
Los primeros 6 dígitos se interpretan de manera idéntica a la notación de 6 dígitos. El último par de dígitos, interpretado como un número hexadecimal, especifica el canal alfa del color, donde
00representa un color completamente transparente yffrepresenta un color completamente opaco.Ejemplo 3
En otras palabras,#0000ffccrepresenta el mismo color quergba(0, 0, 100%, 80%)(un azul ligeramente transparente).4 dígitos
Esta es una variante más corta de la notación de 8 dígitos, "expandida" de la misma manera que la notación de 3 dígitos. El primer dígito, interpretado como un número hexadecimal, especifica el canal rojo del color, donde
0representa el valor mínimo yfrepresenta el máximo. Los siguientes tres dígitos representan los canales verde, azul y alfa, respectivamente.
¿Qué significa esto para el futuro de los colores CSS?
Esto significa que suponiendo que esto no se elimine por completo del documento de Nivel 4, pronto podremos definir nuestros colores RGBA (o colores HSLA, si usted es uno de esos tipos) en formato hexadecimal en los navegadores que admiten el Color. Sintaxis del Módulo Nivel 4
Ejemplo
elem {
background: rgb(0, 0, 0); /* RGB notation (no alpha). */
background: #000; /* 3-digit hexadecimal notation (no alpha). */
background: #000000; /* 6-digit hexadecimal notation (no alpha). */
background: rgba(0, 0, 0, 1.0); /* RGBA notation. */
/* The new 4 and 8-digit hexadecimal notation. */
background: #0000; /* 4-digit hexadecimal notation. */
background: #00000000; /* 8-digit hexadecimal notation. */
}
¿Cuándo podré usar esto en mis productos orientados al cliente?
Todos los chistes a un lado: actualmente solo es a principios de 2015, por lo que no se admitirán en ningún navegador desde hace bastante tiempo; incluso si el producto está diseñado solo para funcionar en los navegadores más actualizados, probablemente no estar viendo esto en acción en un navegador de producción en el corto plazo.
Ver el soporte actual del navegador para la notación de color #RRGGBBAA
Sin embargo, dicho esto, la forma en que CSS funciona significa que ¡podemos comenzar a usarlos hoy! Si realmente desea comenzar a usarlos ahora mismo, siempre y cuando agregue una copia de seguridad, cualquier navegador no compatible simplemente ignorará las nuevas propiedades hasta que se consideren válidas:
figure {
margin: 0;
padding: 4px;
/* Fall back (...to browsers which don''t support alpha transparency). */
background: #FEFE7F;
color: #3F3FFE;
/* Current ''modern'' browser support. */
background: rgba(255, 255, 0, 0.5);
color: rgba(0, 0, 255, 0.75);
/* Fall... foward? */
background: #ffff007F; /* Or, less accurately, #ff08 */
color: #0000ffbe; /* Or #00fc */
}
<figure>Hello, world!</figure>
Siempre que esté viendo esta respuesta en un navegador que admita las propiedades de background y color en CSS, el elemento <figure> en el resultado del fragmento de arriba se verá muy similar a esto:
Usando la versión más reciente de Chrome en Windows (v39.0.2171) para inspeccionar nuestro elemento <figure> , veremos lo siguiente:
La caída hexadecimal de 6 dígitos es anulada por los valores de rgba() , y nuestros valores hexadecimales de 8 dígitos se ignoran, ya que el analizador de CSS de Chrome considera que actualmente no son válidos. Tan pronto como nuestro navegador admita estos valores de 8 dígitos, estos rgba() los rgba() .
Sé que puedes escribir ...
background-color: #ff0000;
... si quieres algo que sea rojo.
Y puedes escribir ...
background-color: rgba(255, 0, 0, 0.5);
... si quieres algo rojo y translúcido.
¿Hay alguna forma concisa de escribir colores parcialmente transparentes en hexadecimal? Quiero algo como:
background-color: #ff000088; <--- the 88 is the alpha
... o ...
background-color: #ff0000 50%;
Obtengo todos mis colores en hexadecimal, y tener que convertirlos todos a la escala decimal 0-255 es molesto.
¿por qué no utilizar background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */ background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */
si apuntas a un color para un texto o probablemente un elemento, esto debería ser mucho más fácil de hacer.
Bueno, diferentes notaciones de color es lo que tendrás que aprender.
Kuler te da una mejor oportunidad de encontrar el color y en múltiples anotaciones.
Hex no es diferente de RGB, FF = 255 y 00 = 0, pero eso es lo que sabes. Entonces, de alguna manera, debes visualizarlo.
Yo uso Hex, RGBA y RGB. A menos que se requiera la conversión masiva, hacer esto manualmente le ayudará a recordar algunos colores impares y sus códigos.
Para la conversión masiva escriba alguna secuencia de comandos como la dada por Alarie. Diviértete con Colors.
Chrome 52+ es supports alfa hex:
background: #56ff0077;
Encontré la respuesta después de publicar la mejora de la pregunta. ¡Lo siento!
¡MS Excel ayudó!
simplemente agregue el prefijo hexadecimal al valor de color hexadecimal para agregar un alfa que tenga la opacidad equivalente como el valor%.
(en rbga, el porcentaje de opacidad se expresa como un decimal como se mencionó anteriormente)
Opacity % 255 Step 2 digit HEX prefix
0% 0.00 00
5% 12.75 0C
10% 25.50 19
15% 38.25 26
20% 51.00 33
25% 63.75 3F
30% 76.50 4C
35% 89.25 59
40% 102.00 66
45% 114.75 72
50% 127.50 7F
55% 140.25 8C
60% 153.00 99
65% 165.75 A5
70% 178.50 B2
75% 191.25 BF
80% 204.00 CC
85% 216.75 D8
90% 229.50 E5
95% 242.25 F2
100% 255.00 FF
Me temo que eso no es posible. el formato rgba que sabes es el único.
Si puede usar LESS, hay una función de fundido.
@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);
background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color);
// result:
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));
Vea aquí http://www.w3.org/TR/css3-color/#rgba-color
No es posible, muy probablemente porque 0xFFFFFFFF es mayor que el valor máximo para enteros de 32 bits
Principe azul:
Solo Internet Explorer permite el color hexadecimal de 4 bytes en el formato de ARGB, donde A es el canal Alpha. Se puede usar en filtros de gradiente, por ejemplo:
filter : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";
Donde dir puede ser: 1 (horizontal) o 0 (vertical) Y las cadenas de colores pueden ser colores hexadecimales (# FFAAD3) o colores hexadecimales argb (# 88FFAAD3).
RGB=''#ffabcd'';
A=''0.5'';
RGBA=''(''+parseInt(RGB.substring(1,3),16)+'',''+parseInt(RGB.substring(3,5),16)+'',''+parseInt(RGB.substring(5,7),16)+'',''+A+'')'';