Ingresa un código hex o un triple RGB; convertimos a los demás formatos y mostramos una muestra.
Los códigos de color no son arbitrarios — tienen una lógica precisa que vale la pena entender
Los códigos de color hexadecimales como #3A7BD5 codifican tres canales de color — rojo, verde, azul — como pares hexadecimales de dos dígitos. #3A es 58 en decimal, #7B es 123, #D5 es 213. Esos tres números definen exactamente cuánta luz roja, verde y azul se mezcla para producir el color en pantalla. Como cada canal va de 0 a 255, hay 16.777.216 colores hex posibles. CSS, SVG, HTML canvas y la mayoría de las herramientas de diseño aceptan hex de forma nativa.
HSL (Tono, Saturación, Luminosidad) es a menudo más útil que RGB para el trabajo de diseño porque se corresponde con la forma en que los humanos pensamos en el color. El tono es la posición en la rueda cromática (de 0 a 360 grados), la saturación es la intensidad del color y la luminosidad es el brillo. Ajustar solo el valor de luminosidad en HSL te da sombras fiables de un color sin desplazar su tono — algo que es genuinamente difícil de hacer de forma predecible en el espacio RGB.
Frequently asked questions
¿Cuál es la diferencia entre los códigos de color hex de 3 y 6 dígitos?
El hex de tres dígitos (#RGB) es una abreviatura del hex de seis dígitos (#RRGGBB) donde cada dígito se duplica. Así, <code>#A3F</code> se expande a <code>#AA33FF</code>. Esta abreviatura solo funciona cuando ambos dígitos de cada canal son idénticos. Ahorra unos pocos caracteres en CSS pero representa el mismo subconjunto de 4.096 colores del total de 16.7 millones. En caso de duda, usa la forma de 6 dígitos — siempre es válida e inequívoca.
¿Por qué los colores se ven diferentes en pantalla que impresos?
Las pantallas usan <strong>mezcla de color aditiva</strong> (RGB: luz sumada), mientras que las impresoras usan <strong>mezcla sustractiva</strong> (CMYK: la tinta absorbe la luz). RGB puede representar neones vívidos y saturados que simplemente no se pueden reproducir en CMYK — están «fuera de gama» para la impresión. Si diseñas en hex/RGB para un proyecto impreso sin convertir a CMYK, el software de gestión de color de tu impresora aproximará los colores, a menudo haciéndolos lucir más apagados de lo esperado.
¿Qué es el canal alfa y cómo funciona en CSS?
El alfa controla la opacidad en una escala de 0 a 1. En CSS, <code>rgba(58, 123, 213, 0.5)</code> renderiza el color al 50% de opacidad. El formato hex de 8 dígitos <code>#3A7BD580</code> codifica el alfa en los dos últimos dígitos hex — <code>80</code> en hex equivale a 128 en decimal, o aproximadamente 50% de opacidad. La compatibilidad del navegador con hex de 8 dígitos es sólida en los navegadores modernos, pero puede causar problemas en bases de código de la era de IE antiguo. El formato <code>rgba()</code> es más seguro para una amplia compatibilidad.
¿Cómo encuentro el código hex de un color que veo en un sitio web?
El método más fiable son las DevTools de tu navegador. Haz clic derecho en cualquier elemento, selecciona Inspeccionar y encuentra la propiedad de color en el panel Estilos — Chrome y Firefox muestran muestras de color en las que puedes hacer clic y que muestran los valores en hex, RGB y HSL. Alternativamente, extensiones como <strong>ColorZilla</strong> te permiten usar el gotero en cualquier píxel de la pantalla. Para activos de diseño, herramientas como Figma y Adobe XD muestran los valores hex directamente en el inspector de relleno.