Cuando era niño, publiqué un fanzine sobre cómics. Esto fue mucho antes de que tuviera una computadora: ¡fue creada usando una máquina de escribir, papel y tijeras!

El fanzine fue inicialmente en blanco y negro, fotocopiado en mi escuela. Con el tiempo, a medida que obtuvo más éxito, pude permitirme la impresión offset con cubiertas de color.

Sin embargo, gestionar esos colores fue todo un desafío. Cada portada tuvo que imprimirse cuatro veces, una para cada color: cian, magenta, amarillo y clave (negro), abreviado como CMYK.

Esto significó que tuve que proporcionar cuatro hojas separadas, cada una impresa en tinta negra, pero correspondiente a un color específico.

Aquí está uno de los números que publiqué:

Todo el amarillo que ves en la imagen de arriba fue pintado a mano por mí usando tinta negra en la hoja “amarilla”. Para los tonos de piel, utilicé algo llamado "puntos rasterizados". Eran sábanas que se podían comprar con puntos negros de distintas densidades. Cortarías los puntos y los aplicarías, en este caso, a la hoja “roja”.

Trabajé en una mesa de luz, una mesa de dibujo con superficie de vidrio y iluminación incorporada, para poder ver a través de las distintas hojas mientras las alineaba correctamente.

Fue mucho tiempo, pero despertó un interés permanente en comprender los colores y la enorme diferencia entre los colores de impresión y pantalla.

Si bien CMYK está limitado a cuatro colores, sigue siendo relativamente fácil de entender. Todos hemos usado lápices de colores sobre papel y tenemos una idea intuitiva de cómo se mezclan los colores. CMYK es un modelo de color sustractivo. Comienzas con una hoja de papel blanca y, a medida que agregas más tinta, en realidad estás restando luz. Combinar todos los colores te acerca al negro. Si no aplicas tinta, el papel permanece blanco porque refleja toda la luz.

Cuando compré mi primera computadora, tuve que entender RGB, que es muy diferente de CMYK. RGB es un modelo de color aditivo utilizado para pantallas digitales. Aquí, estás mezclando la luz misma: agregar más luz hace que los colores sean más brillantes y te acerca al blanco. Apaga todas las luces RGB (R=0, G=0, B=0) y la pantalla se vuelve negra porque no se emite luz.

Como diseñador gráfico en aquel entonces, tenías que calibrar tu pantalla porque los colores que veías en la pantalla y los que veías impresos eran a menudo muy diferentes.

Visualizando RGB

RGB representa tres fuentes de luz: roja, verde y azul. Cuando una luz está apagada, su valor es 0; cuando está completamente encendido, su valor es 255. Cuando estas luces se superponen, crean diferentes colores.

Para comprender mejor cómo funciona RGB, creemos una pequeña herramienta:

HTML

Estilos

Primero, creemos una cuadrícula de 9x8:

.rgb {
  all: unset;
  aspect-ratio: 9 / 8;
  container-type: inline-size;
  display: grid;
  font-size: 1.75cqi;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
}

Es un tamaño inusual, pero eso se debe a que nuestros círculos R, G y B son de 5x5 y se superponen:

.r, .g, .b {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  font-size: 5cqi;
  mix-blend-mode: difference;
}

El CSS para .r, .g y .b es:

.r {
  background-color: rgb(var(--r), 0, 0);
  grid-area: 1 / 3 / 6 / 8;
}

.g {
  background-color: rgb(0, var(--g), 0);
  grid-area: 4 / 1 / 9 / 6;
}

.b {
  background-color: rgb(0, 0, var(--b));
  grid-area: 4 / 5 / 9 / 10;
}

Últimamente he usado mucho el área de cuadrícula. Te permite colocar un elemento de la cuadrícula en una ubicación muy específica:

inicio de fila/inicio de columna/fin de fila/fin de columna

Es más fácil visualizar esto si habilitas el visualizador de cuadrícula de Dev Tools:

¿Te diste cuenta de las tres propiedades personalizadas de CSS, --r, --g y --b? Los actualizaremos en un pequeño fragmento de JS:

const rgb = document.querySelector('.rgb');
rgb.addEventListener('input', e => {
  const N = e.target;
  document.body.style.setProperty(`--${N.name}`, N.value);
})

Y eso es básicamente todo. Agregué algunos elementos

y ajustes menores... pero casi me olvido de mencionar la línea más importante para que el visualizador funcione:

modo-mezcla-mezcla: diferencia

Lee sobre esto aquí: es muy divertido recorrer todos los modos.

Manifestación

Aquí tienes un Codepen. Haga clic y edite los números debajo de R, G y B, y observe cómo cambian el fondo de la página y las partes superpuestas de los tres círculos.