¿Es mejor HEX o RGB?

Dan el mismo resultado. HEX es compacto para código, RGB más fácil de leer y ajustar, y RGBA añade transparencia.

¿Qué significa #FFFFFF?

Los tres canales al máximo (255, 255, 255), que es blanco. #000000 son los tres a cero — negro.

¿Cómo añado transparencia?

Usa rgba() con un valor alfa 0–1, o un hex de ocho dígitos (#RRGGBBAA) donde el último par fija la opacidad.

HEX vs RGB: cómo leer y convertir colores

Publicado el 17/9/2025 · 3 min de lectura · Herramientas para desarrolladores

Daniel Okonkwo — Desarrollador front-end y redactor de Tecnología en Allin

Rendimiento web · Formatos de archivo

Verificado con 2 fuentes

Ver perfil →

En resumen

HEX y RGB describen los mismos colores en notación distinta. RGB lista rojo, verde y azul como números 0–255, como rgb(255, 87, 51). HEX escribe los mismos valores en base 16, como #FF5733 — cada par de dígitos hex es un canal. Para convertir, divide el hex en tres pares y lee cada uno como un número 0–255, o escribe cada valor RGB como dos dígitos hex.

HEX y RGB son dos notaciones para los mismos colores. Aquí tienes cómo leer cada una, convertir entre ellas y añadir transparencia.

Mismo color, dos notaciones

En pantalla, cada color es una mezcla de luz roja, verde y azul. HEX y RGB solo registran cuánto de cada una — describen colores idénticos, solo con distinta escritura. RGB se lee y ajusta fácil a ojo; HEX es compacto y cómodo de copiar-pegar, por eso lo usan diseñadores y código. Convertir entre ellos no cambia nada del color.

Leer RGB

RGB da tres números de 0 a 255, uno por canal: rgb(255, 0, 0) es rojo puro, rgb(0, 255, 0) verde, rgb(0, 0, 255) azul. Cero significa nada de esa luz, 255 el máximo. Mezclándolos se obtiene cualquier otro color — cantidades iguales de los tres dan un gris, y los tres a 255 dan blanco.

Leer HEX

Un color HEX es un # seguido de seis dígitos, dos por canal, en base 16 donde los dígitos van 0–9 y luego A–F (así F es 15, y FF es 255). #FF5733 se descompone en FF rojo, 57 verde, 33 azul — el mismo color que rgb(255, 87, 51). #FFFFFF es blanco, #000000 negro, y una forma corta de tres dígitos como #F53 duplica cada dígito (así #F53 = #FF5533).

Convertir y añadir alfa

Convertir es solo cambiar la base de cada canal: 87 en base 10 es 57 en hex, y viceversa. Para hacer un color translúcido, añade un valor alfa (opacidad) — rgba(255, 87, 51, 0.5) es 50% transparente, o un hex de ocho dígitos #FF573380 hace lo mismo. Un conversor gestiona ambos sentidos al instante, ahorrando aritmética en base 16 a mano.

Conversor de coloresConvierte un color a HEX, RGB, HSL, HSV, CMYK, LAB y OKLCH, con el contraste.Probar la herramienta →

Preguntas frecuentes

¿Es mejor HEX o RGB?: Dan el mismo resultado. HEX es compacto para código, RGB más fácil de leer y ajustar, y RGBA añade transparencia.
¿Qué significa #FFFFFF?: Los tres canales al máximo (255, 255, 255), que es blanco. #000000 son los tres a cero — negro.
¿Cómo añado transparencia?: Usa rgba() con un valor alfa 0–1, o un hex de ocho dígitos (#RRGGBBAA) donde el último par fija la opacidad.

Artículos que podrían interesarte

Todas las guías →

ExplicaciónRelación de contraste: cómo la calcula realmente la WCAGLa relación WCAG es (L1 + 0,05) ÷ (L2 + 0,05), y L es la luminancia relativa, no el brillo. El verde aporta el 71,52 % y el azul el 7,22 %, por eso el azul puro sobre blanco aprueba con 8,59:1 mientras el gris medio suspende con 3,95:1. Aquí está el cálculo completo, ejecutado de principio a fin.ExplicaciónDegradados, bandeado y por qué el centro se ve turbioInterpolar en sRGB promedia números codificados en gamma: el punto medio de rojo a verde es #808000 cuando la respuesta a media luz es #bcbc00 — un 57,2 % menos de luz. El bandeado es otro problema aritmético: 8 bits dan 256 escalones, y un degradado oscuro puede tener sólo 28. Aquí están ambos, calculados.ExplicaciónLos esquemas de color son geometría sobre una rueda — y la rueda está malComplementario, tríada, análogo y complementario dividido no son más que rotaciones: suma 180°, 120°, 30° o 150° a un tono. La aritmética es trivial. El problema es que el círculo de tonos HSL no es perceptualmente uniforme — el amarillo y el azul con la misma luminosidad HSL difieren 12,85 veces en luminancia — así que una paleta generada hay que comprobarla luego en contraste.TutorialRedimensionar una imagen para cada red sin deformarlaMedido en el propio redimensionador: «Rellenar» es un recorte centrado sin punto de interés, y una foto vertical pierde el 38,9 % por arriba para un banner del tamaño de X. Además, las dimensiones publicadas actuales, cada una con la fecha en que se comprobó.ComparativaWebP vs JPG vs PNG: ¿qué formato de imagen usar?JPG, PNG y WebP ganan en casos distintos. Aquí tienes cuándo usar cada uno para el mejor equilibrio entre calidad, tamaño y compatibilidad.TutorialCómo comprimir una imagen sin perder calidadLas imágenes más pequeñas cargan más rápido y posicionan mejor. Aquí tienes cómo reducir una imagen con criterio — formato, resolución y nivel de compresión — sin pérdida visible.

Herramientas relacionadas

Conversor de coloresConvierte un color a HEX, RGB, HSL, HSV, CMYK, LAB y OKLCH, con el contraste.Generador de esquemas de colorDeriva esquemas complementario, análogo, triádico, tetrádico, dividido y monocromático de un color base.Conversor de imagenConvierte tus imágenes a PNG, JPG, WebP, AVIF, BMP, GIF, TIFF o ICO, por lotes y sin subir nada.

Fuentes

¿Has detectado un error en este artículo?