Cómo hace los colores la computadora: RGB, HEX y números binarios
#FF0000. #00FF00. #0000FF. Es una notación que seguro has visto alguna vez en propuestas de diseño o en código. Parece un cifrado, o quizá un código de videojuego. En realidad es el nombre de un color.
De arriba a abajo: rojo, verde, azul. Así es como la computadora nombra los colores. A continuación explicamos de dónde viene esta notación.
RGB — las tres letras que crean el color
Red, Green, Blue. Los tres colores primarios de la luz. Combinándolos en distintas proporciones se obtienen todos los colores que vemos.
RGB está en todos lados, todos los días
Donde hay una pantalla, casi siempre hay RGB.
- Monitor / televisor — cada pixel está formado por tres puntos: rojo, verde y azul
- Pantalla de celular — misma estructura, pixeles más pequeños
- LED de teclado gamer — tres LEDs R·G·B por cada tecla
- Iluminación de gabinete de PC — las tiras RGB son exactamente eso, señales RGB
Si amplías suficiente una pantalla, lo vas a ver claramente: rojo, verde, azul. Nada más. Millones de pequeños puntos RGB reunidos forman la imagen que ves.
El color se crea mezclando
Cada canal RGB tiene una intensidad de 0 a 255.
RGB(255, 0, 0)— solo rojo al máximo → rojo puroRGB(0, 255, 0)— solo verde al máximo → verde puroRGB(255, 255, 0)— rojo + verde → amarilloRGB(0, 0, 0)— todo apagado → negroRGB(255, 255, 255)— todo al máximo → blanco
Puede parecer raro que rojo y verde formen amarillo, pero esto es síntesis aditiva de luz. Es diferente a mezclar pinturas como en clase de arte (rojo + verde = café). La luz se vuelve más brillante al combinarse y suma blanco cuando se mezclan todos los colores.
Mueve los tres controles deslizantes para checarlo tú mismo.
El número de 8 dígitos que aparece a la derecha es la representación binaria de ese canal. Al mover el control deslizante, el número también cambia. El siguiente tema es cómo se expresan 256 valores con solo ceros y unos.
¿Por qué exactamente de 0 a 255?
La computadora solo trabaja con 0 y 1. A cada posición que contiene un 0 o un 1 se le llama bit. Cada bit que se agrega duplica el número de valores posibles.
8 bits = 1 byte. Un color tiene tres canales RGB, lo que suma 3 bytes = 24 bits. 24 bits permiten representar alrededor de 16.7 millones de colores — suficientes para el ojo humano, por eso 1 byte se volvió el estándar por canal.
Leer binario directamente
Cada posición tiene un valor fijo. De izquierda a derecha: 128, 64, 32, 16, 8, 4, 2, 1 — potencias de 2.
Sumando los valores de las posiciones con un 1 obtienes el número decimal.
Por eso el valor máximo de 8 bits es 255. Es la razón exacta de que el rango de cada canal RGB sea de 0 a 255.
HEX — el mismo número, más corto
RGB(255, 255, 255). Son 16 caracteres. Demasiado largo para escribir en cada línea de CSS o en cada campo de una herramienta de diseño. Por eso aparece una forma de escribir el mismo número de manera más compacta.
Qué es el hexadecimal
El sistema hexadecimal representa valores de 0 a 15 con un solo carácter. Pero los dígitos que usamos normalmente solo llegan del 0 al 9, diez en total. Los seis restantes se toman prestados del alfabeto.
Las reglas son tres:
- 0–9 se usan igual que siempre
- A partir del 10 empieza la A
- F es el valor máximo de un solo carácter (= 15)
¿Por qué hexadecimal?
4 dígitos binarios (0000 ~ 1111) representan exactamente 16 valores.
4 dígitos binarios = 1 carácter hexadecimal. Cuatro dígitos se comprimen en uno. Como un canal RGB tiene 8 bits, encaja perfecto en dos caracteres hexadecimales.
Cómo convertir RGB a HEX
Vamos a convertir RGB(255, 87, 51).
Los 14 caracteres quedan en 7 caracteres.
Adivinar el color leyendo HEX
Al revés, mirando un código HEX puedes intuir de qué color se trata.
#FF5733— R máximo (FF), G medio (57), B bajo (33) → naranja con mucho rojo#3576E0— R bajo (35), G medio (76), B alto (E0) → azul con toque violeta#29A85A— R bajo (29), G alto (A8), B bajo (5A) → verde fresco
Si identificas los tres pares, ya puedes distinguir si algo es “anaranjado o azulado”, lo que permite que diseñadores y desarrolladores hablen el mismo idioma.
Resumen en una línea
- RGB — tres canales: rojo, verde, azul; cada uno de 0 a 255
- Binario 8 bits — la razón de que un canal exprese 256 valores
- HEX — la misma cifra escrita en dos caracteres, de forma compacta
Cuando estas tres ideas se conectan, el código de color deja de ser un idioma extraño. Los tres números de RGB son exactamente los seis caracteres de HEX.
El siguiente paso es convertir esos números en el lenguaje del diseñador. Peticiones como «un poco más claro», «menos saturado» o «el mismo resultado en papel» son difíciles de resolver con RGB y HEX solos. Cómo HSL, CMYK y OKLCH resuelven esto continúa en El RGB no es suficiente: las notaciones de color HSL, CMYK y OKLCH.