Conversor de Colores
Convierte colores entre HEX, RGB, HSL y CMYK al instante. Selector de color gratuito online con comprobador de contraste WCAG y generador de paletas.
Actualizado abril de 2026
Revisado por Rafael Duarte
Active Preview
#197FE6
Complementary Colors
Format Conversions
Tip: Click a complementary color swatch to use it. Press Shift+Enter to copy the HEX value.
Cómo convertir colores online
Un valor, cuatro formatos al instante — más un comprobador de contraste
1. Elige o escribe un color
Usa el selector nativo o escribe un código hexadecimal de 6 dígitos como `#3A86FF` directamente en el campo.
2. Copia el formato que necesites
HEX, RGB, HSL y CMYK se actualizan al instante — haz clic en el ícono de copiar junto a cada uno.
3. Guarda tu paleta y expórtala
"Save to Palette" guarda cada color que agregues; "Export Palette" descarga un archivo CSS con las variables ya listas para usar.
Qué hace este conversor de colores
Conversión precisa entre HEX, RGB, HSL y CMYK
Comprobador de contraste WCAG integrado
Compara automáticamente tu color con blanco e indica si cumple el nivel AA (4,5:1) y el AAA (7:1).
Colores complementarios con un clic
Explora armonías a partir de cuatro muestras generadas a +90°, +150°, +180° y +270° desde el matiz base.
Exportación como variables CSS
Reúne varios colores en una paleta y descarga un archivo CSS con custom properties listo para pegar en tu proyecto.
Precisión matemática, sin redondeos manuales
Usa las mismas fórmulas que aplican los navegadores por dentro, evitando los pequeños errores de redondeo típicos de convertir a mano.
Atajo de teclado para copiar
Presiona Shift+Enter en cualquier parte de la página para copiar el HEX activo sin tocar ningún botón.
Formatos de color explicados
Qué significa cada notación y dónde se usa
Cuándo vas a necesitar esta herramienta
Los escenarios más comunes entre quienes la usan
Entrega de diseño a desarrollo
Los diseñadores especifican colores en HEX; los desarrolladores suelen necesitar RGB para funciones color() o HSL para temas dinámicos y estados hover.
Auditorías de accesibilidad
Comprueba en segundos si el color primario de una marca pasa el contraste mínimo AA antes de usarlo en un botón o un titular.
Preparar archivos para imprenta
Convierte colores de pantalla a CMYK antes de enviar logos o folletos a una imprenta, para evitar sorpresas de tono en el resultado final.
Construir un sistema de diseño
Guarda cada color de marca en una paleta y expórtalos todos juntos como variables CSS en una sola descarga.
Errores comunes
Creer que el RGB de pantalla es igual al CMYK impreso
Algunos azules y verdes muy vivos en pantalla quedan fuera de la gama imprimible — revisa una prueba física antes de aprobar el color final.
Malinterpretar la luminosidad al 50% en HSL
50% de luminosidad es el color puro; por encima aclara hacia blanco, por debajo oscurece hacia negro — no es el mismo eje que el brillo en HSV.
Olvidar el `#` al pegar un código hex
El campo acepta el valor con o sin el prefijo, pero mantén el hábito: otras herramientas y el propio CSS sí lo exigen.
Pegar un hex abreviado de 3 dígitos
Códigos como #FFF no son reconocidos por el campo, que exige los 6 dígitos completos. Duplica cada par antes de pegarlo: #FFF se convierte en #FFFFFF.
Aprobar un color solo por cómo se ve a simple vista
Un color puede parecer suficientemente oscuro y aun así no pasar el contraste mínimo AA. Confía en el cálculo de las etiquetas WCAG antes de aprobarlo para producción, no en la percepción visual.
Por qué usar este conversor de colores
Muestra HEX, RGB, HSL y CMYK al mismo tiempo, así que no hace falta saltar entre cuatro conversores distintos para conseguir cada valor que necesitas.
El comprobador de contraste WCAG integrado ahorra un paso: ya sabes si el color funciona para texto antes de salir de la pantalla de conversión.
Todo corre en el navegador — sin registro, sin instalar nada y sin enviar tu color a ningún servidor externo. Es la forma más rápida de revisar un color de marca sin abrir un editor de imágenes pesado.
Preguntas frecuentes
Escribe o pega un código hex de 6 dígitos y la herramienta muestra el equivalente RGB al instante, sin necesidad de calcularlo a mano. Por ejemplo, #FF8000 se convierte en rgb(255, 128, 0) — cada par de dígitos hex corresponde a los canales rojo, verde y azul.
Referencias
Referencia completa de todos los formatos de color disponibles en CSS.
Guía oficial del W3C sobre las razones de contraste mínimas exigidas.
La especificación formal que cubre todos los modelos de color de los navegadores modernos.
Herramientas relacionadas
- Verificador de Contraste de Colores Diseño Verificador de contraste de colores gratuito — verifica conformidad WCAG 2.2 AA y AAA al instante. Vista previa en vivo, simulación de daltonismo y...
- Generador de Paleta de Colores Diseño Genera paletas de colores armoniosas desde cualquier color base. Elige armonía Análoga, Complementaria, Triádica o Tetrádica — exporta como CSS variables o...
- Paleta de Colores desde Imagen Diseño Extrae paletas de colores de cualquier imagen — obtén códigos HEX, RGB, HSL y exporta como CSS variables, Tailwind, JSON o PNG. 100% en el navegador, sin...
- Generador CSS Box Shadow — Neumorfismo, Glassmorfismo y Tailwind Diseño Generador CSS box shadow gratuito con vista previa en tiempo real. Crea sombras, efectos neumorfismo y glassmorfismo. Exporta a CSS, Tailwind o variables CSS.
- Generador CSS Flexbox Diseño Generador CSS Flexbox gratis: vista previa en tiempo real, CSS y Tailwind simultáneos, 10 layouts predefinidos, avisos contextuales y exportación React/JSX. Sin registro.
