Calculadora de opacidad HEX
Escribe un porcentaje de opacidad para obtener el sufijo alfa HEX de dos dígitos, el color completo de 8 dígitos #RRGGBBAA y el valor rgba() correspondiente. También funciona a la inversa: pega un par alfa como CC para ver qué opacidad representa.
Última actualización:
0% = totalmente transparente, 100% = totalmente opaco
Dos dígitos hexadecimales como 80 o CC, o un código #RRGGBBAA completo
HEX de 3 o 6 dígitos; se usa para el código de 8 dígitos y la vista previa
Cómo usar Calculadora de opacidad HEX
- Elige la dirección: de opacidad a HEX, o de alfa HEX a opacidad.
- Introduce la opacidad (0-100%) o el par alfa de dos dígitos.
- Añade tu color base para obtener el código completo de 8 dígitos y una vista previa.
- Copia el resultado o descarga la tabla completa de 0-100% en CSV.
Fórmula de opacidad HEX
Un valor alfa HEX es la opacidad escrita en una escala de 0-255 en base 16:
alpha = round(opacity% × 255 ÷ 100), y luego convierte alpha en dos dígitos hexadecimales (añade un 0 delante si es menor que 16).
A la inversa: opacity% = alpha ÷ 255 × 100. Por ejemplo, CC = 12 × 16 + 12 = 204, y 204 ÷ 255 = 80%.
Tabla de opacidad HEX
Cada paso del 5%, mostrado sobre negro (#000000). Cambia los seis primeros dígitos por el color que quieras; la herramienta de arriba muestra cada porcentaje.
| Opacidad | Alfa HEX | 0-255 | Ejemplo en negro |
|---|---|---|---|
| 100% | FF | 255 | #000000FF |
| 95% | F2 | 242 | #000000F2 |
| 90% | E6 | 230 | #000000E6 |
| 85% | D9 | 217 | #000000D9 |
| 80% | CC | 204 | #000000CC |
| 75% | BF | 191 | #000000BF |
| 70% | B3 | 179 | #000000B3 |
| 65% | A6 | 166 | #000000A6 |
| 60% | 99 | 153 | #00000099 |
| 55% | 8C | 140 | #0000008C |
| 50% | 80 | 128 | #00000080 |
| 45% | 73 | 115 | #00000073 |
| 40% | 66 | 102 | #00000066 |
| 35% | 59 | 89 | #00000059 |
| 30% | 4D | 77 | #0000004D |
| 25% | 40 | 64 | #00000040 |
| 20% | 33 | 51 | #00000033 |
| 15% | 26 | 38 | #00000026 |
| 10% | 1A | 26 | #0000001A |
| 5% | 0D | 13 | #0000000D |
| 0% | 00 | 0 | #00000000 |
Consejos para colores transparentes
- Usa HEX de 8 dígitos para superposiciones, bordes y sombras en los que solo el color debe ser translúcido; usa la propiedad
opacitypara atenuar un elemento completo. - Las herramientas de diseño suelen mostrar la opacidad en porcentaje, mientras que el código necesita HEX; por eso vale la pena recordar valores como
1A(10%),33(20%),80(50%) yCC(80%). - Los colores XML de Android ponen el alfa primero (
#AARRGGBB), así que#802F6B4Fallí equivale a#2F6B4F80en CSS. - El texto colocado sobre un color translúcido debe seguir cumpliendo las pautas de contraste respecto al fondo real que hay detrás.
Preguntas frecuentes
¿Cuál es el código HEX para un 50% de opacidad?
El 50% de opacidad es 80 en HEX. El 50% de 255 es 127.5, que se redondea a 128, y 128 en hexadecimal es 80. Por tanto, el negro al 50% de opacidad es #00000080.
¿Cómo convierto la opacidad en un valor alfa HEX?
Multiplica el porcentaje de opacidad por 255, divide entre 100, redondea al número entero más cercano y conviértelo en dos dígitos hexadecimales. Para el 75%: 75 × 255 ÷ 100 = 191.25, redondeado a 191, que es BF.
¿Dónde va el alfa en un color HEX de 8 dígitos?
En CSS el par alfa va al final: #RRGGBBAA. Así, #2F6B4FCC es el color #2F6B4F con un 80% de opacidad. Los recursos de color de Android usan el orden contrario, #AARRGGBB, con el alfa primero.
¿Todos los navegadores admiten colores HEX de 8 dígitos?
Sí. #RRGGBBAA y la abreviatura #RGBA de 4 dígitos forman parte de CSS Color Level 4 y funcionan en todas las versiones actuales de Chrome, Edge, Firefox y Safari. Para navegadores muy antiguos, usa rgba().
¿Por qué mi opacidad no es exacta?
El canal alfa solo tiene 256 pasos (de 00 a FF), así que la mayoría de los porcentajes quedan entre dos pasos. El 33% se convierte en 54, que en realidad es un 32.94%. La diferencia es demasiado pequeña para verse.
¿Cuál es la diferencia entre opacidad y transparencia?
Son opuestas. Un 80% de opacidad significa que el color cubre el 80% y deja ver un 20% del fondo, es decir, un 20% de transparencia. El alfa HEX siempre almacena la opacidad.
¿El alfa HEX es lo mismo que la propiedad CSS opacity?
No exactamente. Un alfa HEX solo hace translúcido ese color concreto, por ejemplo un fondo, mientras que la propiedad opacity atenúa todo el elemento, incluidos su texto y sus elementos hijos.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.