Todo diseñador y desarrollador se topa con estos obstáculos al cambiar de formato de color.
Las herramientas de diseño exportan en HEX, CSS espera HSL y la impresión exige CMYK. Sin un convertidor de color fiable terminas adivinando o saltando de página en página, perdiendo un tiempo valioso.
Convertir RGB a HSL a mano requiere trigonometría. Un solo error tipográfico en la fórmula hace que tu tono gire 180°. Color Math realiza todos los cálculos al instante y sin errores.
La mayoría de los selectores de color ignoran los requisitos de contraste de WCAG 2.1. Color Math muestra los ratios de contraste al momento para que la accesibilidad quede integrada desde el primer clic.
Vista previa del color
#3B82F6
rgb(59, 130, 246)
Current
Complementario
Análogo
Triádico
Haz clic en un tono para cargarlo
White text on color
Black text on color
Los colores guardados aparecerán aquí
Un único convertidor de color para todos los sistemas. Color Math reemplaza varias herramientas de una sola vez.
Edita cualquier campo — HEX, RGB, HSL o CMYK — y Color Math recalcula instantáneamente todos los demás formatos. No es necesario confirmar.
Arrastra los deslizadores R, G, B, H, S, L, C, M, Y, K y ve cómo todos los formatos se actualizan en vivo. Ideal para afinar tonos sin tocar el teclado.
Color Math genera paletas complementarias, análogas y triádicas desde tu color. Haz clic en cualquier tono para cargarlo de inmediato.
Comprueba de un vistazo los ratios de contraste sobre fondo blanco y negro. Color Math muestra AA, AAA o Reprobado para un diseño accesible por defecto.
Cada color guardado persiste en tu navegador entre sesiones. Color Math conserva hasta 10 colores recientes para revisarlos y compararlos en cualquier momento.
Todos los cálculos de Color Math se ejecutan completamente en tu navegador. No se transmiten datos, no se requiere cuenta — tus colores son solo tuyos.
Desde conectar diseño y código hasta impresión y accesibilidad — Color Math se adapta a cada paso de tu flujo de trabajo con colores.
¿Tomaste un HEX de Figma? Pégalo en Color Math y obtén al instante el equivalente HSL para tus propiedades personalizadas CSS. Ajusta la luminosidad para crear estados hover y focus sin volver a abrir el archivo de diseño.
Color Math convierte tu RGB de pantalla en valores CMYK teóricos para detectar rojos y naranjas fuera de gama antes de enviar el archivo a la imprenta. Anticipa sorpresas desagradables sin costes adicionales.
Color Math calcula los ratios de contraste WCAG 2.1 respecto al blanco y al negro en tiempo real. Sabe al instante si tu color de texto cumple los niveles AA o AAA — sin herramienta adicional.
Tres pasos para convertir, explorar y guardar cualquier color.
Escribe un código HEX (las abreviaciones como #f00 se expanden automáticamente) o arrastra un deslizador para comenzar. Color Math acepta entradas HEX, RGB, HSL y CMYK simultáneamente.
Cambia entre las pestañas RGB, HSL y CMYK para ajustar con los deslizadores. Desplázate hasta el panel de Paleta para ver los colores complementarios, análogos y triádicos que genera Color Math.
Haz clic en el botón Copiar para obtener el formato deseado. Pulsa Guardar para añadir el tono actual al historial. Color Math conserva hasta 10 colores entre sesiones.
Respuestas a las preguntas más habituales sobre Color Math y la conversión de colores.
Color Math es un convertidor de color gratuito y basado en navegador que transforma códigos HEX, RGB, HSL y CMYK en tiempo real. También genera paletas de color (complementario, análogo, triádico) y calcula ratios de contraste WCAG 2.1 — todo sin peticiones al servidor.
Color Math usa una fórmula matemática estándar (RGB → CMYK) que proporciona una buena estimación teórica. Sin embargo, la salida impresa real depende de tu impresora, tintas, papel y perfil ICC. Usa Color Math como referencia, no como sustituto de la gestión profesional del color de impresión.
WCAG 2.1 define ratios mínimos de contraste para la legibilidad del texto. AA exige 4,5:1 para texto normal y 3:1 para texto grande. AAA exige 7:1 para texto normal. Color Math calcula estos ratios respecto al blanco puro y al negro puro para ayudarte a elegir el fondo adecuado.
HSL (Tono, Saturación, Luminosidad) se corresponde mejor con la forma en que CSS define los colores y con cómo los diseñadores piensan en tintes y sombras. Una Luminosidad del 50 % en HSL da la versión más pura de un tono, lo que facilita generar variantes más claras o más oscuras ajustando un único valor.
Color Math guarda tus colores únicamente en el localStorage de tu navegador — nunca en un servidor. El historial es local a tu dispositivo y perfil de navegador. Borrar los datos del navegador eliminará este historial.
Color Math calcula los colores de la paleta mediante la teoría del color HSL. Los colores complementarios están a 180° en la rueda de color. Los análogos están a ±30°. Los triádicos están a +120° y +240°. La saturación y la luminosidad se mantienen iguales a las del color de origen para una paleta visualmente coherente.
Sí. Color Math es completamente responsivo. Los deslizadores, los campos de entrada y la cuadrícula de paletas se adaptan a pantallas pequeñas. Todos los cálculos son locales, por lo que no hay latencia en redes móviles.
Sin registro. Funciona sin conexión tras la primera carga.
