Convertir colores
Introduce un color en cualquier formato (HEX, RGB, HSL, HSB) y obtén automáticamente sus equivalentes en todos los demás. Previsualiza el color y copia cada valor con un clic.
Los 4 espacios de color y sus usos
HEX es el estándar histórico de CSS y HTML: 6 dígitos hexadecimales que compactan los tres canales RGB. RGB es el espacio nativo de pantallas y la Canvas API; también es el que usa JavaScript para manipular píxeles. HSL (Hue, Saturation, Lightness) es preferido en CSS moderno porque ajustar la luminosidad o saturación es intuitivo para crear variaciones de un mismo color. HSB (Hue, Saturation, Brightness) es el espacio de color que usan Figma, Adobe Photoshop e Illustrator para el selector visual, lo que lo convierte en el punto de partida habitual al trabajar con diseñadores.
Paletas de marca para proyectos en LATAM
Las agencias y freelancers de diseño web en México, Colombia, Argentina y Chile trabajan habitualmente con clientes que entregan su identidad visual en diferentes formatos: manuales de marca en PDF con valores CMYK, capturas de Photoshop con colores HSB, o simplemente el color de su logo en un PNG. Esta herramienta convierte cualquier formato a HEX o RGB para usar directamente como variables CSS, tokens de diseño en Figma o clases personalizadas en Tailwind CSS. También es útil para verificar contraste de accesibilidad (WCAG) antes de entregar un proyecto.
Otras herramientas
Preguntas frecuentes
- ¿Qué formatos de color admite la herramienta?
- Puedes introducir colores en HEX (hexadecimal, ej: #FF5733), RGB (ej: 255, 87, 51), HSL (ej: 11, 100%, 60%) y HSB/HSV. La herramienta convierte automáticamente a los cuatro formatos al instante mientras escribes, y muestra un swatch de previsualización con el color resultante.
- ¿Cuál es la diferencia entre HSL y HSB?
- HSL (Hue, Saturation, Lightness) y HSB/HSV (Hue, Saturation, Brightness/Value) son dos formas diferentes de describir el mismo espacio de color. En HSL el blanco puro es L=100% con cualquier saturación; en HSB el blanco puro es S=0%, B=100%. HSB es más intuitivo en herramientas de diseño (Figma, Photoshop), mientras que HSL es más común en CSS moderno.
- ¿Puedo copiar cada formato con un clic?
- Sí. Cada tarjeta de formato tiene un botón de copiar que guarda el valor en el portapapeles con la notación completa (ej: rgb(255, 87, 51) o hsl(11, 100%, 60%)). El valor se copia exactamente como aparece, listo para pegar en un editor de código, Figma o una hoja de estilos CSS.
- ¿Hay un selector de color visual?
- Sí. En el campo HEX hay un selector de color nativo del navegador (color picker) que te permite elegir visualmente cualquier color del espectro. El swatch de previsualización a ancho completo muestra siempre el color actual actualizado en tiempo real.
- ¿La conversión es exacta o hay pérdida de precisión?
- Las conversiones entre HEX y RGB son exactas (son representaciones equivalentes del mismo espacio sRGB). Las conversiones a HSL y HSB implican aritmética de punto flotante y pueden tener variaciones de ±1 en el último decimal debido al redondeo. Para uso en diseño y desarrollo esto es completamente irrelevante.
- ¿Cuál es el formato de color preferido para CSS moderno?
- CSS moderno (CSS Color Level 4) admite todos los formatos, pero HSL es el preferido para definir paletas de diseño porque es más intuitivo ajustar: incrementar L% aclara el color, reducir S% lo desatura. El formato oklch() es el más nuevo y recomendado por Google, aunque todavía requiere fallback. Para compatibilidad amplia con todos los navegadores, HEX sigue siendo el estándar más seguro.
- ¿Cómo uso los colores de marca en proyectos web para clientes de México, Colombia o Argentina?
- Al trabajar con clientes latinoamericanos que tienen un manual de marca con colores en CMYK (para impresión) o HSB (de Photoshop/Illustrator), esta herramienta permite convertirlos al HEX o RGB necesarios para implementar en código CSS, Tailwind, Figma o WordPress. Muchas agencias digitales en LATAM reciben los colores de marca en un formato y necesitan usarlos en otro; la conversión instantánea evita errores manuales que cambiarían el color de la marca.