Conversor de colores CSS
Convierte cualquier color CSS entre HEX, RGB y HSL con vista previa en vivo y ratios de contraste frente a texto blanco y negro.
Entrada
Conversiones
Por qué importan los formatos de color
Un mismo color se puede escribir de varias formas en CSS. Las herramientas de diseño suelen entregar códigos HEX. RGB es práctico cuando necesitas transparencia con rgb() o rgba(). HSL describe un color por su tono, saturación y luminosidad, lo que facilita crear tonos más claros y más oscuros de un color de marca. Convertir entre ellos sin errores mantiene coherentes tus tokens de diseño.
Cómo usar el conversor
Pega un valor HEX, RGB o HSL, o elige un color con el selector. La herramienta muestra el color en los tres formatos con una vista previa, y puedes copiar cualquiera de ellos con un clic. También muestra la relación de contraste con texto blanco y negro, usando la fórmula WCAG 2, para que veas de un vistazo qué color de texto se lee bien sobre él.
Cómo leer las insignias de contraste
- AAA: una relación de 7:1 o más, el nivel más estricto para texto normal.
- AA: 4.5:1 o más, el objetivo habitual para el texto de cuerpo.
- AA solo texto grande: 3:1 o más, válido para títulos grandes pero no para el texto de cuerpo.
Preguntas frecuentes
¿Debo usar HEX o HSL en mi CSS?
Ambos funcionan en todos los navegadores modernos. HEX es compacto para valores fijos. HSL es más cómodo cuando quieres ajustar la luminosidad o la saturación, por ejemplo para crear estados al pasar el cursor o una paleta de matices.
¿Por qué al convertir de ida y vuelta un valor cambia ligeramente?
Aquí los valores HSL se redondean a números enteros, así que una conversión de ida y vuelta puede desplazar un canal en un paso. La diferencia no se nota, pero usa el valor HEX o RGB como referencia principal.
¿La herramienta admite transparencia?
Lee valores rgba() y hsla(), pero ignora el canal alfa, ya que aquí el contraste y la conversión a HEX son para colores sólidos.