css - hexadecimal - Colores hexagonales: ¿Representación numérica para “transparente”?

rgb color

Question

Estoy creando un CMS web en el que el usuario puede elegir colores para ciertos elementos del sitio. Me gustaría convertir todos los valores de color a hexadecimal para evitar cualquier problema de formato ("rgb (x, y, z)" o colores con nombre). He encontrado una buena biblioteca de JS para eso.

Lo único que no puedo conseguir en el hex es "transparente". Necesito esto cuando declaro explícitamente un elemento como transparente, que en mi experiencia puede ser diferente de no definir ningún valor en absoluto.

¿Alguien sabe si esto se puede convertir en alguna forma numérica? ¿Tendré que configurar todas las instancias de procesamiento para que acepten valores hexadecimales o "transparentes"? No puedo pensar de otra manera.

Answer 1

HEXA - #RRGGBBAA

Hay una forma relativamente nueva de hacer transparencia, se llama HEXA (HEX + Alpha). Toma 8 dígitos en lugar de 6. El último par es alfa. Así que el patrón de pares es #RRGGBBAA . Tener 4 dígitos también funciona: #RGBA

No estoy seguro de la compatibilidad de su navegador por el momento, pero puede consultar el Borrador de documentos para obtener más información.

§ 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 de hash, "#", seguido de un número de dígitos 0-9 o letras af (el caso de las letras no importa - #00ff00 es 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 00 representa un color completamente transparente y ff representa un color completamente opaco.

Ejemplo 3
En otras palabras, #0000ffcc representa el mismo color que rgba(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 0 representa el valor mínimo y f representa el máximo. Los siguientes tres dígitos representan los canales verde, azul y alfa, respectivamente.

En su mayor parte, Chrome y Firefox han comenzado a admitir esto:

Answer 2

El canal alfa define el valor de transparencia de un color, por lo que cualquier color es 100% transparente siempre que el valor alfa sea 0. Normalmente, este tipo de color de cuatro canales se conoce como RGBA.

Puedes especificar RGBA en CSS así:

div {
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

Tenga en cuenta que no todos los navegadores son compatibles con RGBA, en cuyo caso puede especificar un repliegue :

div {
    background: rgb(200, 54, 54); /* fallback */
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

Más información sobre el soporte del navegador y las soluciones alternativas se pueden encontrar here .

Answer 3

Hay dos enfoques comunes para esto: o reservar un color específico como "transparente", en cuyo caso no puede usar ese color en las imágenes sin que aparezca transparente, o definir un cuarto canal junto con el rojo, el verde y el azul llamado "alfa" lo que indica translucidez / transparencia.

Answer 4

Puede usar esta tabla de conversión: http://roselab.jhu.edu/~raj/MISC/hexdectxt.html

por ejemplo, si desea una transparencia del 60%, use 3C (equivalente a hexadecimal).

Esto es útil para la transparencia del gradiente de fondo de IE:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454)";

donde startColorstr y endColorstr: 2 primeros caracteres son un valor hexadecimal para la transparencia, y los seis restantes son el color hexadecimal.

Answer 5

También estaba intentando la transparencia. Tal vez podría intentar dejar en blanco el valor del fondo, por ejemplo, algo como

bgcolor=" "

Answer 6

Utilice el siguiente código hexadecimal para el color del texto transparente: # 00FFFF00

Answer 7

La transparencia es una propiedad fuera del color en sí, también conocida como componente alpha . No puedes codificarlo como RGB.

Si quieres un fondo transparente, puedes hacer esto:

background: transparent;

Además, no sé si podría ser útil o no, pero podría establecer la propiedad de opacity :

.half{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

Necesitas ambos para que funcione en IE y todos los demás navegadores decentes.