Sin subida, 100% local, sin cuenta

Convertidor de colores

Convierte entre HEX, RGB, HSL, HSV y CMYK. Vista previa en vivo. Verificador de contraste WCAG para accesibilidad. Nada abandona tu navegador.

Cómo funciona Convertidor de colores

El convertidor de colores traduce cualquier color entre los formatos HEX, RGB, HSL, HSV y CMYK al instante mientras escribes. También realiza una comprobación de contraste WCAG entre dos colores que elijas, mostrando la relación de contraste y el resultado de aprobación/fallo AA/AAA para texto normal, texto grande y componentes de interfaz. Todos los cálculos ocurren en el navegador sin enviar datos a ningún lugar; nada de lo que escribas sale de tu dispositivo.

Entender cómo se ve el mismo color en diferentes modelos de color es útil en los traspasos de diseño. Un diseñador puede especificar un color de marca como HEX #1A4F8C; un desarrollador CSS necesita el equivalente HSL para el sistema de temas; un equipo de impresión necesita el desglose CMYK. Esta herramienta hace la conversión en todas las direcciones a la vez para que no tengas que usar múltiples conversores separados.

Escrito por Bastien Sulyan

Cómo usar Convertidor de colores, paso a paso

  1. Escribe un valor HEX, haz clic en una muestra de color, o introduce valores RGB, HSL, HSV o CMYK en los campos correspondientes.
  2. Todas las demás representaciones de formato se actualizan inmediatamente para mostrar el color equivalente.
  3. Para ejecutar una comprobación de contraste, selecciona un color de primer plano y un color de fondo usando los dos selectores de color.
  4. Lee la relación de contraste WCAG y las insignias de aprobado/fallo para los niveles de conformidad AA y AAA.
  5. Copia cualquier valor de color usando el icono de copiar junto a cada campo.

Casos de uso comunes

  • Un diseñador de interfaz convierte un código HEX de marca a HSL para escribir una propiedad CSS personalizada en un sistema de temas.
  • Un desarrollador web comprueba la relación de contraste entre su color de texto y el fondo antes de lanzar un componente para confirmar el cumplimiento de WCAG AA.
  • Un diseñador de impresión recibe un color HEX web y necesita el equivalente CMYK para igualarlo en un folleto impreso.
  • Un desarrollador necesita el desglose RGB de un token de diseño para pasar valores de canal individuales a una función de dibujo de canvas.

Preguntas frecuentes

¿La herramienta admite valores alfa (transparencia)?

El convertidor actual trabaja con colores completamente opacos (alfa = 1). HEXA (hex de 8 dígitos) y RGBA aún no están en el alcance. Para la opacidad, establece el canal alfa en tu CSS por separado usando la notación rgba() u oklch().

¿Los colores que introduzco se almacenan o se envían a algún lugar?

No. La conversión de colores es aritmética pura (remapeo de canales y escala de rango) que se ejecuta completamente en el motor JavaScript del navegador. Nada de lo que escribas aquí llega a ningún servidor o servicio externo.

¿Qué niveles de contraste WCAG admite el verificador?

La herramienta evalúa según los criterios de éxito de WCAG 2.1: AA requiere una relación de contraste mínima de 4,5:1 para texto normal (menos de 18pt o 14pt en negrita) y 3:1 para texto grande y componentes de interfaz. AAA requiere 7:1 para texto normal y 4,5:1 para texto grande.

¿Por qué los valores CMYK difieren entre esta herramienta y el software de diseño profesional?

La conversión de RGB a CMYK que realiza esta herramienta es una fórmula matemática sin perfil de color. Las aplicaciones de diseño profesionales aplican perfiles de color ICC que tienen en cuenta la ganancia de punto de tinta y las propiedades del sustrato. Los valores CMYK aquí son útiles para aproximaciones; para impresión de producción, aplica siempre tu perfil de prensa en software dedicado.

¿Puedo convertir un nombre de color CSS como «cornflowerblue» aquí?

Los nombres de colores CSS no se escriben directamente en los campos del convertidor. Para convertir un color con nombre, primero busca su valor HEX en una referencia CSS (cornflowerblue es #6495ED) y luego pega ese HEX en el campo HEX para ver todos los demás formatos.

¿La herramienta funciona sin conexión después de que la página ha cargado?

Sí. La conversión de colores es aritmética sin dependencia externa. Una vez que la página está en la caché de tu navegador, puedes abrirla sin conexión de red y todas las conversiones funcionarán normalmente.

Herramientas relacionadas

Mantén todo en local, explora herramientas complementarias.

Todas las herramientas de desarrollo