Conversor de Colores — HEX, RGB y HSL
Convierte colores entre formatos HEX, RGB y HSL con vista previa del color en vivo. Imprescindible para diseñadores y desarrolladores front-end.
Cómo Convertir Códigos de Color
- 1Introduce un código de color HEX (p.ej. #6366f1) en el campo HEX
- 2Los valores RGB y HSL se actualizan automáticamente
- 3También puedes introducir valores RGB o HSL directamente
- 4Copia cualquier formato con el botón de copiar
Ventajas
- Conversión bidireccional entre los tres formatos
- Vista previa del color en vivo
- Copia cualquier formato con un clic
- Actualización instantánea mientras escribes
Preguntas Frecuentes
¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX (#RRGGBB) codifica cada canal de color como dos dígitos hexadecimales: compacto y el formato más habitual en herramientas de diseño, guías de estilo y CSS. RGB (rojo, verde, azul) usa valores decimales de 0 a 255 por canal, más fácil de razonar al mezclar colores por código. HSL (tono, saturación, luminosidad) describe el color por sus propiedades percibidas: el tono como un ángulo de 0 a 360° en la rueda de color, la saturación como intensidad y la luminosidad de negro a blanco. HSL facilita la creación de variantes relacionadas ajustando un solo eje.
¿Por qué es útil HSL para diseñadores y sistemas de diseño?
HSL te permite crear tintes, sombras y variantes apagadas de un color cambiando únicamente el valor L o S mientras mantienes el tono constante. Por ejemplo, hsl(230, 70%, 50%) y hsl(230, 70%, 85%) pertenecen visualmente a la misma familia de color, uno más oscuro y otro más claro, que es exactamente cómo se construyen los tokens de diseño y las paletas de colores accesibles. Es mucho más difícil lograr esa intuición solo con valores HEX.
¿Qué es el formato RGBA y cómo se relaciona con esta herramienta?
RGBA añade un cuarto canal alfa (0-1) para la transparencia, como en rgba(99, 102, 241, 0.5) para una opacidad del 50%. Esta herramienta convierte entre los tres formatos opacos (HEX, RGB, HSL). Para compatibilidad con alfa, usa directamente la notación rgba() o hsla() de CSS, o la forma hexadecimal de 8 dígitos #RRGGBBAA.
¿Qué formato de color debo usar en CSS?
Los tres funcionan en CSS y producen resultados idénticos. HEX es el más compacto y el más usado para valores estáticos en hojas de estilos. RGB es conveniente cuando necesitas transparencia (rgba()). HSL destaca en sistemas de diseño y bibliotecas de componentes donde quieres derivar variantes más claras o más oscuras ajustando el valor L en lugar de calcular un nuevo código hex. Elige el formato que haga más clara la intención en tu código.
¿Cómo afecta la elección de color a la accesibilidad?
El formato de color que uses no afecta a la accesibilidad: HEX y RGB para el mismo color tienen ratios de contraste idénticos. Lo que importa es la diferencia de luminancia entre primer plano y fondo. WCAG 2.1 recomienda un ratio de contraste mínimo de 4,5:1 para texto normal y 3:1 para texto grande. Si estás auditando colores, convertir a RGB es un paso útil ya que los verificadores de contraste trabajan con valores RGB.
¿Por qué algunas herramientas usan códigos HEX de 3 dígitos como #fff?
#fff es la abreviatura de #ffffff. Cuando los dos dígitos hexadecimales de cada par RGB son idénticos —como ff, cc o 00— puedes abreviar cada par a un solo dígito. Así, #aabbcc se convierte en #abc y #ffffff en #fff. Es CSS válido y produce exactamente el mismo color. No todos los colores pueden abreviarse: solo aquellos en los que cada par tiene dígitos coincidentes.