Como convertir colores HEX a RGB y viceversa: guia para disenadores y developers

Los modelos de color son sistemas matematicos para representar colores digitalmente. Si trabajas en desarrollo web, diseno grafico, branding o cualquier disciplina visual, necesitas entender al menos tres modelos: HEX, RGB y HSL. Cada uno tiene ventajas segun el contexto.

El CSS moderno acepta los tres formatos. Puedes escribir el mismo rojo de estas formas:

• HEX: #FF0000
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%)

Los tres producen exactamente el mismo color, pero su utilidad varia. HEX es compacto para escribir en CSS. RGB es intuitivo cuando piensas en mezcla de luz. HSL es ideal cuando quieres ajustar luminosidad o saturacion sin cambiar el tono.

Con el conversor de colores de NexTools, puedes convertir entre todos estos formatos al instante y ver una previsualizacion en tiempo real del color.

El formato HEX (hexadecimal) representa colores con un signo # seguido de 6 digitos hexadecimales (0-9, A-F). Los digitos se agrupan en pares: los primeros dos para rojo, los siguientes dos para verde, y los ultimos dos para azul.

Estructura: #RRGGBB

Cada par va de 00 (0 decimal, nada de ese color) a FF (255 decimal, maxima intensidad):

Color	HEX	Explicacion
Negro	#000000	Cero rojo, cero verde, cero azul
Blanco	#FFFFFF	Maximo rojo, verde y azul
Rojo puro	#FF0000	Maximo rojo, sin verde ni azul
Verde puro	#00FF00	Sin rojo, maximo verde, sin azul
Azul puro	#0000FF	Sin rojo, sin verde, maximo azul
Amarillo	#FFFF00	Maximo rojo y verde, sin azul
Gris medio	#808080	Cantidades iguales medias

HEX abreviado: Si cada par tiene digitos repetidos, puedes abreviar: #FF0000 = #F00, #AABBCC = #ABC. Pero #A1B2C3 no se puede abreviar.

HEX con transparencia: Puedes agregar dos digitos mas para alfa (opacidad): #FF000080 es rojo al 50% de opacidad. 00 = completamente transparente, FF = completamente opaco.

El modelo RGB (Red, Green, Blue) se basa en la sintesis aditiva de luz. Cada componente va de 0 a 255, y al mezclarlos se producen millones de colores (exactamente 16,777,216 combinaciones: 256 x 256 x 256).

En CSS: rgb(rojo, verde, azul)

Ejemplos practicos:

• rgb(255, 165, 0) = naranja
• rgb(128, 0, 128) = purpura
• rgb(0, 128, 128) = teal
• rgb(255, 192, 203) = rosa

Con transparencia (RGBA): rgba(255, 0, 0, 0.5) = rojo al 50% de opacidad. El cuarto valor (alfa) va de 0 (transparente) a 1 (opaco).

Conversion HEX a RGB: Convierte cada par hexadecimal a decimal. Para #3A7BF2: 3A = 58, 7B = 123, F2 = 242. Resultado: rgb(58, 123, 242).

Conversion RGB a HEX: Convierte cada valor decimal a hexadecimal de 2 digitos. Para rgb(58, 123, 242): 58 = 3A, 123 = 7B, 242 = F2. Resultado: #3A7BF2.

El modelo HSL (Hue, Saturation, Lightness) es el mas intuitivo para humanos porque separa el color en tres dimensiones faciles de entender:

• Hue (Tono): El color base en grados de 0 a 360. 0°/360° = rojo, 120° = verde, 240° = azul, 60° = amarillo, 180° = cian, 300° = magenta.
• Saturation (Saturacion): Que tan "vivo" es el color, de 0% (gris) a 100% (color puro).
• Lightness (Luminosidad): Que tan claro u oscuro, de 0% (negro) a 100% (blanco). 50% es el color puro.

Por que HSL es poderoso: Si tienes un boton azul hsl(220, 80%, 50%) y quieres su version hover mas clara, simplemente sube la luminosidad: hsl(220, 80%, 60%). Con HEX o RGB, tendrias que calcular manualmente cada componente.

Crear paletas con HSL:

• Monocromatica: Mantiene el mismo tono, varia saturacion y luminosidad: hsl(220, 80%, 30%), hsl(220, 80%, 50%), hsl(220, 80%, 70%).
• Complementaria: Suma 180° al tono. El complemento de hsl(220, 80%, 50%) es hsl(40, 80%, 50%).
• Triadica: Suma 120° y 240° al tono. Tres colores equidistantes en la rueda cromatica.

Experimenta con paletas de color usando el generador de paletas.

Estos son los colores que encontraras con mayor frecuencia en diseno web y sus equivalencias:

Nombre	HEX	RGB	Uso comun
Tailwind Blue 500	#3B82F6	rgb(59,130,246)	CTAs, links
Tailwind Red 500	#EF4444	rgb(239,68,68)	Errores, alertas
Tailwind Green 500	#22C55E	rgb(34,197,94)	Exito, confirmacion
Tailwind Yellow 500	#EAB308	rgb(234,179,8)	Advertencias
Tailwind Gray 900	#111827	rgb(17,24,39)	Texto principal
Tailwind Gray 100	#F3F4F6	rgb(243,244,246)	Fondos claros
NexTools Primary	#C75B39	rgb(199,91,57)	Terracotta, marca

Para encontrar el color exacto de cualquier sitio web, usa la herramienta de selector de color que te permite introducir un HEX y ver todas sus equivalencias.

Mientras RGB y HEX son para pantallas (luz), CMYK (Cyan, Magenta, Yellow, Key/Black) es el modelo para impresion (tinta). Si algun dia envias un diseno a imprenta, necesitas saber la diferencia.

Por que los colores se ven diferentes impresos: Una pantalla emite luz (RGB) mientras que el papel refleja luz (CMYK). El rango de colores (gamut) de CMYK es menor que el de RGB, lo que significa que algunos colores vibrantes que ves en pantalla no se pueden reproducir exactamente en papel.

La conversion RGB/HEX a CMYK no es exacta y depende del perfil de color (ICC profile) de la impresora. Como regla general:

• Los azules electricos y verdes neon pierden vivacidad en CMYK
• Los rojos y naranjas suelen mantenerse bien
• El negro puro en CMYK es C:75 M:68 Y:67 K:90 (llamado "rich black"), no C:0 M:0 Y:0 K:100

Si disenar para impresion, siempre trabaja en CMYK desde el inicio en vez de convertir al final.

Elegir colores no es solo cuestion de estetica. Las pautas WCAG 2.1 (Web Content Accessibility Guidelines) establecen ratios minimos de contraste entre texto y fondo:

• AA (minimo): Ratio de contraste 4.5:1 para texto normal, 3:1 para texto grande (18px+ o 14px+ bold)
• AAA (optimo): Ratio de contraste 7:1 para texto normal, 4.5:1 para texto grande

Ejemplo: texto blanco #FFFFFF sobre fondo azul #3B82F6 tiene un ratio de contraste de 3.1:1, que pasa AA para texto grande pero NO para texto normal. Necesitas un azul mas oscuro como #1D4ED8 (ratio 6.1:1) para cumplir AA con texto normal.

Verifica siempre el contraste de tus combinaciones de colores con la herramienta de verificacion de contraste antes de publicar tu diseno.

Dato: Aproximadamente el 8% de los hombres y el 0.5% de las mujeres tienen algun grado de daltonismo. Nunca uses solo el color para transmitir informacion critica (usa tambien iconos, patrones o texto).

En desarrollo web moderno, los colores se manejan con CSS Custom Properties (variables CSS) para facilitar temas y modo oscuro:

:root {
  --color-primary: #C75B39;
  --color-background: #FFFFFF;
  --color-text: #1A1A1A;
}

.dark {
  --color-primary: #E8956E;
  --color-background: #1A1A1A;
  --color-text: #F5F5F5;
}

Con este enfoque, cambiar toda la paleta de un sitio requiere modificar solo las variables, no cada selector individual. Frameworks como Tailwind CSS usan este patron internamente con su sistema de colores.

Consejo: Cuando crees un tema oscuro, no inviertas simplemente los colores. Reduce la saturacion ligeramente (los colores saturados "vibran" sobre fondos oscuros) y usa grises calidos en vez de negro puro (#1A1A1A en vez de #000000).

Genera gradientes CSS personalizados para tus temas con el generador de gradientes.