Convertidor de colores

Un color, todos los formatos

Las herramientas de diseño, CSS, los manuales de marca y las librerías de código describen los colores de maneras distintas. Un diseñador te pasa #8997BB, una librería de gráficos pide rgb(137, 151, 187) y tú quieres un valor HSL para crear un tono más claro. Este convertidor acepta un color en cualquier formato común y lo muestra en todos los demás.

Los formatos admitidos son HEX (#8997BB), HEX con alfa (#8997BBCC), RGB, RGBA, HSL, HSLA y HSV. Pega uno y copia la versión que necesites.

Guía rápida: HEX y RGB describen las cantidades de luz roja, verde y azul. HSL describe el tono (la posición en el círculo cromático, de 0 a 360°), la saturación y la luminosidad, lo que facilita crear tonos más claros y más oscuros. HSV (también llamado HSB) es el que usan muchos selectores de color de las apps de diseño. Las versiones con "A" agregan un canal alfa para la transparencia.

Cómo usar el convertidor de colores

1. Ingresa un color en cualquier formato admitido, por ejemplo #8997BB, rgb(137,151,187) o hsl(223, 27%, 63%).
2. Envía para convertir.
3. Copia de los resultados el formato que necesites.
4. Pégalo en tu CSS, archivo de diseño o código.

Usos comunes

• Pasar los colores de un manual de marca a valores CSS.
• Obtener valores RGBA o HSLA para dar transparencia a una capa o una sombra.
• Usar HSL para crear variantes más claras y más oscuras de un color de marca para los estados hover.
• Igualar colores entre apps como Figma, Photoshop, Canva y el código.
• Comprobar que dos valores de fuentes distintas son realmente el mismo color.

Consejos y cosas que conviene saber

• El HEX de tres dígitos es una abreviatura: #ABC es lo mismo que #AABBCC.
• En el HEX de ocho dígitos, los dos últimos son el alfa: FF es totalmente opaco y 00 totalmente transparente; 80 es alrededor del 50 %.
• HSL y HSV no son lo mismo aunque los dos usen tono y saturación. Usa el que corresponda a la herramienta donde vas a pegarlo.
• Revisa la legibilidad: el texto necesita suficiente contraste con el fondo (las WCAG recomiendan al menos 4,5:1 para texto normal).
• Para elegir un color de forma visual, usa el selector de color. Para una conversión concreta, prueba HEX a RGB o RGB a HEX.

Preguntas frecuentes

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

Un código HEX es un número hexadecimal de seis dígitos precedido por #. Cada par de dígitos define el rojo, el verde y el azul, de 00 (nada) a FF (máximo), así que #FF0000 es rojo puro.

¿Cuál es la diferencia entre RGB y RGBA?

RGBA agrega un cuarto valor, el alfa, de 0 (transparente) a 1 (opaco). rgba(0, 0, 0, 0.5) es negro al 50 % de opacidad.

¿Por qué usar HSL en lugar de HEX?

HSL es más fácil de ajustar para las personas. Si cambias solo la luminosidad, obtienes versiones más claras o más oscuras del mismo tono, algo práctico para armar paletas de colores.

¿HSV y HSB son lo mismo?

Sí. HSB (tono, saturación, brillo) es otro nombre de HSV (tono, saturación, valor).

¿CSS admite todos estos formatos?

Los navegadores modernos admiten HEX, HEX con alfa, rgb(), rgba(), hsl() y hsla() directamente en CSS. HSV no es un formato de CSS, así que conviértelo primero.

Herramientas relacionadas

• Selector de color: La forma más fácil de elegir un color de la rueda de colores y obtener el resultado en cualquier formato.
• HEX a RGB: Convierte fácilmente colores HEX a RGB con este conversor.
• RGB a HEX: Convierte fácilmente colores RGB a HEX con este conversor.
• Optimizador de imágenes: Comprime y optimiza imágenes para que pesen menos sin perder calidad.
• Convertidor hexadecimal: Convierte texto a hexadecimal y viceversa.