Convertidor de Color RGB a HEX

Sistemas de Colores RGB y HEX Explicados

RGB (Rojo, Verde, Azul) y HEX (hexadecimal) son dos formas de representar exactamente los mismos colores — solo que usan diferentes sistemas de notación. Ambos describen los colores mezclando tres colores primarios de luz (rojo, verde, azul) a diferentes intensidades. Entender ambos sistemas es esencial para el diseño web, CSS, el diseño gráfico, la edición de fotografías y el arte digital.

En el modelo RGB, cada una de las tres canales (rojo, verde, azul) tiene un valor de intensidad desde 0 hasta 255. Cero significa ninguna de esa color; 255 significa la máxima intensidad. Mezclar todos los tres a 255 da blanco (rgb(255,255,255)). Todos los tres a 0 da negro (rgb(0,0,0)). Con 256 posibles valores por canal y 3 canales, RGB puede representar 256³ = 16,777,216 colores distintos (aproximadamente 16.7 millones).

En el modelo HEX, las mismas tres canales se expresan como un número hexadecimal de 2 dígitos (00 a FF), precedido por #. El hexadecimal usa los dígitos 0–9 y las letras A–F, donde A=10, B=11, C=12, D=13, E=14, F=15. FF en hexadecimal = 15×16 + 15 = 255 en decimal. Así que #FFFFFF = rgb(255,255,255) = blanco. La conversión es puramente un cambio de base: decimal (base 10) a hexadecimal (base 16).

Cómo Convertir RGB a HEX: Paso a Paso

La conversión de cada canal RGB a hexadecimales requiere dividir por 16 y expresar el cociente y el residuo como dígitos hexadecimales:

1. Tomar el valor del canal (0–255)
2. Dividir por 16: cociente = primer dígito hexadecimal, residuo = segundo dígito hexadecimal
3. Convertir ambos a hexadecimales si son 10–15 (A–F)
4. Combinar: primer dígito + segundo dígito = valor hexadecimal de 2 dígitos
5. Repetir para los canales G y B
6. Concatenar: # + R_hex + G_hex + B_hex

Ejemplo: Convertir rgb(255, 99, 71) a hex (rojo tomate).

• R=255: 255÷16=15 residuo 15 → F + F → FF
• G=99: 99÷16=6 residuo 3 → 6 + 3 → 63
• B=71: 71÷16=4 residuo 7 → 4 + 7 → 47
• Resultado: #FF6347

Colores Comunes de la Web: Referencia RGB y HEX

Aquí se presenta una tabla de referencia completa para los colores web más comúnmente utilizados:

Uso de RGB y HEX en CSS y Diseño Web

El CSS acepta múltiples formatos de color. HEX y RGB son los más comunes, pero el CSS moderno también soporta HSL, colores nombrados y los nuevos espacios de color oklch y oklch para pantallas con un mayor rango de gamut.

En CSS, los colores se pueden especificar como:

• color: #FF6347; (HEX)
• color: rgb(255, 99, 71); (RGB)
• color: rgba(255, 99, 71, 0.5); (RGB + transparencia alpha, 0=transparente, 1=opaco)
• color: hsl(9, 100%, 64%); (Hue, Saturation, Lightness)
• color: tomato; (color nombrado en CSS)

Los códigos HEX también se pueden escribir en notación de 3 caracteres cuando cada par se repite: #FF0000 = #F00, #FFFFFF = #FFF, #336699 no puede ser abreviado. La notación de 3 caracteres reduce la mitad del tiempo de escritura y es soportada en todos los navegadores.

Para la consistencia en el diseño, los sistemas de diseño modernos (Material Design, Tailwind CSS, Bootstrap) usan paletas de colores predefinidas expresadas como códigos HEX. Por ejemplo, Tailwind CSS proporciona 22 familias de colores cada una con 10 tonos (gris-100 hasta gris-900), todos especificados como códigos HEX en el archivo de configuración.

RGBA y Transparencia Alpha

RGBA agrega un cuarto canal a RGB: alpha, que controla la transparencia. Los valores de alpha van desde 0 (transparente, invisible) hasta 1 (oácea, sin transparencia). Los valores fraccionarios crean colores semi-transparentes.

Ejemplos: rgba(0, 0, 0, 0.5) es un negro semi-transparente (como una superposición translúcida). rgba(255, 255, 255, 0.8) es un blanco con 80% de opacidad. Este se utiliza ampliamente para efectos de superposición, elementos UI con efecto de vidrio froztado y resaltados en el estado de hover.

En CSS moderno, también hay HEX con alpha: códigos hexadecimales de 8 caracteres donde las últimas 2 especifican la opacidad. #FF6347CC sería Tomate con 80% de opacidad (CC en hex = 204 en decimal; 204/255 ≈ 0.8). Este formato fue introducido en la especificación CSS Color Level 4 y se soporta en todos los navegadores modernos.

El equivalente en RGBA es más sencillo para los humanos: rgba(255, 99, 71, 0.8) vs #FF6347CC. La forma en que se usa depende de la preferencia personal y las herramientas — las herramientas de diseño como Figma suelen mostrar y exportar en HEX, mientras que los preprocesadores de CSS (Sass, Less) a menudo usan RGBA por su legibilidad.

Bases de la Teoría del Color para Diseñadores

Entender el modelo de color RGB va de la mano con entender la teoría del color. RGB es un modelo de color aditivo — los colores se crean al agregar luz. Combinar R+G+B a toda intensidad = blanco (todo la luz). Esto es lo contrario del modelo de color sustractivo (pigmento/impresión), donde mezclar todos los colores = negro.

Las colores complementarios en RGB se sitúan en la posición opuesta en el círculo cromático. Rojo (FF0000) y Cian (00FFFF) son complementarios — nota que el RGB del Cian es la inversa bit a bit del Rojo (0,255,255 vs 255,0,0). De manera similar, Azul y Amarillo, Verde y Magenta. Las parejas complementarias crean contraste y vibración visual máxima cuando se colocan junto a lado.

La armonía cromática guía la selección de colores que funcionan bien juntos: análogos (adyacentes en el círculo), triádicos (tres colores igualmente espaciados), complementarios divididos y tetradicos (cuatro colores formando un rectángulo). Estas relaciones ayudan a los diseñadores a crear paletas que se sientan intencionales y visualmente equilibradas.

Accesibilidad y contraste: Las Directrices de Accesibilidad del Contenido Web (WCAG) requieren una relación de contraste mínima entre el texto y el fondo: 4.5:1 para texto normal, 3:1 para texto grande. La relación de contraste se calcula a partir de la luminancia relativa de los valores RGB. Muchas herramientas en línea verifican la cumplimiento de las Directrices WCAG — esto importa significativamente para los usuarios con visión baja o color ciego.

Espacios de Color Más allá del RGB: HSL, HSB, CMYK

El sistema RGB no siempre es el más intuitivo para elegir colores. Los espacios de color alternativos pueden ser más prácticos para diferentes casos de uso:

HSL es especialmente amigable para diseñadores: el hue selecciona el color (0°=rojo, 120°=verde, 240°=azul), la saturación controla cuán viva es (0% es gris, 100% es un color puro), y la lightness controla la brillo (0% es negro, 50% es el color puro, 100% es blanco). Ajustando solo la lightness mientras se mantiene constante el hue y la saturation crea una escala de color coherente — muy útil para crear estados de hover, estados deshabilitados y tonos/gradaciones de un color de marca.

Accesibilidad del Color y Razones de Contraste

Las directrices de accesibilidad web (WCAG 2.1) especifican razones de contraste mínimas entre los colores de texto y el fondo para garantizar la legibilidad para los usuarios con visión baja o deficiencia de color. Aproximadamente el 8% de los hombres tienen alguna forma de deficiencia de visión del color (color ciego), lo que hace que las elecciones de color accesibles sean una exigencia ética y legal para el diseño web profesional.

La razón de contraste entre dos colores se calcula a partir de su luminancia relativa: razón de contraste = (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro y L2 es la luminancia del color más oscuro. La luminancia relativa se deriva de los valores RGB mediante una fórmula de corrección gamma: para cada valor de canal v = V/255, si v ≤ 0.03928 entonces lineal = v/12.92, de lo contrario lineal = ((v+0.055)/1.055)^2.4. Luego L = 0.2126×R + 0.7152×G + 0.0722×B.

Requisitos mínimos de contraste: el nivel AA requiere 4.5:1 para el texto normal (menor a 18pt o 14pt en negrita) y 3:1 para el texto grande. El nivel AAA requiere 7:1 para el texto normal y 4.5:1 para el texto grande. Las fallas más comunes son el texto claro gris sobre un fondo blanco (#999999 sobre blanco tiene solo una razón de contraste de 2.85:1, fallando el AA).

Construyendo un Paleta de Colores: De HEX a Sistema de Diseño

Una paleta de colores profesional típicamente incluye un color principal de la marca, colores secundarios de acento, grises neutros y colores semánticos (verde de éxito, amarillo de advertencia, rojo de error, azul de información). Cada color base requiere múltiples sombras para diferentes estados de la interfaz de usuario.

Partiendo de un color de la marca como #3B82F6 (Tailwind's blue-500), puedes derivar una escala de 10 sombras ajustando la luz en el espacio HSL: blue-50 (#EFF6FF, muy claro), blue-100 (#DBEAFE), hasta blue-900 (#1E3A5F, muy oscuro). Los tokens de diseño luego mapean estas sombras a usos semánticos: primary-button-bg = blue-600, primary-button-hover = blue-700, primary-button-text = blanco, etc.

Cuando se construye un sistema de color de marca, considera: regla 60-30-10 — 60% de color dominante (generalmente un neutro), 30% de color secundario, 10% de acento. Asegúrate de que todas las combinaciones de texto pasen la contraste WCAG AA. Prueba los colores bajo diferentes condiciones de iluminación y pantallas de dispositivos. Cuenta con modo oscuro (que puede necesitar diferentes valores de sombra para mantener el contraste). Un buen sistema de color diseñado en código es 8–15 valores HEX que cubren todas las casos de uso de manera consistente.

Psicología del Color en Diseño y Marketing

Los colores evocan respuestas psicológicas y emocionales, lo que hace que la selección de colores sea una decisión estratégica en la marca y el diseño de interfaz de usuario. La investigación de la psicología del color (aunque a veces exagerada en la cultura popular) proporciona orientaciones útiles generales para diseñar experiencias visuales efectivas.

Rojo (#FF0000): Energía, urgencia, pasión, peligro. Se utiliza para ventas ("¡Oferta!" en las señales de venta suelen ser rojas), alertas de emergencia, señales de parada y marcas de alimentos (Coca-Cola, McDonald's, KFC — el rojo estimula el apetito y crea urgencia). El rojo de contraste alto es excelente para llamadas a la acción cuando quieres una acción inmediata del usuario.

Azul (#0000FF): Confianza, profesionalismo, estabilidad, calma. El color dominante en la marca de finanzas y tecnología (Facebook, Twitter/X, LinkedIn, PayPal, IBM, Samsung). Estudios muestran que el azul es el color preferido a nivel global en culturas diferentes. El azul claro transmite abertura y amabilidad; el azul marino oscuro transmite autoridad y experticia.

Verde (#00FF00): Naturaleza, salud, crecimiento, éxito (dinero en los Estados Unidos). Se utiliza ampliamente en marcas de salud y bienestar, aplicaciones financieras (los retornos positivos se muestran en verde), organizaciones ambientales y señales "adelante". Los tonos medios como #28A745 (verde de éxito de Bootstrap) transmiten estados positivos en la interfaz de usuario sin ser agresivos.

Rango amarillo/ocelo: Optimismo, energía, creatividad, advertencia. El amarillo es muy visible (señales de construcción, taxis) pero difícil de leer como texto en blanco. El ocelo (#FFA500) se utiliza frecuentemente para llamadas a la acción — es visible y energético sin la connotación de urgencia/danger del rojo.

Trabajando con Colores en Herramientas de Diseño Populares

Cada herramienta de diseño principal tiene su propio flujo de trabajo con colores. Entender cómo trabajar con valores HEX y RGB eficientemente en tu herramienta ahorra tiempo significativo en el trabajo de diseño profesional.

Figma: Haz clic en cualquier elemento relleno → El panel de propiedades muestra el color de relleno → Haz clic en el color para abrir el selector. Puedes introducir valores HEX directamente o cambiar a los modos RGB, HSL o HSB. Figma también soporta opacidad a través del campo de opacidad separado y la notación RGBA. Copia y pega códigos HEX entre Figma y CSS sin necesidad de conversión.

Adobe Photoshop: Abre el selector de color (cuadrados de color de primer y segundo plano). La parte inferior del selector muestra el código HEX en un campo de texto. Haz clic con el botón derecho en los coloridos para agregarlos a tu paleta. La herramienta de ojo muestrea cualquier color en la pantalla — pasa el mouse para ver su código HEX en el panel de información.

Desarrollador de Herramientas del Navegador: Examina cualquier elemento → El panel Estilos muestra los valores de color CSS → Haz clic en el colorido junto a cualquier propiedad de color para abrir un selector en línea. Las Herramientas del Desarrollador pueden mostrar los colores como HEX, RGB, HSL o nombrados — haz clic en la vista previa del color para cambiar entre formatos. Esto es invaluable para desmontar decisiones de diseño existentes en sitios web.

VS Code: Decoradores de color (coloridos cuadrados) aparecen junto a los valores HEX y RGB en los archivos CSS. Al pasar el mouse se muestra un selector. La extensión Colorize añade vistas previas de color para todos los formatos de color. Las abreviaturas Emmet como c:f expanden a color: #fff; para colores comunes.

Usando este Convertidor de RGB a HEX

Escriba los valores de canales rojo, verde y azul (cada uno entre 0 y 255). El convertidor muestra el código de color HEX listo para pegar en CSS, HTML o cualquier herramienta de diseño. Los valores fuera del rango 0-255 se ajustan automáticamente. El convertidor también muestra la operación inversa: escriba un código HEX para obtener el desglose RGB. Utilice esta herramienta cuando una herramienta de diseño le proporciona un valor RGB pero su hoja de estilo CSS utiliza el formato HEX, o cuando copia colores entre diferentes aplicaciones que usan diferentes formatos. El código HEX de salida incluye el símbolo de liderado # para pegar directamente en las propiedades de color de CSS. Todas las 16,7 millones de combinaciones de color RGB se corresponden con un código HEX de 6 caracteres único sin ambigüedad ni redondeo.