Tools mentioned in this article
Open the browser-based tool while you read and try the workflow immediately.
El mismo color aparece en varios formatos
Las herramientas de diseño, los archivos CSS y la documentación pueden usar HEX, RGB o HSL para el mismo color. Convertir entre ellos ayuda en la entrega del diseño, la implementación frontend y la revisión de accesibilidad.
El Conversor de color y comprobador de contraste convierte formatos de color y ayuda a comparar colores de primer plano y de fondo.
Ejemplo: comprobar el color del texto de un botón
Supón que usas el color de marca #2563eb como fondo de un botón y quieres texto blanco.
.primary-button {
background: #2563eb;
color: #ffffff;
}Introduce el primer plano #ffffff y el fondo #2563eb en la herramienta para comprobar la relación de contraste antes de implementar. Si es legible, adelante; si es baja, oscurece el fondo, cambia el color del texto o revisa el tamaño o el grosor del botón. El mismo azul aclarado —por ejemplo #60a5fa— puede volverse difícil de leer con texto blanco, así que verifica con los números, no por impresión.
Comprueba la legibilidad, no solo el estilo
Un par de colores puede resultar atractivo y aun así ser difícil de leer en pantallas móviles, monitores brillantes o de baja calidad. Comprueba el contraste antes de publicar botones, etiquetas, enlaces, alertas y estados de navegación.
Si preparas recursos de lanzamiento, usa el Generador de favicons tras fijar los colores de marca para que los iconos sean coherentes con la interfaz.
HSL es útil para las variaciones
HSL facilita ajustar la luminosidad y la saturación para estados hover, bordes, fondos sutiles y estados deshabilitados. Convierte un valor HEX a HSL, ajústalo y usa el resultado en CSS.
.primary-button:hover {
background: hsl(221 83% 45%);
}
.primary-button-subtle {
background: hsl(221 83% 96%);
color: hsl(221 83% 32%);
}Oscurecer un poco para el hover, subir la luminosidad para un fondo pálido o intensificar solo el color del texto es más fácil de razonar —y de explicar en una revisión— cuando mantienes los colores en HSL.
Resumen
La conversión de color y la comprobación de contraste van juntas. Convertir formatos ayuda a la implementación, mientras que las comprobaciones de contraste garantizan que la interfaz final siga siendo legible y usable.
Preguntas frecuentes
¿Qué relación de contraste necesito?
Las directrices de accesibilidad WCAG recomiendan una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande (aprox. 18pt, o 14pt en negrita). Los elementos interactivos como botones y enlaces también importan para la legibilidad, así que comprueba los números con el Conversor de color y comprobador de contraste antes de implementar.
¿Cuándo debo usar HEX, RGB o HSL?
HEX (#2563eb) es conciso y estándar en herramientas de diseño y código. RGB es útil cuando necesitas alfa (rgba). HSL permite ajustar tono, saturación y luminosidad de forma intuitiva, ideal para crear variaciones del mismo color: más oscuro para hover, más pálido para fondos.
¿El mismo color se ve diferente según el formato?
El color en sí es idéntico, pero HSL hace intuitivos ajustes como “bajar la luminosidad un 5%”. La clave es garantizar la legibilidad con un número de relación de contraste en lugar de decidir solo por impresión.