Este sitio es solo una puerta de entrada

Todo lo que hay aquí viene de cosas que otras personas investigaron, pensaron y construyeron de verdad: libros, artículos, registros históricos y la gente detrás de ellos. Si algo te llama la atención, ve a las fuentes originales que aparecen al final de la página. Tienen mucha más profundidad de la que una página como esta puede ofrecer.

¿Por qué el rojo se escribe #FF0000 en los códigos de color? La historia de las letras A a F

Categoría: Tecnología

En las páginas web, el color rojo se escribe como «#FF0000». En un mundo informático que supuestamente funciona solo con ceros y unos, ¿por qué aparecen letras de la A a la F? Se ha informado que esta elección fue criticada como «ridícula» por un investigador en 1968.

Al leer este artículo, entenderás cómo descifrar los códigos de color tú mismo y conocerás las razones detrás del uso de las letras A a F.

1. Cómo se leen los 6 caracteres de un código de color: de dos en dos

Para especificar un color en una página web, existe la forma de escribir «#» seguido de 6 caracteres. El rojo es #ff0000 y el blanco es #ffffff [4]. Estos 6 caracteres se dividen en pares; leídos de izquierda a derecha, representan la intensidad de la luz roja, verde y azul. La especificación #ff0000 significa «rojo al máximo, sin verde ni azul», por lo que el resultado es rojo [4]. Es extraño ver letras de la a a la f mezcladas con números si las ves por primera vez. Tanto mayúsculas como minúsculas tienen el mismo significado. A continuación, desglosaremos qué representan esos dos caracteres y por qué se usan letras.

2. Por qué cada color va de 0 a 255: las 256 combinaciones de 8 bits

Un bit es la unidad más pequeña que representa si algo es 0 o 1. Los transistores, componentes de los ordenadores, toman un estado de encendido o apagado. Se considera «encendido» como 1 y «apagado» como 0; a esta unidad de 0 o 1 se le llama «bit» [1]. Se explica que alinear los estados en dos opciones es técnicamente fácil de construir y mantener estable si la distinción es, por ejemplo, voltaje alto o bajo [7]. También se menciona la resistencia al ruido como una razón para usar este sistema [8].

Con 8 bits, hay exactamente 256 combinaciones. Con 1 bit hay 2 posibilidades; con 2 bits, 4. Por cada bit adicional, el número de posibilidades se duplica. En 8 bits son 2 elevado a la potencia de 8, es decir, 256 formas, lo que permite distinguir los números del 0 al 255 [2]. La intensidad del color va de 0 a 255 porque se asignan 8 bits a cada color, siendo 255 el valor máximo [4].

El nombre «bit» proviene de la abreviatura en inglés de «binary digit» (dígito binario). Se cuenta que John Tukey lo acortó en una nota de los Laboratorios Bell en 1947, y se cree que apareció impreso por primera vez en un artículo de Shannon al año siguiente, en 1948 [6].

3. Cómo agrupar los números binarios en bloques de 4 dígitos da un dígito hexadecimal

Las largas secuencias de ceros y unos son difíciles de leer. El valor máximo de 8 bits escrito en binario es 11111111. Cuando los números crecen, pueden tener 32 o 64 dígitos, lo que hace difícil leerlos sin cometer errores al contar. Por eso se usa el sistema hexadecimal. El sistema hexadecimal agrupa cada 4 bits del sistema binario en un solo dígito [3].

Se necesitan 16 símbolos diferentes. Los números binarios de 4 dígitos van desde 0000 hasta 1111, lo que suma 16 posibilidades. Para escribir esto con un solo carácter se requieren 16 tipos de símbolos, pero solo hay 10 dígitos numéricos (del 0 al 9). Por ello, a partir del 10 se toman prestadas letras del alfabeto: A=10, B=11, C=12, D=13, E=14 y F=15. Así, 6 letras se usan como números [2].

El número binario 11111111 se convierte en FF. Si dividimos 11111111 en grupos de 4 dígitos, obtenemos 1111 y 1111. Ambos valen 15, que corresponde a la letra F. Por lo tanto, es FF. En decimal, FF equivale a 15×16 + 15 = 255, el mismo valor máximo de 8 bits [2]. El número hexadecimal equivalente a 256 es 100 [2]. La ventaja es que 8 bits caben perfectamente en 2 dígitos hexadecimales.

4. Cómo predecir un color leyendo sus 6 caracteres de dos en dos

Analicemos #ff0000. Los primeros dos caracteres, ff, equivalen a 255 (rojo al máximo). Los siguientes pares, 00 y 00, indican que el verde y el azul son 0. Como solo brilla el rojo, el resultado es rojo. En #ffffff, los tres valores son 255, por lo que es blanco [4]. La especificación de W3C indica que 255 corresponde al 100% [4].

Por ejemplo, el número hexadecimal 80 equivale a 8×16 + 0 = 128. Si dividimos 128 entre 255, obtenemos aproximadamente 0.5, por lo que numéricamente es casi la mitad del valor máximo (esto no significa que la intensidad de la luz sea exactamente la mitad). En #808080, los tres valores son casi la mitad del máximo, así que se puede predecir un color gris intermedio entre negro y blanco. También existe una forma abreviada: si escribes 3 dígitos como #fff, se interpreta repitiendo cada dígito para formar #ffffff. Si escribes #fb0, equivale a #ffbb00. Ten cuidado de no añadir simplemente ceros al final, como en #f0b000 [4].

Nota práctica: Para #ff0000, los pares (ff, 00, 00) equivalen a (255, 0, 0). Esto significa que el rojo está al 100%; verde y azul, 0.

5. Por qué se criticó en 1968 usar las letras A-F para los números del 10 al 15

El método de tomar prestadas letras se extendió durante la década de 1960. Según Wikipedia, la notación que usa A a F para representar los números del 10 al 15 en el sistema hexadecimal se popularizó en esa época y hacia 1966, en un manual de FORTRAN IV, se convirtió en un estándar de facto [5]. Sin embargo, no hay documentos que afirmen categóricamente que IBM «inventó» esta escritura; se trata de cuándo se generalizó.

Unos años después, en 1968, Bruce Martin del Brookhaven National Laboratory criticó la elección de A-F como «ridícula» («ridiculous») en una carta enviada a una revista académica estadounidense [5]. Propuso nuevos símbolos basados en la disposición de los bits. Sin embargo, su propuesta no se generalizó y las letras A-F siguen usándose hoy [5]. Esta información se basa en citas que presentan la carta, no en el texto original completo, por lo que conviene consultar la fuente primaria para verificar los detalles.

6. Cómo convertir un número a hexadecimal con lápiz y papel

Con lápiz y papel, elige un número del 0 al 255. Divídelo entre 16 y convierte el cociente y el resto en caracteres hexadecimales. Si eliges 200: 200 ÷ 16 = 12 con resto 8. Como 12 corresponde a C, el número 200 es C8 [2]. Puedes verificarlo haciendo la operación inversa: C8 se calcula como 12×16 + 8 = 192 + 8 = 200, volviendo al número original. Convierte tu resultado hexadecimal de nuevo a decimal y piensa qué proporción representa de los 255 posibles.

Practica leer códigos de color en papel. Escribe «#404040», «#808080» y «#C0C0C0». Convierte cada par a decimal: 40 es 64, 80 es 128 y C0 es 192 [2]. En los tres casos, rojo, verde y azul tienen el mismo valor. Puedes predecir que será un gris más cercano al blanco.

Fuentes

  1. Intel Educación «Información digital» https://www.intel.co.jp/content/www/jp/ja/education/k12/the-journey-inside/explore-the-curriculum/digital-information.html (Explica los transistores, estados encendido/apagado y el concepto de bit.)
  2. Universidad de Niigata, Introducción al Procesamiento de Información «Binario y Hexadecimal» https://www.econ.niigata-u.ac.jp/~nagai/gairon_d/2and16.pdf (Tabla de correspondencia hexadecimal, cálculo de 256 combinaciones y conversión FF/255.)
  3. @IT Diccionario de Términos de Gestión de la Información «Hexadecimal» https://atmarkit.itmedia.co.jp/icd/root/62/5783562.html (Relación entre 4 dígitos binarios y 1 dígito hexadecimal.)
  4. W3C «CSS Color Module Level 3» https://www.w3.org/TR/css-color-3/ (Especificación de colores web #rrggbb y notación abreviada.)
  5. Wikipedia «Hexadecimal» https://en.wikipedia.org/wiki/Hexadecimal (Historia de la adopción de A-F en los años 60 y la crítica de Bruce Martin en 1968.)
  6. Wikipedia «Bit» https://en.wikipedia.org/wiki/Bit (Origen del término bit (binary digit) atribuido a John Tukey y Shannon.)
  7. Universidad de Gunma, Apuntes de Introducción al Procesamiento de Información (Kobayashi, 2016) https://kobaweb.ei.st.gunma-u.ac.jp/news/pdf/2016/2016-10-2wasan-kobayashi.pdf (Razones técnicas para usar dos estados binarios.)
  8. Wikipedia «Número binario» https://en.wikipedia.org/wiki/Binary_number (Motivos para usar el sistema binario, incluyendo la resistencia al ruido.)