Gestión del color en vectores: de RGB a CMYK a Pantone
Domina la gestión del color para gráficos vectoriales en flujos de trabajo digitales e impresos. Guía esencial sobre espacios de color, perfiles y reproducción precisa del color.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Entender el color en gráficos vectoriales: perspectiva de ciencia del color
La gestión del color es la dimensión técnicamente más exigente de la producción de gráficos vectoriales. A diferencia de los flujos raster donde el color está integrado en los datos de píxeles, los formatos vectoriales describen el color matemáticamente — cada exportación, cada dispositivo de salida interpreta esa descripción a través de su propio pipeline de renderizado. Sin gestión disciplinada, lo que ves en tu monitor calibrado tiene poca semejanza con la hoja impresa.
Esta guía aborda el color desde los principios fundamentales: la física de los espacios de color, la mecánica de perfiles ICC, las realidades del mapeo de gamut, y los flujos de trabajo prácticos que mantienen tus gráficos vectoriales consistentes de la pantalla al sustrato.
"El color es el elemento más subjetivo del diseño — lo que para un interesado es 'rojo cálido' para otro parece 'borgoña corporativo'. La gestión del color te da un lenguaje compartido y medible para negociar."
RGB vs CMYK vs Pantone: análisis en profundidad
Cada espacio de color representa un modelo físico diferente. Comprender sus limitaciones de gamut es innegociable.
RGB (Color aditivo)
Los canales rojo, verde y azul se combinan hacia el blanco — reflejando cómo las pantallas emiten físicamente fotones a longitudes de onda controladas.
Especificación RGB:
- Modelo: Aditivo (emisión de luz)
- Canales: R (620-750nm), G (495-570nm), B (450-495nm)
- Profundidad: 8 bits = 0-255/canal (16,7M colores)
- Gamuts: sRGB (~35% CIE 1931), Adobe RGB (~50%), Display P3 (~43%)
- Uso: Web, UI de apps, vídeo, señalización digitalsRGB es el estándar web. Adobe RGB se extiende hacia el cian-verde, valioso para fotografía destinada a CMYK. Display P3, el estándar del ecosistema Apple, es ~25% más amplio que sRGB con rojos y verdes más intensos.
CMYK (Color sustractivo)
Las tintas cian, magenta, amarillo y negro (key) absorben longitudes de onda de la luz reflejada — regido por la teoría de absorción de Kubelka-Munk.
Especificación CMYK:
- Modelo: Sustractivo (absorción de luz)
- Canales: C, M, A, N (0-100% cobertura de tinta)
- Tinta total: Máx 300-340% (según la prensa)
- Gamut: ~55-65% del sRGB (significativamente menor)
- Perfiles: US Web Coated (SWOP) v2, Fogra39, JapanColor
- Uso: Offset, prensa digital, packagingPor qué existe el N: C100+M100+A100 teóricamente produce negro pero da un marrón turbio por impurezas de tinta. El canal negro proporciona densidad real, reduce el consumo y mejora la nitidez del texto.
Pantone (Sistema de colores directos)
El Pantone PMS usa tintas premezcladas de 18 pigmentos base. Cada muestra tiene un valor L*a*b* verificado por espectrofotómetro — una referencia colorimétrica independiente del dispositivo.
Especificación Pantone:
- Formulación: Premezclado de 18 pigmentos base
- Bibliotecas: Coated (C), Uncoated (U), Matte (M)
- Colores: 2.390+ sólidos (más metálicos, fluo)
- Referencia: Muestras físicas bajo iluminante D50
- Uso: Identidad de marca, packaging, barniz selectivo, estampadoSiempre especifica 286 C o 286 U — nunca solo "286." El mismo número se ve diferente en papel estucado vs no estucado porque la porosidad del papel cambia cómo la tinta refleja la luz.
Visualización de espacios de color y mapeo de gamut
Imagina el diagrama de cromaticidad CIE 1931 como un mapa en forma de herradura del color visible por el humano. Cada espacio se sitúa dentro como un triángulo (RGB) o forma irregular (CMYK). El insight clave: CMYK es un subconjunto de RGB, que es un subconjunto de la visión humana.
Cobertura de gamut (% del CIE 1931):
Visión humana ─── 100%
├── Adobe RGB ──── ~50%
├── Display P3 ─── ~43%
├── sRGB ────────── ~35%
└── CMYK SWOP ──── ~22%
Resultado: ~30-40% de los colores sRGB NO PUEDEN reproducirse en CMYK.La especificación ICC define cuatro intenciones de renderizado para el mapeo de gamut:
| Intención de renderizado | Comportamiento | Ideal para |
|---|---|---|
| Perceptual | Comprime todo el gamut para preservar relaciones | Fotografía, degradados |
| Colorimétrica relativa | Recorta fuera-de-gamut, preserva dentro-de-gamut | Logos, colores de marca |
| Saturación | Prioriza vivacidad sobre precisión | Gráficos, infografías |
| Colorimétrica absoluta | Sin ajuste de punto blanco | Pruebas, simulación de papel |
Para trabajo vectorial de marca, la Colorimétrica relativa es casi siempre la correcta.
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual DealEspecificación de color en SVG
SVG soporta múltiples sintaxis con diferentes perfiles de precisión y compatibilidad:
<!-- Hexadecimal (preferido para producción) -->
<rect fill="#0033A0" /> <!-- hex 6 dígitos -->
<rect fill="#0033A0CC" /> <!-- 8 dígitos con alfa -->
<!-- RGB funcional -->
<rect fill="rgb(0, 51, 160)" />
<rect fill="rgba(0, 51, 160, 0.8)" />
<!-- HSL funcional (útil para variaciones programáticas de tono) -->
<rect fill="hsl(220, 100%, 31%)" />
<!-- Colores nombrados (evitar en producción — imprecisos) -->
<rect fill="darkblue" /> <!-- Mapea a #00008B -->Usa hex de 6 dígitos para SVGs de producción: universalmente soportado, compacto, sin ambigüedad. Reserva HSL para manipulación programática del color.
Warning: Cambio de color al convertir RGB a CMYK: Los archivos SVG son intrínsecamente RGB. Cada color debe pasar por conversión CMYK para impresión — y los azules vibrantes (#0033FF), cianes saturados y verdes neón se desplazarán notablemente. El azul eléctrico (#0000FF) se vuelve visiblemente más opaco y ligeramente desplazado hacia el púrpura en CMYK. Siempre haz una prueba digital de los SVGs contra el perfil CMYK objetivo antes de aprobar para impresión. No existe conversión RGB-a-CMYK sin pérdida; la física no lo permite.
Gestión de perfiles ICC
Los perfiles ICC son tablas de búsqueda que describen cómo un dispositivo reproduce el color — el puente entre el Lab independiente del dispositivo y los valores específicos del dispositivo.
| Flujo de trabajo | Perfil | Caso de uso |
|---|---|---|
| Web / Digital | sRGB IEC61966-2.1 | Todos los SVGs para pantalla |
| Dispositivos Apple | Display P3 | Safari, iOS, macOS |
| Impresión offset US | US Web Coated (SWOP) v2 | Impresión comercial US |
| Impresión UE | Fogra39 (ISO Coated v2) | Impresión comercial UE |
| Papel no estucado | US Web Uncoated v2 | Papeles no estucados |
Para trabajo crítico, solicita un perfil ICC personalizado de tu imprenta — construido a partir de su prensa específica, juego de tintas y papel usando una mira de caracterización (IT8.7/4). Los perfiles genéricos incluidos con el software son aproximaciones.
Pro Tip: Trabaja siempre en el espacio de color de salida desde el inicio. Si tu entregable es impreso, configura tu documento en CMYK con el perfil ICC de la imprenta antes de trazar un solo trazado. Convertir al final garantiza sorpresas — los colores elegidos en RGB pueden caer fuera del gamut CMYK, y el motor de conversión toma decisiones de sustitución por ti. Empezar en CMYK restringe tu paleta a colores imprimibles desde el principio.
Flujo de conversión de color
| Fuente | Destino | Ruta de conversión | Perfil |
|---|---|---|---|
| SVG (RGB) | Pantalla web | No necesaria | Incrustar tag sRGB |
| SVG (RGB) | Impresión CMYK | Asignar sRGB, convertir a CMYK | SWOP v2 |
| SVG (RGB) | Pantone | Correspondencia manual vía guía Bridge | Muestras físicas |
| Pantone | Sustituto CMYK | Builds CMYK oficiales Pantone | Color Bridge |
| Pantone | RGB/Hex | Valores RGB oficiales Pantone | Color Bridge |
| Raster a vector | Cualquier destino | Vectorizar primero, convertir después | Vectosolve extrae RGB |
Al vectorizar con Vectosolve, los colores se extraen como valores hex RGB limpios — una base precisa para convertir a cualquier espacio objetivo usando el editor SVG.
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG FreeAccesibilidad del color: contraste WCAG
La gestión del color se extiende más allá de la fidelidad de impresión para asegurar la perceptibilidad para usuarios con deficiencias de visión del color (~8% de hombres, ~0,5% de mujeres).
Ratios de contraste mínimo WCAG 2.1:
- Texto normal (≥14px): 4,5:1 (AA) / 7,0:1 (AAA)
- Texto grande (≥18px): 3,0:1 (AA) / 3,0:1 (AAA)
- Componentes UI/iconos: 3,0:1 contra colores adyacentesDirectrices específicas para vectores: Nunca confíes solo en el color — usa patrones o etiquetas junto con la codificación por color. Prueba con simulación de protanopía/deuteranopía. Los elementos de texto SVG deben cumplir los mismos umbrales WCAG que el texto HTML. En gráficos, complementa el color con tramas.
Key Takeaways
- RGB, CMYK y Pantone son modelos físicos diferentes — luz aditiva, tinta sustractiva, pigmento premezclado. La conversión siempre implica compromiso.
- CMYK cubre ~55-65% del sRGB — azules, cianes y verdes vibrantes se desplazarán. Es física, no un error de software.
- Los perfiles ICC conectan espacios de color. Usa el perfil personalizado de tu imprenta para trabajos críticos, no los valores por defecto genéricos.
- Trabaja en el espacio de color de salida desde el principio. La conversión al final del flujo garantiza sorpresas no deseadas.
- SVG es intrínsecamente RGB. Planifica tu conversión para impresión antes de la producción, no después.
- La accesibilidad del color es obligatoria. Los ratios de contraste WCAG se aplican a iconos vectoriales, gráficos y texto SVG.
- Vectoriza con Vectosolve, luego gestiona el color. La extracción limpia te da una base RGB precisa para cualquier espacio de destino.
Conclusión
La gestión del color es donde la intención de diseño se encuentra con la realidad física. La brecha entre el luminoso #0033FF en tu pantalla y la tinta en papel no es un error — es la consecuencia de traducir entre modelos aditivo y sustractivo. Tu trabajo es gestionar esa traducción deliberadamente usando perfiles ICC, mapeo de gamut apropiado y pruebas verificadas.
Define tu salida primero. Configura el espacio de color en consecuencia. Especifica los colores de marca en todos los sistemas — Pantone, CMYK, RGB, Hex. Usa Vectosolve para una extracción vectorial limpia, luego refina en el editor SVG para mapear colores a las especificaciones de producción. La física del color no negocia — pero con gestión adecuada, tú controlas la conversación.
Empieza a convertir con extracción precisa de color
| Modelo de color | Mejor caso de uso | Tamaño del gamut |
|---|---|---|
| RGB (sRGB) | Web y pantalla | ~35% del espectro visible |
| CMYK (FOGRA39) | Impresión offset | ~25% del espectro visible |
| Pantone Solid Coated | Color directo exacto para marca | ~50% del espectro visible |
| Adobe RGB | Fotografía y preimpresión | ~50% del espectro visible |
| Display P3 | Pantallas Apple modernas y HDR | ~45% del espectro visible |
Fuentes y lecturas adicionales
- W3C SVG 2 Specification — Color — Estándar SVG oficial incluyendo propiedades de color, perfiles ICC y atributos de interpolación
- Pantone Color Systems Explained — La referencia definitiva para correspondencia de colores directos en impresión y medios físicos
- MDN Web Docs — SVG Color — Guía completa de valores de color SVG, colores nombrados e integración CSS
- Adobe Color Management Blog — Insights profesionales sobre perfiles ICC, flujos de prueba digital y precisión del color