Cómo genera colores el ordenador: RGB, HEX y números binarios
#FF0000. #00FF00. #0000FF. Es una notación que habrás visto alguna vez en maquetas de diseño o en código. Parece un cifrado, o quizá un código de juego. En realidad es el nombre de un color.
De arriba a abajo: rojo, verde, azul. Así es como el ordenador 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 todas partes, todos los días
Donde hay una pantalla, casi siempre hay RGB.
- Monitor / televisor — cada píxel está formado por tres puntos: rojo, verde y azul
- Pantalla de móvil — misma estructura, píxeles más pequeños
- LED de teclado gaming — tres LEDs R·G·B por cada tecla
- Iluminación de caja de PC — las tiras RGB son exactamente eso, señales RGB
Si amplías suficiente una pantalla, lo verás claramente: rojo, verde, azul. Solo eso. 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 contraintuitivo que rojo y verde formen amarillo, pero esto es síntesis aditiva de luz. Es distinto a mezclar pinturas como en clase de arte (rojo + verde = marrón). La luz se vuelve más brillante al combinarse y suma blanco cuando se mezclan todos los colores.
Mueve los tres deslizadores para comprobarlo 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 deslizador, el número cambia también. El siguiente tema es cómo se expresan 256 valores con solo ceros y unos.
¿Por qué exactamente de 0 a 255?
El ordenador 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 añade 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 convirtió en 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 habitualmente 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 perfectamente en dos caracteres hexadecimales.
Cómo convertir RGB a HEX
Vamos a convertir RGB(255, 87, 51).
Los 14 caracteres se convierten 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 violáceo#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 galimatías. 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.