¿Qué es un código de color hexadecimal?

Un código de color hexadecimal representa un color mediante dígitos hexadecimales, como lo hacen CSS y la mayoría de las herramientas de diseño. En #3b82f6, cada par de dígitos corresponde a un canal: 3b es el rojo, 82 es el verde y f6 es el azul, desde 00 (apagado) hasta ff (intensidad máxima). Un cuarto par opcional establece el alfa o la opacidad, por lo que #3b82f6cc es el mismo azul con una opacidad del 80 %. Los códigos en los que cada par repite su dígito pueden abreviarse a tres o cuatro dígitos, por lo que #ff8800 también puede escribirse como #f80.

Descripción de la herramienta

Esta herramienta permite editar un código de color hexadecimal par por par. Escribe o pega un código, elige un color o pega uno en RGB, HSL u otro formato; después, cambia los pares del rojo, verde, azul y alfa, o la opacidad, y observa el resultado sobre una cuadrícula de transparencia. El color editado se muestra en los formatos hexadecimales que utilizan CSS, Android y el código, todos listos para copiar.

Funciones

  • Edita códigos hexadecimales de 3, 4, 6 y 8 dígitos, con o sin #
  • Cambia cada canal como un par hexadecimal de dos dígitos y el alfa como un par hexadecimal o un porcentaje
  • Elige un color o pega uno en RGB, HSL u otro formato, conservando el alfa
  • Previsualiza colores transparentes sobre un tablero de ajedrez
  • Obtén el color como HEX de 6 dígitos, HEX de 8 dígitos, HEX abreviado, rgb() o rgba(), #AARRGGBB y 0xAARRGGBB
  • Cambia entre dígitos hexadecimales en minúsculas y mayúsculas
  • Funciona en tu navegador

Cómo funciona

Un código de 3 o 4 dígitos se amplía duplicando cada dígito, y un código sin un par alfa es completamente opaco (ff). Un solo dígito escrito en un campo de canal se interpreta como 0 seguido de ese dígito, por lo que f equivale a 0f. Los porcentajes de opacidad se redondean al valor alfa más cercano entre 0 y 255, por lo que 80 % se convierte en cc (204). El formato abreviado solo existe cuando los dos dígitos de cada par coinciden; de lo contrario, ese campo permanece vacío.

Consejos

  • CSS lee el par alfa al final (#RRGGBBAA), pero los recursos de color de Android y .NET lo colocan al principio (#AARRGGBB), así que elige los campos ARGB para esos formatos.
  • Deja el alfa en ff para obtener un código simple de 6 dígitos; los campos de 8 dígitos y ARGB seguirán mostrándolo completo.