Esta semana he descubierto algo que después de años trabajando con CSS ya me vale no haber sabido antes…
Hasta ahora, cuando quería indicar un color con trasparencia con CSS, lo hacía con el código correspondiente en rgba, por ejemplo:
background-color: rgba(255,255,255,0.5); // En este caso sería color de fondo blanco con 50% de transparencia.En el caso de blanco o negro no hay problema, pero para otros colores tenía que buscar el código correspondiente en RGB ya que normalmente para CSS utilizo los código Hexadecimales.
Pues resulta que con Hexadecimal también puede hacerse lo mismo de la forma más simple, añadiendo el valor de la transparencia, en este caso de 0 a 100, al final del código del color.
Actualización: los últimos dos dígitos que podemos añadir al código hexadecimal no se corresponden del 0 al 100 como la opacidad sino que se corresponden a una tabla de dígitos que indico al final.
background-color: #FFFFFF80; // El mismo que antes, blanco con 50% de transparencia.Tabla de correspondencia de valores opacity / hexadecimal:
| 100% — FF | 50% — 80 |
| 95% — F2 | 45% — 73 |
| 90% — E6 | 40% — 66 |
| 85% — D9 | 35% — 59 |
| 80% — CC | 30% — 4D |
| 75% — BF | 25% — 40 |
| 70% — B3 | 20% — 33 |
| 65% — A6 | 15% — 26 |
| 60% — 99 | 10% — 1A |
| 55% — 8C | 5% — 0D |
| 0% — 00 |
See the Pen Transparencia en Color Hexadecimal by esolalf (@esther_sola) on CodePen.
Si utilizas Chrome como navegador, en el inspector tienes una herramienta que te será muy práctica para saber el código hexadecimal con la transparencia:
Por último ten en cuenta que en navegadores como Internet Explorer y Edge, este tipo de código de color no está soportado. Actualmente la compatibilidad es esta:
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
7 respuestas a «Indicar transparencia en código de color Hexadecimal»
|
excelente, llevaba buscando esto mucho tiempo
gracias
|
No funciona el navegador Edge
|
Cierto Jose! He añadido el tema de la compatibilidad al final del artículo.
|
Perdonad no soy profesional, ni de cerca, de esto pero yo añado esos dos numeros o letras (no me ha quedado claro y he probado con los dos) en wordpress y no me deja. Sabeis por que? Gracias
|
Hola Esther!
El código hexadecimal se usa en los estilos CSS de la plantilla de WordPress por defecto, y siempre es una # y seís dígitos detrás, combinación de números y letras, en este artículo vemos como añadirle dos dígitos más para indicar la transparencia.
Saludos!
|
Lo utilice en sublime text pero solo me da el color de los primero dígitos, me acepta todo pero no me da la transparencia
|
No perdon, ya se pudo disculpa las molestias 🙂