Conversor de Colores RGB a HEX, HSL y CMYK: Generador de Paletas Monocromáticas, Complementarias y Análogas, y Verificador de Contraste WCAG 2.1 para Accesibilidad Web
Convierte instantáneamente entre RGB, HEX (#0E7C86), HSL (hsl(184, 81%, 29%)) y CMYK con color picker en vivo. Genera paletas de colores armónicas para tu diseño. Verifica el ratio de contraste texto/fondo para cumplir WCAG 2.1 AA (mínimo 4.5:1) y AAA (7:1) para accesibilidad. Copia cualquier formato en un clic.
Elige un color base con el selector o los valores RGB/HEX del Modo Conversor (se mantienen entre modos).
Ingresa los colores de texto y fondo para verificar si cumplen los estándares de accesibilidad WCAG 2.1 (AA: 4.5:1 | AAA: 7:1).
Elige un color y presiona Convertir para ver HEX, RGB, HSL y CMYK
Modelos de color en diseño y desarrollo web en América Latina: qué es RGB, HEX, HSL y CMYK, y cuándo usar cada uno según el proyecto
Los colores digitales se expresan en diferentes formatos según el contexto de uso. En el diseño y desarrollo web de México, Colombia y Argentina, los cuatro formatos más comunes son RGB, HEX, HSL y CMYK. RGB (Red, Green, Blue) es el modelo aditivo de luz: cada componente va de 0 a 255, y la combinación de los tres crea el color. Es el modelo nativo de las pantallas (monitores, teléfonos, tablets). HEX es simplemente la representación hexadecimal de RGB: #FF0000 es el rojo puro (R=255, G=0, B=0 en base 16 = FF, 00, 00). Es el formato más usado en CSS y HTML porque es compacto. HSL (Matiz, Saturación, Luminosidad) es el formato más intuitivo para diseñadores: permite crear variaciones de un color cambiando solo un parámetro. CMYK es el estándar de impresión física: si vas a imprimir una tarjeta de presentación en una imprenta de Guadalajara, Bogotá o Buenos Aires, el archivo debe estar en CMYK para que los colores impresos coincidan con los del diseño digital.
Por qué el mismo color se ve diferente en pantalla y en impresión: la diferencia entre RGB (luz) y CMYK (tinta) que todo diseñador en México, Colombia y Argentina debe entender antes de enviar un archivo a la imprenta
Uno de los problemas más frustrantes para diseñadores de América Latina es recibir una impresión que no coincide con el color que se ve en pantalla. La causa: RGB y CMYK tienen gamas de color (gamuts) diferentes. Algunos colores brillantes que se pueden mostrar en pantalla (como el azul eléctrico #0000FF puro) no tienen un equivalente exacto en tinta CMYK, ya que las tintas físicas no pueden reproducir toda la gama de la luz. La regla práctica: si el proyecto es para web, redes sociales, email o presentaciones digitales, trabaja en RGB/HEX. Si el proyecto es para impresión (tarjetas, carteles, packaging, revistas), diseña en CMYK desde el inicio y pide a la imprenta el perfil de color ICC que usan (generalmente FOGRA39 para América Latina).
WCAG 2.1 en México, Colombia y Argentina: cuáles son las obligaciones legales de accesibilidad para sitios web gubernamentales y por qué el contraste 4.5:1 es el mínimo que todo desarrollador debe conocer
La accesibilidad web no es solo un estándar ético: en varios países de América Latina existen obligaciones legales o regulatorias. En México, la Norma Mexicana NMX-I-270-NYCE-2020 y las Guías de Accesibilidad del Gobierno de México (gob.mx) establecen que los sitios gubernamentales deben cumplir WCAG 2.1 nivel AA. En Colombia, el Decreto 1078 de 2015 establece requisitos de accesibilidad para sitios de entidades públicas. En Argentina, la Ley 26.653 de Accesibilidad de la Información en las Páginas Web (2010) requiere que todos los sitios del Estado nacional cumplan WCAG. El requisito de contraste AA (4.5:1 para texto normal, 3:1 para texto grande) garantiza que personas con baja visión o deuteranopia (daltonismo verde-rojo, que afecta al 8% de los hombres) puedan leer el contenido.
¿Cómo funciona este conversor de colores?
Tres módulos para el flujo de trabajo completo del diseño y desarrollo de color.
Modo 1: Conversor de Formatos
Elige un color con el color picker, deslizando los controles de R, G y B, o escribiendo directamente el código HEX. Todos los formatos se sincronizan en tiempo real. Al presionar Convertir, obtienes: HEX, RGB, HSL, CMYK, variable CSS y variable Sass, cada una con botón de copia instantánea. El gráfico de barras muestra los tres componentes RGB visualmente.
Modo 2: Generador de Paletas
Selecciona el tipo de paleta (monocromática, complementaria, análoga, tríada o cuadrada) y el color base. Genera entre 6 y 8 colores armónicos que puedes usar directamente en tu diseño. Haz clic en cualquier swatch para copiar el HEX. El gráfico muestra el brillo percibido de cada color.
Modo 3: Verificador WCAG 2.1
Ingresa el color del texto y del fondo (con color picker o en HEX). La calculadora calcula el ratio de contraste y verifica los cuatro niveles WCAG: AA texto normal (≥4.5:1), AA texto grande (≥3:1), AAA texto normal (≥7:1), AAA texto grande (≥4.5:1). Incluye una previsualización visual del texto sobre el fondo.
3 Ejemplos Reales del Uso de Colores en Diseño y Desarrollo Web en México, Colombia y Argentina
Casos prácticos de cómo diseñadores, desarrolladores y agencias de marketing digital en América Latina usan conversores de color, paletas y verificación de accesibilidad en proyectos reales
Andrea diseña el manual de marca de una startup fintech en Ciudad de México: cómo define los colores primarios en HEX para web, convierte a CMYK para imprenta y verifica que cumplan WCAG para la app móvil
Andrea trabaja en una agencia de diseño en Condesa, CDMX. El cliente es una fintech que lanza su app en México. El color primario elegido por el cliente es el verde de Mercado Pago (#00D455). Andrea usa el conversor: HEX #00D455 → RGB(0, 212, 85) → HSL(144, 100%, 42%) → CMYK(100%, 0%, 60%, 17%). Para la app móvil (iOS y Android): usa RGB y HEX. Para las tarjetas de presentación que irán a una imprenta de Polanco: el archivo va en CMYK(100, 0, 60, 17). Verifica accesibilidad: #00D455 como fondo, #FFFFFF como texto → ratio 2.1:1 (reprueba AA). Cambia el texto a #003300 (verde muy oscuro) → ratio 9.4:1 (aprueba AAA). El manual de marca queda: botón verde #00D455 con texto oscuro #003300, nunca con texto blanco.
#00D455 → CMYK(100,0,60,17) para imprenta | Con texto blanco: 2.1:1 (falla WCAG) | Con #003300: 9.4:1 (AAA)Diego desarrolla el sitio web de una clínica en Medellín que debe cumplir los requisitos de accesibilidad del Decreto 1078 de Colombia: cómo verifica todos los pares de color texto/fondo
Diego es desarrollador frontend freelance en Medellín. El cliente es una clínica privada que quiere que su sitio cumpla accesibilidad (por recomendación legal y para pacientes de mayor edad). El sitio usa azul oscuro #003087 sobre fondo blanco #FFFFFF. Modo Accesibilidad: ratio 14.5:1 → AAA aprobado. Siguiente par: texto gris #888888 sobre fondo blanco #FFFFFF para el texto de ayuda → ratio 3.5:1 → falla AA para texto normal (necesita 4.5:1). Diego cambia el gris de ayuda a #757575 → ratio 4.57:1 → aprueba AA just. Verifica el botón: texto blanco #FFFFFF sobre fondo verde #28a745 → ratio 4.56:1 → AA aprobado. El cliente recibe un informe PDF de WCAG generado por la herramienta para documentar el cumplimiento del Decreto 1078.
#003087 sobre #FFF: 14.5:1 (AAA) | #888 sobre #FFF: 3.5:1 (falla) | #757575 sobre #FFF: 4.57:1 (AA)Camila crea contenido visual para redes sociales de una marca de moda en Buenos Aires: cómo genera una paleta armoniosa para sus reels y stories de Instagram sin ser diseñadora profesional
Camila gestiona las redes sociales de una marca de moda indie en Palermo, Buenos Aires. No tiene formación formal en diseño pero necesita crear contenido visualmente consistente. El color principal de la marca es un terracota: #C4633F. Modo Paletas, tipo Análoga: genera 5 colores armónicos alrededor del terracota: #C4873F (ocre), #C4A03F (amarillo cálido), #C4633F (terracota base), #C4453F (rojo-ladrillo), #C43F5A (rosa oscuro). Camila copia los 5 HEX y los pega en Canva como paleta de marca. Resultado: todos sus posts de Instagram tienen coherencia visual sin necesitar un diseñador. Con el generador Complementaria: el complementario de su terracota es un azul petróleo #3F9EC4, perfecto para calls to action que contrasten.
#C4633F (terracota) | Análoga: 5 colores cálidos armónicos | Complementario: #3F9EC4 para CTAsFelipe, desarrollador CSS en Santiago, crea el sistema de variables de color para un e-commerce chileno usando HSL para generar variantes de hover, active y disabled de forma sistemática
Felipe trabaja en una agencia digital en Providencia, Santiago. Diseña el sistema de diseño de un e-commerce de vinos. El color primario del cliente: #702F8A (morado). Modo Conversor: #702F8A → HSL(284, 49%, 36%). Ahora Felipe crea las variantes sistemáticamente solo cambiando la Luminosidad: Lightest (L=95%): #F0E8F5 para fondos. Light (L=75%): #C5A3D9 para bordes. Normal (L=36%): #702F8A base. Dark (L=26%): #4E2060 para hover. Darkest (L=16%): #2E1239 para active. Pega en CSS: `–purple-light: #C5A3D9; –purple: #702F8A; –purple-dark: #4E2060;`. Este approach de HSL para crear escalas de color sin calcular HEX manualmente es la técnica que usan sistemas de diseño profesionales como Tailwind CSS y Material Design.
#702F8A → HSL(284,49%,36%) | Sistema 5 variantes cambiando L | –purple-dark: #4E2060 para hoverPaola estudia Diseño Gráfico en el ITESM Monterrey y necesita convertir los colores de su proyecto final de pantalla (RGB) a CMYK para enviarlo a la imprenta universitaria sin que los colores cambien drásticamente
Paola diseñó un packaging de café mexicano con colores vibrantes para su proyecto de grado. Los colores en pantalla (RGB): rojo #E63946, amarillo #FFB703, azul #023E8A. Problema: la imprenta del ITESM trabaja en CMYK. Modo Conversor. #E63946: CMYK(0, 75, 69, 10). #FFB703: CMYK(0, 28, 98, 0). #023E8A: CMYK(98, 55, 0, 46). Advertencia importante que Paola aprende: el azul #023E8A en CMYK tiene 46% de negro (K=46), lo que puede hacer que en impresión se vea más oscuro que en pantalla. Su profesor recomienda ajustarlo a K=35% para que sea más vivo en papel. El conversor la ayuda a entender por qué ciertos colores digitales no se reproducen fielmente en impresión offset.
#E63946 → CMYK(0,75,69,10) | #023E8A → CMYK(98,55,0,46) | K alto = colores más oscuros en impresiónJuan desarrolla una app React Native para Android e iOS en Bogotá: cómo usa el conversor para traducir el HEX del diseñador en Figma a los formatos correctos para cada plataforma móvil
Juan recibe del diseñador un Figma con el color primario #1B6CA8. Necesita implementarlo en React Native (iOS y Android). Modo Conversor: #1B6CA8 → RGB(27, 108, 168) → HSL(210, 72%, 38%). Para React Native con la biblioteca React Native Paper: utiliza el HEX directamente: `primary: ‘#1B6CA8’`. Para Android (XML nativo): `#FF1B6CA8` (con canal alfa FF al inicio). Para iOS (Swift): `UIColor(red: 27/255, green: 108/255, blue: 168/255, alpha: 1)` o con los valores decimales que muestra el conversor. Para el diseño system con Tailwind CSS RN: `colors: { brand: { 500: ‘#1B6CA8’, 400: ‘#3D87C0’, 600: ‘#155A8A’ } }`. Juan usa la paleta monocromática del Modo Paletas para generar automáticamente los valores 400 y 600.
#1B6CA8 → Android: #FF1B6CA8 | Swift: UIColor(red:27/255,green:108/255,blue:168/255) | HSL para Tailwind tokens3 Consejos de Expertos en Diseño y Desarrollo de Color para Proyectos Web en América Latina
Lo que los diseñadores UX/UI de Mercado Libre, Rappi y las agencias digitales líderes de México, Colombia y Argentina aplican en sus sistemas de diseño para trabajar con color de forma eficiente y accesible
Usa HSL para crear tu sistema de colores en CSS: en lugar de hardcodear 20 HEX diferentes, define una sola Hue y genera todas las variantes cambiando solo la Luminosidad, que es como trabajan Tailwind CSS, Material Design y los sistemas de diseño modernos
El error más común en proyectos web pequeños de América Latina es definir colores como valores HEX fijos (`#1B6CA8` para normal, `#155A8A` para hover, `#0E3D5F` para active) sin ningún sistema subyacente. El resultado: cuando el cliente quiere cambiar el color primario de azul a verde, el desarrollador tiene que buscar y reemplazar 15 valores HEX diferentes. El enfoque moderno: define tu paleta en HSL con variables CSS. `–hue: 210; –primary: hsl(var(–hue), 72%, 38%); –primary-hover: hsl(var(–hue), 72%, 28%); –primary-light: hsl(var(–hue), 72%, 90%);`. Para cambiar el color completo de azul a verde: solo cambias `–hue: 120`. Todo el sistema se actualiza automáticamente. Este approach es el que usa Tailwind CSS y es cada vez más popular entre los desarrolladores frontend de CDMX, Bogotá y Buenos Aires.
Verifica siempre el contraste ANTES de presentar al cliente: el 40% de los diseños web rechazados por problemas de accesibilidad en proyectos gubernamentales de México y Colombia fallan exactamente en el ratio de contraste del color gris del texto secundario sobre fondo blanco
El error de accesibilidad más frecuente en sitios web de América Latina es el texto de ayuda o secundario en gris claro sobre fondo blanco. Los diseñadores eligen tonos como #AAAAAA o #BBBBBB porque se ven “elegantes y sutiles”, pero estos colores tienen ratios de contraste de solo 2.3:1 o 1.8:1, muy por debajo del mínimo de 4.5:1 WCAG AA. La regla práctica para texto secundario sobre fondo blanco: mínimo #757575 (ratio 4.57:1, justísimo AA), preferiblemente #666666 o más oscuro. Para texto sobre fondos grises claros, usa el verificador WCAG de esta herramienta antes de presentar el diseño. Los sitios gubernamentales de México (gob.mx) y Colombia tienen equipos de revisión de accesibilidad que rechazan propuestas que no cumplen AA. Verifica siempre, antes de la presentación.
Para branding de marcas LatAm: los colores cálidos (amarillo-naranja-terracota) tienen alta visibilidad y resonancia cultural en México, Colombia y Brasil, mientras que el azul oscuro domina en fintech, salud y gobierno por su asociación con confianza y profesionalismo
La psicología del color en América Latina tiene particularidades culturales que los diseñadores extranjeros frecuentemente ignoran. El amarillo (HSL ~50°) y el naranja (HSL ~30°) evocan energía, fiesta y calor humano en contextos latinoamericanos. Mercado Libre usó amarillo brillante como color primario precisamente por esta razón. El azul oscuro (HSL 210-230°, L 20-40%) domina en fintech, banca, gobierno y salud porque universalmente se asocia con confianza, estabilidad y profesionalismo. El terracota, el ocre y los colores tierra son tendencia creciente en marcas artesanales, gastronomía y moda de toda LatAm. Para generar paletas de estos tonos cálidos, usa la paleta Análoga de esta herramienta partiendo de un color base naranja o terracota. La paleta Análoga preserva la “temperatura” del color y garantiza que todos los colores se sientan cohesivos.
16 Preguntas Frecuentes sobre Colores RGB, HEX, HSL y Accesibilidad Web
Conversiones, paletas, contraste WCAG y uso práctico para diseñadores y desarrolladores en México, Colombia, Argentina, Chile y toda América Latina
¿Cómo convertir RGB a HEX?
Convierte cada componente (0-255) a hexadecimal (00-FF) y concaténalos con #. Ej: RGB(14,124,134) → 0E7C86 → #0E7C86. Esta calculadora lo hace instantáneamente.
¿Cómo convertir HEX a RGB?
Divide el HEX en 3 pares y convírtelos de base 16 a decimal. Ej: #0E7C86 → 0E=14, 7C=124, 86=134 → RGB(14,124,134). Ingresa el HEX en la herramienta para conversión instantánea.
¿Qué es HSL y cómo difiere de RGB?
HSL: Hue (0-360°, el tono), Saturation (0-100%, la viveza) y Lightness (0-100%, la claridad). Más intuitivo para diseñadores. RGB describe cómo la pantalla lo reproduce (luz). HSL describe cómo lo percibimos.
¿Para qué se usa CMYK?
Impresión física: tarjetas de presentación, carteles, packaging, revistas. RGB para pantallas digitales, CMYK para imprenta. Algunos colores RGB brillantes no tienen equivalente exacto en CMYK (fuera de gamut).
¿Qué es el ratio de contraste WCAG?
La proporción de luminancia entre el color más claro y el más oscuro. Rango: 1:1 (mismo color) a 21:1 (negro sobre blanco). WCAG AA requiere 4.5:1 para texto normal, 3:1 para texto grande. AAA requiere 7:1 y 4.5:1 respectivamente.
¿Qué paletas de colores genera esta herramienta?
5 tipos: Monocromática (mismo matiz, distintas luminosidades), Complementaria (el opuesto 180° en el círculo), Análoga (±30° y ±60°), Tríada (0°, 120°, 240°), Cuadrada (0°, 90°, 180°, 270°).
¿Cuál es el gris más oscuro que aún pasa WCAG AA sobre blanco?
#767676 o más oscuro (ratio exacto 4.54:1). El popular #AAAAAA solo tiene 2.32:1 (falla). Para texto secundario sobre blanco, usa mínimo #767676, preferiblemente #666666 (ratio 5.74:1).
¿Cómo usar HSL para crear sistemas de color en CSS?
Define una variable –hue y genera variantes cambiando solo L: `–primary: hsl(var(–hue), 72%, 38%); –primary-hover: hsl(var(–hue), 72%, 28%);`. Para cambiar el color completo: cambia solo –hue. Tailwind CSS y Material Design usan este enfoque.
¿Cómo obtener el color complementario de un HEX?
Convierte a HSL, suma 180° al Hue y convierte de vuelta. Ej: #0E7C86 tiene Hue=184°. Complementario: 184+180=364° mod 360 = 4° → rojo-naranja. El Modo Paletas con tipo Complementaria calcula esto automáticamente.
¿Qué significa el canal alfa y cómo se agrega al HEX?
El alfa controla la opacidad (0=transparente, 1=opaco). En HEX se agrega como dos dígitos al final: #0E7C86FF (100% opaco) o #0E7C8680 (50% opaco). En CSS: rgba(14, 124, 134, 0.5) o color-mix().
¿Por qué los colores se ven diferente en pantalla y en impresión?
RGB y CMYK tienen gamas (gamuts) de color diferentes. Algunos colores RGB brillantes no existen en CMYK. Diseña en CMYK desde el inicio para proyectos de impresión física y pide el perfil ICC a la imprenta (FOGRA39 es común en LatAm).
¿Qué formato de color usar en Figma?
Figma trabaja nativamente en HEX y RGB. Para tokens de diseño usa HEX. Para variables, Figma soporta HEX, RGB y HSL. Exporta en HEX para desarrollo web, y convierte a CMYK antes de enviar a imprenta.
¿Cómo usar HEX en Android o iOS?
Android XML: #FF0E7C86 (canal alfa FF al inicio). Swift: UIColor(red:14/255, green:124/255, blue:134/255, alpha:1). React Native: ‘#0E7C86’ directo. Flutter: Color(0xFF0E7C86).
¿Los sitios web de México y Colombia deben cumplir WCAG?
Sí. México: NMX-I-270-NYCE-2020 y Guías gob.mx requieren WCAG 2.1 AA para sitios gubernamentales. Colombia: Decreto 1078 de 2015. Argentina: Ley 26.653. El requisito principal: ratio de contraste texto/fondo mínimo 4.5:1.
¿Qué es el color complementario y cuándo usarlo?
El color opuesto en el círculo cromático (180° de diferencia). Crea máximo contraste visual. Se usa para calls to action, botones de destaque, o elementos que deben llamar la atención sobre un fondo del color base.
¿Esta herramienta funciona sin conexión a internet?
Sí. Una vez cargada la página, todos los cálculos (conversión, paletas, contraste) se realizan localmente en tu navegador. No envía datos a ningún servidor. El color picker del navegador también funciona sin conexión.
Herramientas Relacionadas de Diseño y Desarrollo Web
Aviso Legal y Transparencia Editorial
Las conversiones de color (RGB↔HEX↔HSL↔CMYK) aplican las fórmulas matemáticas estándar del modelo de color sRGB. La conversión RGB↔CMYK es aproximada (no considera perfiles ICC): para impresión profesional, usa software especializado (Adobe Illustrator, CorelDRAW) con el perfil ICC de tu imprenta. Los ratios de contraste WCAG se calculan según la fórmula oficial del W3C (luminancia relativa con corrección gamma). Las paletas generadas son propuestas armónicas basadas en teoría del color; la percepción final puede variar según el monitor y su calibración. Para proyectos de accesibilidad que requieran certificación formal, realiza una auditoría completa con un especialista en accesibilidad web. Referencias: WCAG 2.1 Contraste (W3C). Última actualización: julio 2026.
