Convertidor de Colores
Convierta y visualice colores al instante.
Opciones Avanzadas
Nuestro Convertidor de Colores gratuito ayuda a los diseñadores a convertir rápidamente.
Ahorre tiempo y reduzca errores.
Funciones Avanzadas
- Conversión por lotes
- Vista previa de degradado CSS
- Soporte de opacidad
- Comprobación de contraste
- Sugerencias de armonía cromática
Por qué es importante la conversión de color
Un color preciso asegura diseños accesibles.
FAQ — Convertidor de Colores
Frequently Asked Questions
Cómo utilizar el conversor de color
-
Introduzca su valor de color
Escriba o pegue cualquier valor de color: HEX (#3b82f6), RGB (59, 130, 246), HSL (217, 91%, 60%) o CMYK. La herramienta detecta automáticamente el formato. -
Ver todas las conversiones al instante
Todos los formatos equivalentes se actualizan en tiempo real: HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK y propiedad personalizada CSS. Copia cualquier valor con un solo clic. -
Utilizar el selector de color
Haga clic en la muestra de color o utilice el selector de color nativo del navegador para elegir visualmente un color y obtener todos sus equivalentes de formato a la vez. -
Copie y utilice en su proyecto
Haz clic en el botón de copia de cualquier formato para enviarlo al portapapeles. Pega directamente en CSS, Sass, Tailwind config, Figma o flujos de trabajo de impresión.
Ejemplos de conversión
El mismo color azul expresado en todos los formatos admitidos:
| Formato | Valor | Uso |
|---|---|---|
| HEX | #3b82f6 | CSS, HTML, Figma |
| RGB | rgb(59, 130, 246) | CSS, Canvas API |
| RGBA | rgba(59, 130, 246, 1) | CSS con opacidad |
| HSL | hsl(217, 91%, 60%) | CSS, tokens de diseño |
| CMYK | C:76 M:47 Y:0 K:4 | Imprimir / offset |
| HSV | 217°, 76%, 96% | Editores de imágenes |
Casos de uso común
Diseño web y de interfaz de usuario
Convierte los colores HEX de la marca a HSL para las propiedades personalizadas de CSS y la configuración de Tailwind, garantizando una tematización coherente en los modos claro y oscuro.
Impresión y preimpresión
Convierta los colores RGB o HEX de la pantalla a CMYK para la producción impresa, evitando así el problema habitual de los colores que quedan muy bien en pantalla pero se imprimen apagados.
Directrices de marca
Documente una paleta de marca completa en todos los formatos -HEX para digital, CMYK para impresión, referencia Pantone- desde una única fuente de verdad.
Comprobaciones de accesibilidad
Recupere los valores exactos de color para probarlos en un comprobador de contraste, asegurándose de que las combinaciones de texto y fondo cumplen los requisitos WCAG AA o AAA.
Flujos de trabajo para desarrolladores
Convierta rápidamente los colores de la herramienta de diseño (Figma HEX) en variables CSS HSL para una tematización dinámica y una manipulación programática del color.
Cómo funciona
Todas las conversiones se ejecutan instantáneamente en su navegador sin intervención del servidor.
La herramienta analiza los datos de entrada en valores RGB normalizados (0-255 por canal) y, a continuación, aplica fórmulas de conversión estándar a cada formato de destino.
HSL (Tono, Saturación, Luminosidad) se obtiene a partir de RGB encontrando el canal mínimo/máximo, calculando la luminosidad como su media y, a continuación, calculando la saturación y el ángulo del tono.
CMYK se calcula a partir de RGB mediante la fórmula: K = 1 - max(R,G,B); C = (1-R-K)/(1-K); etc. Tenga en cuenta que RGB→CMYK depende del dispositivo: CMYK en pantalla es una aproximación, no un perfil de prensa.
A quién va dirigida esta herramienta
Desarrolladores frontales
Traduzca tokens de diseño entre formatos CSS y verifique rápidamente los valores de color durante el desarrollo.
Diseñadores UI/UX
Convierte las muestras de Figma o Sketch a cualquier formato que necesite tu sistema de diseño o framework CSS.
Diseñadores de impresión
Convierta los colores de marca RGB a CMYK antes de enviar el material gráfico a la imprenta, evitando sorpresas de cambio de color.
Responsables de marca
Mantenga una única paleta de marca en todos los formatos -digital e impreso- sin cambiar de herramienta.
Comprobadores de accesibilidad
Extraiga valores de color precisos para utilizarlos en comprobadores de contraste y auditorías de accesibilidad.
Consejos para trabajar con colores
- Utiliza HSL en las propiedades personalizadas de CSS (--color-primario: hsl(217, 91%, 60%)) para poder ajustar la luminosidad con calc() para los estados hover y desactivado.
- Solicite siempre una prueba de imprenta cuando utilice conversiones CMYK a partir de RGB: la correspondencia de colores de serigrafía a imprenta requiere un perfil de color de dispositivo.
- Utilice el selector de color del navegador para tomar muestras de colores directamente de capturas de pantalla o activos de diseño, sin necesidad de copiar valores manualmente.
- Tras la conversión, pruebe los colores en un comprobador de contraste para confirmar que la paleta cumple la norma WCAG AA (4,5:1) para el cuerpo del texto.
- Guarde su paleta de marcas en todos los formatos (HEX, RGB, CMYK) en la documentación de su sistema de diseño para eliminar las conversiones repetidas.
Por qué es importante una conversión de color precisa
- Los valores de color incoherentes entre los equipos de diseño y desarrollo son una de las principales causas de incoherencia visual en los productos enviados.
- RGB y CMYK ocupan gamas diferentes: los colores que parecen vibrantes en la pantalla pueden aparecer confusos en la impresión sin una conversión adecuada.
- CSS HSL hace que la tematización dinámica (modo claro/oscuro, tintes) sea mucho más fácil que HEX - pero requiere una conversión precisa de HEX a HSL para empezar.
- Las auditorías de conformidad de las marcas requieren colores en múltiples formatos: un único conversor elimina los errores manuales y ahorra horas de idas y venidas.
Rendimiento y privacidad
Cada conversión de color se ejecuta completamente dentro de su navegador utilizando JavaScript. Ningún valor de color, paleta o dato de uso se envía a ningún servidor. La herramienta responde en menos de 10 ms por conversión, funciona sin conexión después de la primera visita, y no requiere cuenta o registro.
Nota educativa: Explicación de los espacios de color
RGB (Aditivo)
RGB mezcla luz roja, verde y azul. Todos los canales a 255 = blanco; todos a 0 = negro. Se utiliza en pantallas, cámaras y navegadores web.
HEX (abreviatura web)
HEX es RGB codificado en base-16. #3b82f6 = R:59, G:130, B:246. Es idéntico a RGB - sólo una notación más compacta para CSS y HTML.
HSL (perceptual)
HSL separa el tono (ángulo de la rueda de color 0-360°), la saturación (intensidad) y la luminosidad (brillo). Para los diseñadores, es más fácil de entender que el RGB.
CMYK (sustractivo)
CMYK mezcla tinta cian, magenta, amarilla y clave (negro). Resta del papel blanco. Screen RGB tiene una gama más amplia: algunos colores RGB brillantes no pueden reproducirse en CMYK.
Solución de problemas
¿Sabías que...?
La notación de colores HEX se introdujo en HTML en 1996 con la especificación HTML 3.2. Antes de eso, los navegadores sólo reconocían 16 colores con nombre (como rojo y azul). Antes, los navegadores sólo reconocían 16 colores con nombre (como "rojo" y "azul"). La paleta de colores web se amplió a 140 colores con CSS1, pero HEX siguió siendo el formato dominante, y lo sigue siendo más de 25 años después.
El único conversor de color que necesita
Tanto si eres un desarrollador que traduce tokens Figma a CSS, un diseñador que tiende puentes entre la pantalla y la impresión, o un comprobador de accesibilidad que verifica las relaciones de contraste, esta herramienta gratuita convierte entre los principales formatos de color al instante, sin llamadas al servidor y sin almacenar datos. Introduzca su color, copie el formato que necesita y vuelva a crear.