En este artículo
Formatos de color explicados
Los colores en el diseño digital y el desarrollo web se representan en múltiples formatos que se adaptan a diferentes contextos. HEX (#ff5733) es conciso y universal para la web. RGB (255, 87, 51) es intuitivo para mezclar colores. HSL (14°, 100%, 60%) es el más legible para ajustar el tono, la saturación y la luminosidad.
Las diferentes herramientas usan distintos formatos de color: el software de diseño suele preferir HSL, HTML/CSS utiliza HEX y RGB, las bibliotecas de colores de JavaScript pueden usar varios formatos y el diseño para impresión usa CMYK. La conversión precisa entre ellos requiere fórmulas matemáticas.
Cómo funciona la conversión de colores
El convertidor aplica transformaciones matemáticas precisas entre los espacios de color.
- Análisis de HEX — decodifica códigos hexadecimales de 3 y 6 dígitos, con o sin canal alfa
- Normalización de RGB — gestiona valores enteros de 0 a 255 y representaciones flotantes de 0 a 1
- Cálculo de HSL — convierte hacia y desde el tono (0-360°), la saturación (0-100%) y la luminosidad (0-100%)
Pruébalo gratis — sin registro
Convertir un color →Cuándo usar la conversión de colores
La conversión de colores es necesaria siempre que los colores se muevan entre diferentes herramientas, formatos o contextos.
- De diseño a código — convierte los valores de color HSL de Figma/Sketch a HEX para la implementación en CSS
- Coherencia de marca — verifica que los valores de color coincidan entre diferentes herramientas de diseño e implementaciones de código
- Accesibilidad — calcula las relaciones de contraste (que usan la luminancia relativa de los valores RGB) para el cumplimiento de WCAG
Preguntas frecuentes
¿Cuál es la diferencia entre RGB y RGBA?
RGBA añade un canal alfa a RGB, que representa la opacidad de 0 (completamente transparente) a 1 (completamente opaco), o de 0 a 255 en algunos contextos. De forma similar, HEXA añade dos dígitos hexadecimales para el alfa (p. ej., #FF5733FF para completamente opaco o #FF573380 para 50% de opacidad). Los valores alfa permiten colores transparentes y semitransparentes.
¿Por qué convertir un color de ida y vuelta no siempre devuelve exactamente el mismo valor?
La conversión entre espacios de color implica aritmética de punto flotante y redondeo. Las conversiones de ida y vuelta (RGB → HSL → RGB) pueden tener pequeños errores de redondeo en el último dígito. Esto es normal y la diferencia es imperceptible para el ojo humano. Para trabajo de precisión crítica, almacena siempre los colores en un único formato canónico.
¿Cuál es la diferencia entre HSL y HSV/HSB?
HSL (Tono, Saturación, Luminosidad) y HSV/HSB (Tono, Saturación, Valor/Brillo) son modelos de color cilíndricos diferentes. En HSL, el blanco puro es L=100% independientemente de la saturación; en HSV, el blanco puro es S=0%, V=100%. HSL es más intuitivo para el diseño web; HSV se usa habitualmente en los controles de selector de color de las interfaces de usuario.